Angular2 + New Firebase in Action

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

2
Rubén Chavarri
Who are we:
David Chavarri

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

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

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

Main Features
@dvdchavarri
ANGULAR CAMP 2016

Action
Firebase dashboard - https://console.firebase.google.com/
ANGULAR CAMP 2016
@dvdchavarri

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

@pekewake
ANGULAR CAMP 2016
+ Angular

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

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

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

Action
Live Demo – Login & Pipe & View
@pekewake
ANGULAR CAMP 2016

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

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

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

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

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

Action
ANGULAR CAMP 2016
“Fireboard App” - https://angular2-fireboard.firebaseapp.com/
@pekewake

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

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

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

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

25
Rubén Chavarri
Our dates:
David Chavarri

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

Angular2 + New Firebase in Action

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Angular2 + New Firebase in Action (20)

More from Ruben Chavarri (7)

Recently uploaded (20)

Angular2 + New Firebase in Action

Editor's Notes