polymer and firebase building real-time elements withfirebase for our data our data becomes our...
TRANSCRIPT
![Page 1: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/1.jpg)
Building real-time elements with Polymer and Firebase
+Justin Ribeiro@justinribeiro
![Page 2: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/2.jpg)
CC0 - Caleb George
![Page 3: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/3.jpg)
![Page 4: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/4.jpg)
On the bench / Justin Ribeiro
Our users don’t see this world.
![Page 5: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/5.jpg)
![Page 6: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/6.jpg)
FIREBASE + POLYMER
CCO - Jonathan Velasquez. Modfied by Justin Ribeiro.
![Page 7: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/7.jpg)
Firebase for our dataOur data becomes our backendScalability without having to deal with servers. Libraries that are quick and easy to wire. Fast real-time data without the configuration.
![Page 8: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/8.jpg)
Polymer for our UIComposable, reusable, built on standards Data binding, property observation and a host of other features allow us to build real-time elements with ease.
![Page 9: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/9.jpg)
Justin Ribeiro
What we are building today
![Page 10: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/10.jpg)
Firebase
From device to user: looking at the flow
Device Bridge
Firebase HappyUsersPolymer
![Page 11: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/11.jpg)
CC0 - Matthew Wiebe
Bridging apis and transports to Firebase
![Page 12: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/12.jpg)
wan-snmp-to-firebase.pyfirebaseConnection = firebase.FirebaseApplication(_FIREBASE_ENDPOINT, None)
load("IF-MIB")
m = M(_WAN_HOST, _WAN_COMMUNITY, _WAN_SNMP_VERSION)
# ... collect data from SNMP
result = {
'raw': {
'ifOutOctets': m.ifOutOctets[_WAN_ADAPTER],
'ifInOctets': m.ifInOctets[_WAN_ADAPTER],
'timestamp': holder_timestamp
}
}
firebaseResult = firebaseConnection.post('/em4', result)
Source: github.com/justinribeiro/wan-snmp-to-firebase-bridge
![Page 13: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/13.jpg)
CC0 -Justin Ribeiro
Bridges can help guide data to where it needs to be.
![Page 14: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/14.jpg)
Photo source info here
![Page 15: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/15.jpg)
Photo source info here
POLYMERCC0 - Justin Ribeiro
![Page 16: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/16.jpg)
my-dashboard.html<html lang="en">
<head>
<title>My Dashboard</title>
<script
src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bandwidth-gauge.html">
</head>
<body>
<bandwidth-gauge id="out" name="Out" scale="3"></bandwidth-gauge>
<bandwidth-gauge id="in" name="In" scale="20"></bandwidth-gauge>
</body>
</html>
Source: github.com/justinribeiro/bandwidth-gauge
![Page 17: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/17.jpg)
bandwidth-gauge.html<link rel="import" href="../polymer/polymer.html">
<dom-module id="bandwidth-gauge">
<template>
<style>
/* our scoped CSS via Shadow DOM styling rules */
</style>
<div id="name">{{name}}</div>
<div id="chart"></div>
<div id="reading">
<span>{{bandwidth.speed}}</span>
<span>{{bandwidth.unit}}</span>
</div>
</template>
</dom-module>Source: github.com/justinribeiro/bandwidth-gauge
![Page 18: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/18.jpg)
Source: github.com/justinribeiro/bandwidth-gauge
bandwidth-gauge.html<script>
Polymer({
is: 'bandwidth-gauge',
properties: {
name: {
type: String,
value: "Gage"
},
bandwidth: {
type: Object
},
scale: {
type: Number
} ...
![Page 19: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/19.jpg)
bandwidth-gauge.html<script>
Polymer({
...
observers: [
'updateChart(bandwidth)'
],
updateChart: function() {
// Create our rotating gauge
// Fired by our observation of bandwidth property
}
});
</script>
Source: github.com/justinribeiro/bandwidth-gauge
![Page 20: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/20.jpg)
my-dashboard.html<bandwidth-gauge id="out" name="Out" scale="3"></bandwidth-gauge>
<bandwidth-gauge id="in" name="In" scale="20"></bandwidth-gauge>
<script>
document.addEventListener('WebComponentsReady', function() {
document.getElementById("out").bandwidth = {
'speed': 100.01,
'unit': 'KB/s'
};
document.getElementById("in").bandwidth = {
'speed': 10.01,
'unit': 'MB/s'
};
});
</script>Source: github.com/justinribeiro/bandwidth-gauge
![Page 21: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/21.jpg)
<bandwidth-gauge id="out" name="Out" scale="3"></bandwidth-gauge>
<bandwidth-gauge id="in" name="In" scale="20"></bandwidth-gauge>
<script>
document.addEventListener('WebComponentsReady', function() {
var firebaseRef = new Firebase("https://my_endpoint.firebaseio.com/");
var em4Child = firebaseRef.child("em4");
em4Child.limitToLast(1).on('child_added', function(snapshot) {
var rawData = snapshot.val();
document.getElementById("out").bandwidth =
rawData.calc.calc_bytes_ifOutOctets;
document.getElementById("in").bandwidth =
rawData.calc.calc_bytes_ifInOctets;
});
});
</script>
![Page 22: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/22.jpg)
<template is="dom-bind">
<firebase-collection
limit-to-last="1"
location="https://wan-traffic-logger.firebaseio.com/em4"
data="{{em4}}"></firebase-collection>
<template is="dom-repeat" items="[[em4]]" as="device">
<bandwidth-gauge name="Out" scale="3"
bandwidth="[[device.calc.calc_bytes_ifOutOctets]]"></bandwidth-gauge>
<bandwidth-gauge name="In" scale="20"
bandwidth="[[device.calc.calc_bytes_ifInOctets]]"></bandwidth-gauge>
</template>
</template>
Source: github.com/justinribeiro/bandwidth-gauge
![Page 23: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/23.jpg)
![Page 24: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/24.jpg)
Plywood Connectedhttps://plywoodconnected.github.io/#!/cornhole
![Page 25: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/25.jpg)
![Page 26: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/26.jpg)
<dom-module id="cornhole-game">
<template>
<firebase-collection
location="{{target}}"
data="{{games}}"
on-firebase-child-added="_childAdded"
on-firebase-child-changed="_childChanged">
</firebase-collection>
<div class="flex layout horizontal center center-justified">
<template is="dom-repeat" items="[[games]]" as="game">
<cornhole-team id="red" team="RED Team" score="[[game.teams.red.score]]"
color="red"></cornhole-team>
<cornhole-team id="blue" team="BLU Team" score="[[game.teams.blue.score]]"
color="blue"></cornhole-team>
</template>
</div>
</template>
Source: github.com/PlywoodConnected/cornhole-next-polymer
![Page 27: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/27.jpg)
<script>
(function() {
Polymer({
is: 'cornhole-game',
...
_childChanged: function(event) {
var score = event.detail.childSnapshot.val();
if (!this.locked) {
if (JustinChoppedTheLogicForTheSlide) {
this.$$('#red').gooaaal();
} else if (this.score.teams.blue.score !== score.teams.blue.score
&&
...
this.score = score;
}
});
})();
</script>Source: github.com/PlywoodConnected/cornhole-next-polymer
![Page 28: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/28.jpg)
Jenny Tong
Firebase button all the thingshttps://www.firebase.com/blog/2014-09-22-realtime-iot-dev-with-firebase.html
![Page 29: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/29.jpg)
![Page 30: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/30.jpg)
http://www.code-labs.io/polymer-summit
![Page 31: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/31.jpg)
https://itshackademic.com/
![Page 32: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/32.jpg)
What’s Next?Polymerpolymer-project.org
Firebasefirebase.com
youtube.com/GoogleDevelopers
firebase-element documentationelements.polymer-project.org/elements/firebase-element
bandwidth-gauge element sample codegithub.com/justinribeiro/bandwidth-gauge
![Page 33: Polymer and Firebase Building real-time elements withFirebase for our data Our data becomes our backend Scalability without having to deal with servers. Libraries that are quick and](https://reader034.vdocuments.us/reader034/viewer/2022042310/5ed7925067b53e06555d27c1/html5/thumbnails/33.jpg)
#devfest #polymer #firebase #iot
+Justin Ribeiro@justinribeiro
Thank You!
developers.google.com/experts