Ask Me Anything Episode 100

April marks the one-year anniversary of AngularFirebase.com - perfect timing for episode 100. I don’t normally speak about personal things, but I wanted to express my gratitude to everybody who supports this content with a pro membership, feedback, youtube likes, comments, etc. This project is very much a community effort and I am very grateful to see it impact people in a positive way.

Q1 - What were your top five highlights from NgConf 2018?

First of all, NgConf was much larger and more exciting than I had imagined. The conference organizers did an amazing job keeping the atmosphere fun, exciting, and welcoming for all.

1. Angular Elements

Elements is a new paradigm that allows us to build and use Angular Components, well, outside of an Angular App. This opens the possibility of building widget-style components, then dropping them into static HTML with a script tag. You might even combine your Angular components with other JS libraries like Vue, React, or jQuery.

2. Ivy Compiler

The Ivy renderer will bring two huge improvements in Angular 6.

1. Dramatically smaller bundle sizes - 2.7Kb Hello World app compressed & minified.
2. Improved debugging. Source maps will point to exact HTML error sources, especially useful for the ExpressionChangedAfterItHasBeenChecked error.

3. RxJS v6

Like most RxJS releases, we can expect a bunch breaking changes, but it’s all for the greater good.

In RxJS v6, most imports will only come from two sites. Gone are the days of 20 lines of code dedicated to Rx imports. Classes get imported from rxjs and operators from rxjs/operators - soo much cleaner.

import { Observable, BehaviorSubject, Subscription } from 'rxjs';
import { map, tap, take } from 'rxjs/operators';

4. VS Code LiveShare

Microsoft announced VSCode LiveShare collaborative editing at NgConf. Basically it’s a shared IDE session where team members can edit the same document in realtime. I’m excited for this one because it will allow me to live code and collaborate with pro members more efficiently.

5. StackBlitz PWA Debugging

StackBlitz gave quite possibly the best 5 minute presentation I have ever seen. Debugging a PWA on a physical device can be painful because you generally need to deploy your code somewhere. With StackBlitz Teleport, you can develop your app on the desktop and easily use the Dev URL to test on physical devices.

Q2 - How do you make your videos?

I follow a five-step process.

1. Write a working proof-of-concept app
2. Screencast the code by deleting lines in reverse, then running undo (ctrl-Z).
3. Splice the footage together in Adobe Premiere and record audio
4. Create some animations in Adobe AfterEffects
5. Finalize all the details and upload.

Q3 - How do Cordova plugins work and what’s in the them?

Cordova plugins allow an app rendered with a webview (which is a web browser that gets bundled inside a native mobile app) to communicate with native device features not normally accessible to web apps.

The goal of the plugin is to provide a JavaScript abstraction of the underlying native code. Android apps are must be written in Kotlin or Java, while iOS apps must be written in Swift or Objective-C. Plugins provide a bridge that allow these two different languages to communicate.

If you look at code the code breakdown of a Cordova plugin, you usually see one-part JS, one-part Android code, and one-part iOS code.

s

Q4 - Should I use NgRx or NGXS?

The better question is should I use a state management library at all? Adding either library will add overhead and complexity to a project, but may improve your testing and debugging capabilities. State management libraries are most suitable for teams that have clearly defined objectives and understand the tradeoffs. If you’re an individual or startup that requires a lean and flexible development process, then you might consider implementing state management after your minimum viable product.

If you answered yes, your next step is to try them both and see which one feels right. NgRx will feel very comfortable if you have a background with React Redux and prefer working with pure functions, while NGXS will feel comfortable if you are experienced with Angular and prefer object oriented code.

Q5 - How would you implement an online store with Angular & Firebase?

Are there any online services or libraries to integrate an online shop into a Angular Firebase application?

Building an eCommerce store is not an easy task and never has been. I generally recommend that people look into a variety of APIs and make a decision based on the underlying business needs. A few of my favorites include:

• Stripe
• BrainTree
• Square
• Chargify
• Moltin
• And many others

These companies have invested millions into building APIs that are reliable and compliant with complex regulations surrounding payment security.