build collaborative app using polymer and firebase

39
Copyright © Walking Tree Consultancy Services Pvt. Ltd. Copyright © Walking Tree Consultancy Services Pvt. Ltd. + Build Collaborative App

Upload: ajit-kumar

Post on 11-Jan-2017

1.142 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Build Collaborative App Using Polymer and Firebase

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

+

Build Collaborative App

Page 2: Build Collaborative App Using Polymer and Firebase

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

CTO & Co-Founder@

Ajit Kumar

Page 3: Build Collaborative App Using Polymer and Firebase

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

Application Demo

Page 4: Build Collaborative App Using Polymer and Firebase

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

GitHub URL

ajit-kumar-azad/polymer-firebase

Page 5: Build Collaborative App Using Polymer and Firebase

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

Polymer

Page 6: Build Collaborative App Using Polymer and Firebase

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

Polymer

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

Page 7: Build Collaborative App Using Polymer and Firebase

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

Polymer

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

Page 8: Build Collaborative App Using Polymer and Firebase

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

Polymer

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

Page 9: Build Collaborative App Using Polymer and Firebase

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

What does it offer?

● Build app using existing Polymer elements● Create Web Components

Page 10: Build Collaborative App Using Polymer and Firebase

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

Polymer Elements

Page 11: Build Collaborative App Using Polymer and Firebase

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

A sample Web Component

Page 12: Build Collaborative App Using Polymer and Firebase

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

How to use it?

Page 13: Build Collaborative App Using Polymer and Firebase

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

And, the output is?

Page 14: Build Collaborative App Using Polymer and Firebase

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

An example from our app

Page 15: Build Collaborative App Using Polymer and Firebase

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

Another example...

Page 16: Build Collaborative App Using Polymer and Firebase

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

Firebase

Page 17: Build Collaborative App Using Polymer and Firebase

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

Firebase

Real-time NoSQL Cloud Database

Page 18: Build Collaborative App Using Polymer and Firebase

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

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

Page 19: Build Collaborative App Using Polymer and Firebase

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

API/SDK is available for?

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

Page 20: Build Collaborative App Using Polymer and Firebase

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

Pattern 1: 100% Firebase-powered

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

Page 21: Build Collaborative App Using Polymer and Firebase

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

Pattern 2: Firebase-powered + server code

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

Page 22: Build Collaborative App Using Polymer and Firebase

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

Pattern 3: Existing app with Firebase-powered features

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

Page 23: Build Collaborative App Using Polymer and Firebase

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

We will be usingPattern 1: 100% Firebase-powered

Page 24: Build Collaborative App Using Polymer and Firebase

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

Initialization

Page 25: Build Collaborative App Using Polymer and Firebase

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

Create

Page 26: Build Collaborative App Using Polymer and Firebase

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

Read

Page 27: Build Collaborative App Using Polymer and Firebase

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

Update

Page 28: Build Collaborative App Using Polymer and Firebase

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

Delete

Page 29: Build Collaborative App Using Polymer and Firebase

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

But, where is the ELEMENT?

Page 30: Build Collaborative App Using Polymer and Firebase

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

Google Web Components (GWC)

Page 31: Build Collaborative App Using Polymer and Firebase

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

Why GWC?

● Easier to integrate● Easier for data-binding

Page 32: Build Collaborative App Using Polymer and Firebase

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

Adding it to your Polymer project...

bower install --save GoogleWebComponents/firebase-element

Page 33: Build Collaborative App Using Polymer and Firebase

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

Firebase GWC

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

Page 34: Build Collaborative App Using Polymer and Firebase

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

Authentication

Page 35: Build Collaborative App Using Polymer and Firebase

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

Collection

Page 36: Build Collaborative App Using Polymer and Firebase

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

Collection

Page 37: Build Collaborative App Using Polymer and Firebase

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

Document

Page 38: Build Collaborative App Using Polymer and Firebase

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

There is more…

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

earthquakes, Weather, etc.)

Page 39: Build Collaborative App Using Polymer and Firebase

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

Thank You!

@findajit

in.linkedin.com/in/ajitkumarazad