In the talk we will show how to integrate Polymer component and FireBase, the Mobile Backend as a Service platform of Google, Realtime system and Hosting service. We will have also a little introduction to reactive programming, and how to build interactive applications taking advantage of this new approach with Polymer components in our apps to improve the user experience. To see all of this in action: We will end up developing an interactive application which will show the potential of this awesome synergy Polymer and Firebase, with a collaborative example ;)

1. Polymer +
in action
@pekewake
@dvdchavarri

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

3. What do they
have in common?

4. Interactive Application
Realtime
Multiple users
Online / Offline
User experience
New Trends

5. * 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

6. How?

7. How?
FaceBook
(Oauth v2)
Twitter
(Oauth v1)
Google
(Oauth v2)
MongoD
BAPI Rest
NodeJS
Accessibility
WebSockets
Session Storage
Static Server
Responsive
Cross
Platfor
Push
Notificatio
nNative/web

8. Idea
Let use
some tricks

9. Polymer
Component Architecture
Progressive Web App
Reusable components
Material Design
#UseThePlatform

10. Firebase
Realtime Database
Authentication
Dynamic Models
Hosting

11. PolymerFire
https://github.com/firebase/polymerfire
+

12. Demo

13. Now, in slow
motion

14. Component Deconstruction

15. <My-APP>

16. <users-list> <poly-fire>

17. <color-picker> <clean>
<fire-login>
<poly-canvas>

18. <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>

19. 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>

20. < Reactive-Programming >
http://reactivex.io/

21. +
Cloud Messaging
Authentication
Realtime DatabaseHosting
Storage

22. <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>

23. <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>

24. <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>

25. <firebase-auth>

26. <firebase-document
id="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>

27. <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>

28. <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>

29. <firebase-messaging>
<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>

30. <firebase-messaging>
<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>

31. * Authentication
* Users
* Sign-in Methods
behind the scene
* DataBase
* Real time collections
* Access rules
* Usage analytics

32. An even more
difficult Trick

33. AdMobDynamic LinksNotificationsRemote Config
Crash ReportingTest LabAnalytics Hosting
Firebase platform services

34. Thanks!@dvdchavarri@pekewake

35. 35
Rubén Chavarri
Who we are
David Chavarri

36. Sources
Videos Polymer Summit 2016 (Taylor Savage)
https://www.polymer-project.org/summit
Polymer Butter & Firebase Jelly (Michael Bleigh)
https://www.youtube.com/watch?v=f7ODNJKh3Yg
FireBase
https://firebase.google.com
PolymerFire
https://github.com/firebase/polymerfire
CodeLab: Polymer Summit 2016
https://codelabs.developers.google.com/polymer-summit-2016
CodeLab: Build a Progressive Web App with Firebase
https://codelabs.developers.google.com/codelabs/polymer-firebase-pwa/
Resources
https://github.com/Twiinlab/polyfire-summit
https://polyfire-board.firebaseapp.com/

37. https://firebase.google.com/pricin
g/
Pricin
g