Tweet
Tweet

Slide 1

Slide 1 text

London JavaScript, February 2016 Hi London JavaScript! Sara Robinson @SRobTweets David East @_davideast Jeff Cross @jeffbcross

Slide 2

Slide 2 text

London JavaScript, February 2016 How Angular 2 makes Firebase easy

Slide 3

Slide 3 text

London JavaScript, February 2016 Firebase A powerful platform for building extraordinary apps

Slide 4

Slide 4 text

Static Hosting Realtime Database User Authentication

Slide 5

Slide 5 text

Realtime Data Synchronization

Slide 6

Slide 6 text

London JavaScript, February 2016 Firebase + Angular 1 AngularFire

Slide 7

Slide 7 text

// 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()));

Slide 8

Slide 8 text

London JavaScript, February 2016 Making Angular 1 work with Firebase $digest Array handling Promises

Slide 9

Slide 9 text

London JavaScript, February 2016 $digest angular.module(“app”) .controller(“MyCtrl”, MyCtrl); function MyCtrl($scope) { var ref = new Firebase(“”); ref.on(“value”, function(snap) { // needs a $timeout $scope.obj = snap.val(); }); }

Slide 10

Slide 10 text

London JavaScript, February 2016 Array Handling var ref = new Firebase(“”); ref.on(“value”, function(snap) { // Firebase returns data as an object $scope.obj = snap.val(); });

Slide 11

Slide 11 text

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 } } }); }

Slide 12

Slide 12 text

London JavaScript, February 2016 Cool new features in Angular 2

Slide 13

Slide 13 text

London JavaScript, February 2016 Cool new features in Angular 2 Zones + Change Detection

Slide 14

Slide 14 text

London JavaScript, February 2016 Cool new features in Angular 2 Zones + Change Detection Pipes

Slide 15

Slide 15 text

London JavaScript, February 2016 Cool new features in Angular 2 Zones + Change Detection Pipes Observables

Slide 16

Slide 16 text

London JavaScript, February 2016 Firebase + Angular 2

Slide 17

Slide 17 text

London JavaScript, February 2016 AngularFire 2 (super early alpha) $ npm install --save angularfire2 github.com/angular/angularfire2 npmjs.com/package/angularfire2

Slide 18

Slide 18 text

London JavaScript, February 2016 Angular + Firebase Let’s write some code!

Slide 19

Slide 19 text

London JavaScript, February 2016 Angular + Firebase We’ll build...

Slide 20

Slide 20 text

London JavaScript, February 2016 Angular + Firebase We’ll build... a social, local, realtime chat app

Slide 21

Slide 21 text

London JavaScript, February 2016 Angular + Firebase We’ll build... a social, local, realtime chat app with i18n support

Slide 22

Slide 22 text

London JavaScript, February 2016 I18n support?! line => queue apartment => flat sausage => black pudding

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

London JavaScript, February 2016 Step 1: Instantiate our Firebase URL bootstrap(AngularfireDemoApp, [ defaultFirebase('https://FB-URL.firebaseio.com'), FIREBASE_PROVIDERS ]);

Slide 28

Slide 28 text

London JavaScript, February 2016 Step 2: push data to Firebase return PromiseObservable .create(this._fbRef.child('messages').push({ message, user }));

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

London JavaScript, February 2016 Step 3: use the async pipe in our template template: `
`

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

London JavaScript, February 2016 Thank You! Jeff Cross / @jeffbcross David East / @_davideast Sara Robinson / @SRobTweets