Build Collaborative App Using Polymer and Firebase

Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd.

+

Build Collaborative App


CTO & Co-Founder@

Ajit Kumar


Application Demo


GitHub URL

ajit-kumar-azad/polymer-firebase


Polymer


Polymer

Library to create reusable components - Web Component - for the modern web


Polymer

For everything……...you have an ELEMENT!


Polymer

Credit: https://www.polymer-project.org/1.0/docs/start/what-is-polymer.html


What does it offer?

● Build app using existing Polymer elements● Create Web Components


Polymer Elements


A sample Web Component


How to use it?


And, the output is?


An example from our app


Another example...


Firebase


Firebase

Real-time NoSQL Cloud Database


What does it offer?

● Authenticate users● Store data● Sync data to all connected clients, in real-

time● Data is available when your app goes offline● Hosting


API/SDK is available for?

● Web (JavaScript)● Android (Java)● iOS (Objective C)● REST (Server-side)


Pattern 1: 100% Firebase-powered

Source: https://www.firebase.com/blog/2013-03-25-where-does-firebase-fit.html


Pattern 2: Firebase-powered + server code



Pattern 3: Existing app with Firebase-powered features



We will be usingPattern 1: 100% Firebase-powered


Initialization


Create


Read


Update


Delete


But, where is the ELEMENT?


Google Web Components (GWC)


Why GWC?

● Easier to integrate● Easier for data-binding


Adding it to your Polymer project...

bower install --save GoogleWebComponents/firebase-element


Firebase GWC

● firebase-auth● firebase-collection● firebase-document


Authentication


Collection


Collection


Document


There is more…

● Sorting/Ordering● Indexing● Pagination● Transaction● Offline Capabilities● Security● Open Data Sets (Airport delays,

earthquakes, Weather, etc.)


Thank You!

@findajit

in.linkedin.com/in/ajitkumarazad

Build Collaborative App Using Polymer and Firebase

Technology