How Angular 2 Makes Firebase Easy

Firebase is a powerful platform for building mobile and web applications. Use Firebase to store and sync data instantly, authenticate users, and easily deploy your web app. In this talk, you’ll learn how you can use Firebase to add a backend to your Angular app in minutes.

Transcript

1. London JavaScript, February 2016 Hi London JavaScript! Sara Robinson @SRobTweets David East @_davideast Jeff Cross @jeffbcross
2. London JavaScript, February 2016 How Angular 2 makes Firebase easy
3. London JavaScript, February 2016 Firebase A powerful platform for building extraordinary apps
4. Static Hosting Realtime Database User Authentication
5. Realtime Data Synchronization
6. London JavaScript, February 2016 Firebase + Angular 1 AngularFire
7. // Create a Firebase database reference const ref = new Firebase("https://fb-a2.firebaseio.com/"); // Write data to Firebase ref.set("Hello London JavaScript!"); // Sync data ref.on("value", (snapshot) => console.log(snapshot.val()));
8. London JavaScript, February 2016 Making Angular 1 work with Firebase $digest Array handling Promises
9. London JavaScript, February 2016 $digest angular.module(“app”) .controller(“MyCtrl”, MyCtrl); function MyCtrl($scope) { var ref = new Firebase(“<my-firebase-app>”); ref.on(“value”, function(snap) { // needs a $timeout $scope.obj = snap.val(); }); }
10. London JavaScript, February 2016 Array Handling var ref = new Firebase(“<my-firebase-app>”); ref.on(“value”, function(snap) { // Firebase returns data as an object $scope.obj = snap.val(); });
11. London JavaScript, February 2016 Promises angular.module(“app”, [“ngRoute”]) .config(ApplicationConfig); function ApplicationConfig($routeProvider) { $routeProvider.when(“/”, { controller: “MyCtrl”, template: “view.html”, resolve: { items: function() { // return a promise here } } }); }
12. London JavaScript, February 2016 Cool new features in Angular 2
13. London JavaScript, February 2016 Cool new features in Angular 2 Zones + Change Detection
14. London JavaScript, February 2016 Cool new features in Angular 2 Zones + Change Detection Pipes
15. London JavaScript, February 2016 Cool new features in Angular 2 Zones + Change Detection Pipes Observables
16. London JavaScript, February 2016 Firebase + Angular 2
17. London JavaScript, February 2016 AngularFire 2 (super early alpha) $ npm install --save angularfire2 github.com/angular/angularfire2 npmjs.com/package/angularfire2
18. London JavaScript, February 2016 Angular + Firebase Let’s write some code!
19. London JavaScript, February 2016 Angular + Firebase We’ll build...
20. London JavaScript, February 2016 Angular + Firebase We’ll build... a social, local, realtime chat app
21. London JavaScript, February 2016 Angular + Firebase We’ll build... a social, local, realtime chat app with i18n support
22. London JavaScript, February 2016 I18n support?! line => queue apartment => flat sausage => black pudding
23. London JavaScript, February 2016 Angular CLI (super early Alpha) $ npm install --save angular-cli $ ng new my-awesome-app $ cd my-awesome-app $ ng serve
24. London JavaScript, February 2016 Angular CLI (super early Alpha) $ npm install --save angular-cli $ ng new my-awesome-app $ cd my-awesome-app $ ng serve
25. London JavaScript, February 2016 Angular CLI (super early Alpha) $ npm install --save angular-cli $ ng new my-awesome-app $ cd my-awesome-app $ ng serve
26. London JavaScript, February 2016 Angular CLI (super early Alpha) $ npm install --save angular-cli $ ng new my-awesome-app $ cd my-awesome-app $ ng serve
27. London JavaScript, February 2016 Step 1: Instantiate our Firebase URL bootstrap(AngularfireDemoApp, [ defaultFirebase('https://FB-URL.firebaseio.com'), FIREBASE_PROVIDERS ]);
28. London JavaScript, February 2016 Step 2: push data to Firebase return PromiseObservable .create(this._fbRef.child('messages').push({ message, user }));
29. London JavaScript, February 2016 A closer look at pipes Pipes - transform data as input into a desired output • Stateless pipes - transform data without remembering or detecting anything about it • Stateful pipes (async) - receive a Promise or Observable as input, maintain a subscription to that input
30. London JavaScript, February 2016 Step 3: use the async pipe in our template template: `<div *ngFor="#message of messages | async"></div>`
31. London JavaScript, February 2016 Resources Demo App github.com/jeffbcross/qa-app-demo Angular 2 Angular.io github.com/angular/angular angular.io/docs/ts/latest/guide/template- syntax.html Firebase Firebase.com AngularFire2 github.com/angular/angularfire2 npmjs.com/package/angularfire2 Angular CLI github.com/angular/angular-cli npmjs.com/package/angular-cli npmjs.com/package/angular-cli-firebase- hosting
32. London JavaScript, February 2016 Thank You! Jeff Cross / @jeffbcross David East / @_davideast Sara Robinson / @SRobTweets