Intro to Polymer and Firebase

Cyberjaya, December 2015

+Henry Lim @henrylim96

Agenda Intro to Firebase Intro to Polymer Live coding/Demo

Is Firebase FREE?

Is Firebase FREE? *

@polymer

How Firebase looks like? is this a question?

This is JSON!

How to use Firebase?

Later. OK?

Let’s talk about love

Let’s talk about love Polymer

@polymer

http://drbl.in/esYL Building UI tabs should be easy!

polymer

What is Polymer?

What is Polymer? How to use

@polymer

<head> <link rel=“import” href=“paper-toolbar.html”> </head> @polymer

<paper-toolbar> <paper-icon-button icon=“menu”></paper-icon-button> <div flex>Toolbar</div> <paper-icon-button icon=“refresh”></paper-icon-button> <paper-icon-button icon=“add”></paper-icon-button> </paper-toolbar>
@polymer

Wait a min. Do I need to remember everything?

github.com/robdodson/PolymerSnippets

Make sure you import webcomponents-lite.min.js and it’s 38.3KB only and
it’s not required for Chrome

<paper-tabs> <paper-tab>KNOWLEDGE</paper-tab> <paper-tab>HISTORY</paper-tab> <paper-tab>FOOD</paper-tab> </paper-tabs> Less Code. Less confusion. Polymer

Components

<menu-button> <page-scaffold> <animated-pages>

What if we designed HTML for the mobile web?

<iron-icon> <paper-fab> <paper-drawer-panel> <paper-input>

paper-elements

<paper-toolbar> A basic container for controls like tabs or buttons
MY AP @polymer

<paper-toolbar> <div>MY APP</div> </paper-toolbar> <paper-toolbar> A basic container for controls
like tabs or buttons MY APP @polymer <link rel=“import” href=“paper-toolbar.html”>

<paper-toolbar> <paper-icon-button icon=“menu”> </paper-icon-button> <div>MY APP</div> </paper-toolbar> <link rel=“import” href=“paper-toolbar.html”>
<paper-toolbar> A basic container for controls like tabs or buttons MY APP @polymer

A responsive container that combines a left- or right-side drawer
panel and a main content area. <paper-drawer-panel> <paper-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </paper-drawer-panel>

<paper-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel...
</div> </paper-drawer-panel> A responsive container that combines a left- or right-side drawer panel and a main content area. <paper-drawer-panel>

@polymer

I want to add a marker to a Google map.
@polymer

} </style> <div id="map"></div> <script src=“http://maps.googleapis.com/maps/api/js?callback=mapReady"> </script> <script> var marker
= null; function getCurrentLocation(callback) { navigator.geolocation.watchPosition(callback); } function addMarker(opts, info) { var marker = new google.maps.Marker(opts); var infoWindow = new google.maps.InfoWindow({content: info}); google.maps.event.addListener(marker, 'click', function() { infoWindow.open(opts.map, marker); }); return marker; } function mapReady() { var container = document.querySelector('#map'); var map = new google.maps.Map(container, { zoom: 14, disableDefaultUI: true }); getCurrentLocation(function(pos) { var current = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); map.setCenter(current); // Re-position marker or create new one. if (marker) { marker.setPosition(map.getCenter()); } else { marker = addMarker({ position: current, map: map, title: 'Your location' }, '<b>Your location</b>'); } So much code for one map marker! @polymer

@polymer

Elements Building blocks for a better web

elements.polymer-project.org

Example

limhenry.me

polymer-project.org/apps/topeka/

polymer-project.org

goo.gl/Ji3WdW

Firebase + Polymer?

<thank-you> Henry Lim @henrylim96 Credit: Rob Dodson

Intro to Polymer and Firebase

Intro to Polymer and Firebase

More Decks by Henry Lim

Other Decks in Technology

Featured

Transcript