Polymer and Firebase in action
-
Upload
ruchavarri -
Category
Technology
-
view
556 -
download
1
Transcript of Polymer and Firebase in action
Polymer + in action
@pekewake
@dvdchavarri
2
Software Engineer at [email protected]@pekewakehttps://es.linkedin.com/in/ruchavarri
Rubén Chavarri
Who we are
Software Architect at Ciber [email protected]@dvdchavarrihttps://es.linkedin.com/in/dchavarri
David Chavarri
What do they have in
common?
Interactive Application Realtime Multiple users Online / Offline User experience
New Trends
* As user I want to login with my social networks
Our Great App* As user I want to interact in real time* As user I want to not miss out anything* As user I want to have a special experience* As owner I want it on the cloud* As owner I want it cheap and for yesterday* As dev I want to do all of this in a Cool App* As dev I don’t want to die trying
How?
How?
FaceBook (Oauth v2)
Twitter (Oauth v1)
Google (Oauth v2) Mongo
DBAPI RestNodeJS
Accessibility
WebSockets
Session Storage Static
Server
Responsive
Cross Platform
Push NotificationNative/web
IdeaLet use some tricks
Polymer Component ArchitectureProgressive Web AppReusable componentsMaterial Design#UseThePlatform
FirebaseRealtime DatabaseAuthenticationDynamic ModelsHosting
PolymerFirehttps://github.com/firebase/polymerfire
+
Demo
Now, in slow motion
Component Deconstruction
<My-APP>
<users-list> <poly-fire>
<color-picker> <clean>
<fire-login>
<poly-canvas>
<poly-canvas>…<canvas id="canvas" width="640" height="480"></canvas>…
<script>Polymer({ is: "poly-canvas", },ready: function(e){ … },drawCanvasLine: function(line) { var color = line.color; var coordsFrom, point; for (var point in line.points) {
drawline(point); }},
cleanCanvas: function () { this.$.canvas.width = this.$.canvas.width; }</script>
var mouseDowns = Rx.Observable.fromEvent(this.canvas, 'mousedown');var mouseUps = Rx.Observable.fromEvent(this.canvas, 'mouseup');var mouseMoves = Rx.Observable.fromEvent(this.canvas, 'mousemove'); var mouseDrags = mouseDowns.select(function (downEvent) { _this.prevPoint = ""; _this.fire('downcanvas'); return mouseMoves.takeUntil(mouseUps).select(function (drag) { return getOffset(drag); }).doOnCompleted(function(data){ this.fire('upcanvas'); })}); mouseDrags.subscribe(function (drags) { drags.subscribe(function (move) { _this.fire('movecanvas', {x: move.x, y: move.y}); });});
<poly-canvas>
+
Cloud Messaging
Authentication
Realtime DatabaseHosting
Storage
<firebase-app name="polyfireboard" api-key="AIza..." auth-domain="polyfire-board.firebaseapp.com"
database-url="https://polyfire-board.firebaseio.com"
storage-Bucket= "polyfire-board.appspot.com" messaging-sender-id="4099..."></firebase-app>
<firebase-app>
<script> var config = {
apiKey: "AIza...", authDomain: "polyfire-board.firebaseapp.com",
databaseURL:"https://polyfire-board.firebaseio.com",
storageBucket: "polyfire-board.appspot.com", messagingSenderId: "4099..." } firebase.initializeApp(config);</script>
<firebase-app>
<firebase-auth id="auth" app-name="polyfireboard" provider="google" signed-in="{{signedIn}}" user="{{user}}">
</firebase-auth>...<script>Polymer({ is: ‘polyrx-fire’, ... signIn: function() { var self = this; this.$.auth.signInWithPopup().then(function(result){ self.initConnection();
}); }, }); </script>
<firebase-auth>
<firebase-auth>
<firebase-documentid="fireUser" app-name="polyfireboard" path="/users/[[user.uid]]"data="{{myuser}}">
</firebase-document>...<paper-icon-item> <div class="avatar blue" item-icon
style="background-image:url({{myuser.photoURL}})"> </div> <paper-item-body two-line>
<div>{{myuser.displayName}}</div><div secondary>{{myuser.email}}</div>
</paper-item-body></paper-icon-item>
<firebase-document>
<script>Polymer({ is: ‘polyrx-fire’, ready: function(e){ self = this; this.initConnection(); }, ... initConnection: function(){ this.$.lines.ref.on('child_added', function(child,prevKey){
self.fire('newline',child.val()); }); this.$.lines.ref.on('child_removed', function(child,prevKey){
self.fire(‘deleteline',child.val()); }); ... });</script>
<firebase-document>
<firebase-query id="queryUsers" app-name="polyfireboard" path="/users"data="{{users}}“order-by-child="displayName"> >
</firebase-query>
<template is="dom-repeat" items="[[users]]" as="myUser"> <paper-icon-item> <div class="avatar blue" item-icon
style="background-image:url({{myUser.photoURL}})"></div><paper-item-body two-line>
<div>{{myUser.displayName}}</div><div secondary>{{myUser.email}}</div>
</paper-item-body> </paper-icon-item> </template>
<firebase-query>
<firebase-messaging>
0.10NEW
!0.10NEW
!<firebase-messaging
id="messaging" token="{{pushToken}}" on-message="pushReceived">
</firebase-messaging>...<script> Polymer({ ready: function() { this.$.messaging.requestPermission(); }, pushReceived: function(e, detail) { detail.message.notification; detail.message.data; } });</script>
<firebase-messaging>
0.10NEW
!<firebase-messaging
id="messaging" token="{{pushToken}}" on-message="pushReceived">
</firebase-messaging>...<script> Polymer({ ready: function() { this.$.messaging.requestPermission(); }, pushReceived: function(e, detail) { detail.message.notification; detail.message.data; } });</script>
* Authentication* Users* Sign-in Methods
behind the scene
* DataBase* Real time
collections* Access rules* Usage
analytics
An even more
difficult Trick
AdMobDynamic LinksNotificationsRemote Config
Crash ReportingTest LabAnalytics Hosting
Firebase platform services
Thanks!@dvdchavarri@pekewake
35
Software Engineer at [email protected]@pekewakehttps://es.linkedin.com/in/ruchavarri
Rubén Chavarri
Who we are
Software Architect at Ciber Españ[email protected]@dvdchavarrihttps://es.linkedin.com/in/dchavarri
David Chavarri
SourcesVideos Polymer Summit 2016 (Taylor Savage)https://www.polymer-project.org/summitPolymer Butter & Firebase Jelly (Michael Bleigh)https://www.youtube.com/watch?v=f7ODNJKh3YgFireBasehttps://firebase.google.comPolymerFirehttps://github.com/firebase/polymerfireCodeLab: Polymer Summit 2016https://codelabs.developers.google.com/polymer-summit-2016
CodeLab: Build a Progressive Web App with Firebasehttps://codelabs.developers.google.com/codelabs/polymer-firebase-pwa/
Resourceshttps://github.com/Twiinlab/polyfire-summit
https://polyfire-board.firebaseapp.com/
https://firebase.google.com/pricing/
Pricing