Polymer + in action

@pekewake

@dvdchavarri

2

Software Engineer at PlainConceptsruchavarri@gmail.com@pekewakehttps://es.linkedin.com/in/ruchavarri

Rubén Chavarri

Who we are

Software Architect at Ciber Spaindvdchavarri@gmail.com@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>

< Reactive-Programming >

http://reactivex.io/

+

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 PlainConceptsruchavarri@gmail.com@pekewakehttps://es.linkedin.com/in/ruchavarri

Rubén Chavarri

Who we are

Software Architect at Ciber Españadvdchavarri@gmail.com@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