Description We will talk about how to mix Angular2 and the new FireBase, one of the latest GoogleI/O surprises, a Mobile Backend as a Service, Realtime and Hosting service. We will have also a little introduction to reactive programming, how to build interactive applications and how to take advantage of this new approach in our apps. In the talk we will use the following libraries among others: Angular2 + RxJS AngularFire2 New FireBase Angular Material We will end up developing an interactive application which will show the potential of this awesome synergy Angular2 + New Firebase, with a collaborative example ;)

1. Angular2 + New Firebase in
Action Angular 2 +
in Action
@pekewake
@dvdchavarri
ANGULAR CAMP 2016

2. 2
Rubén Chavarri
Who are we:
David Chavarri

3. Index
@dvdchavarri
ANGULAR CAMP 2016
 Introduction to FireBase
 Main Features
 Angular2 integration with AngularFire2
 Live demos
 Online publication

4. A powerful platform for building realtime apps
ANGULAR CAMP 2016
@dvdchavarri

5. Firebase Introduction
@dvdchavarri
ANGULAR CAMP 2016
 NoSQL Data-store
 Returns JSON from a
RESTful API
 Whenever data is updated.
It sends the update down
to every listening client

6. Main Features
@dvdchavarri
ANGULAR CAMP 2016

7. Angular2 + New Firebase in
Action
Firebase dashboard - https://console.firebase.google.com/
ANGULAR CAMP 2016
@dvdchavarri

8. First steps
@dvdchavarri
ANGULAR CAMP 2016
// Create a Furebase database reference
var ref = new Firebase ("https://angular-camp.firebaseio.com/");
// Save data
ref.set("Hello Angular Camp!");
// Sync data
ref.on("value", function(snapshot) {
console.log(snapshot.val());
});
// Push data
ref.push({ name : "WhatEver" });

9. @pekewake
ANGULAR CAMP 2016
+ Angular

10. Angular 1.x & Firebase
ANGULAR CAMP 2016
 $digest
 Array handling
 Authetication
@pekewake

11. Angular 2 & Firebase
ANGULAR CAMP 2016
 Observables!!!
 Zones
 Pipes
@pekewake

12. Pipes + Firebase = ♥
ANGULAR CAMP 2016
 Create a Firebase inside your pipe
 Stream data from Firebase
 All in the template
@pekewake

13. Angular2 + New Firebase in
Action
Live Demo – Login & Pipe & View
@pekewake
ANGULAR CAMP 2016

14. Lets put Firebase in Action ; )
From “basic draw canvas”
to “Interactive multiplayer board”
lets think in observables
@pekewake
ANGULAR CAMP 2016

15. Angular2 + New Firebase in
Action
@pekewake
ANGULAR CAMP 2016
“basic draw canvas”
angular cli project
canvas @ViewChild
mouse observable events
draw lines (color + move)

16. @pekewake ANGULAR CAMP 2016
“Interactive multiplayer board” https://angular2-fireboard-demo.firebaseapp.com/

17. How it works:
ANGULAR CAMP 2016
 Import firebase & AngularFire2 (last version)
 Add Firebase connection
 Pipe into Template
 Adapt observers
@pekewake

18. With a little more work
We´ll build…
an cool interactive multiplayer board
ANGULAR CAMP 2016
@pekewake

19. Angular2 + New Firebase in
Action
ANGULAR CAMP 2016
“Fireboard App” - https://angular2-fireboard.firebaseapp.com/
@pekewake

20. Improvements:
ANGULAR CAMP 2016
 Observer optimization (child_add)
 Multiplatform (desktops & phones)
 Github Authentication
 Users connected list & counter
 Components organization
 Material design
@pekewake

21. Firebase Publication
ANGULAR CAMP 2016
@pekewake
//build for production (concat, min…)
ng build –prod
//Publish from console
firebase deploy

22. Work in progress
ANGULAR CAMP 2016
 Router / DI integration
 More Pipes
 Interactive querying
 Route-based security
@pekewake

23. Firebase extra features
@dvdchavarri
ANGULAR CAMP 2016
 Develop
 Hosting
 Remote Config
 Test Lab
 Crash Analytics
 Grow
 Notification
 Dynamic Liks
 Earn
 AdMob

24. Thanks!@dvdchavarri@pekewake

25. 25
Rubén Chavarri
Our dates:
David Chavarri

26. Sources
Example source code:
Example App:
https://github.com/Twiinlab/angular2-firebase-demo
Demo App:
https://github.com/Twiinlab/angular2-firebase
Resources & videos:
https://github.com/angular/angularfire2
Learn More:
Deep Dive on the Realtime Database:
youtu.be/cYinms8LurA
Take one of Codelabs:
Codelabs.developers.google.com/io2016
Angular2-fireboard in Firebase