backbone conf 2014 - realtime & firebase

38
A visit in the world of RESPONSIVE real-time — BackboneConf — 2014

Upload: clement-wehrung

Post on 14-Jul-2015

280 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Backbone Conf 2014 - Realtime & Firebase

A v i s i t i n the world of RESPONSIVE real-time

— BackboneConf — 2014

Page 2: Backbone Conf 2014 - Realtime & Firebase

WHY ?

Page 3: Backbone Conf 2014 - Realtime & Firebase

the user world

Page 4: Backbone Conf 2014 - Realtime & Firebase

The Daily Struggle

Page 5: Backbone Conf 2014 - Realtime & Firebase

The Daily Struggle

Page 6: Backbone Conf 2014 - Realtime & Firebase

TODAY— Fast & Real-Time —

Page 7: Backbone Conf 2014 - Realtime & Firebase

when?

Page 8: Backbone Conf 2014 - Realtime & Firebase

when?

Realtime web analytics

Digital Advertising E-Commerce

Publishing

Massively Multiplayer Online Games

Backend Services

Messaging

Collaboration

Realtime Monitoring

Chat

Page 9: Backbone Conf 2014 - Realtime & Firebase

Existing Features New Features

Page 10: Backbone Conf 2014 - Realtime & Firebase
Page 11: Backbone Conf 2014 - Realtime & Firebase

Real-Time First

Page 12: Backbone Conf 2014 - Realtime & Firebase

HostedSELF-Hosted

Page 13: Backbone Conf 2014 - Realtime & Firebase

SELF-Hosted

Page 14: Backbone Conf 2014 - Realtime & Firebase

Hosted

Page 15: Backbone Conf 2014 - Realtime & Firebase

Hosted

General Messaging / PubSub

Data Sync + Persistence + Full Stack

Messaging

PubNub, Pusher

Firebase, Google Drive, Meteor

Focus on delivery to servers

Page 16: Backbone Conf 2014 - Realtime & Firebase

— Challenges —

Page 17: Backbone Conf 2014 - Realtime & Firebase

— Backbone Fire

simple

philosophy

model / collection

easy transition

black magic

asObject / asArray

community

2-way data binding 3-way data binding

Page 18: Backbone Conf 2014 - Realtime & Firebase

— Backbone Fire

Page 19: Backbone Conf 2014 - Realtime & Firebase

- Backend as a Service w/ NoSQL Data Storage

- Security

- Signup / Login Providers — built-in Facebook, Google, Github, …

- Multi-Platform (JS + Node, iOS, Android) + Full REST w/ Streaming

- Offline Support — iOS, coming soon on every platform

- Integrations! — Backbone, Angular, Ember, React, …

- Hosting — Cool for front-end developers!

— Cheat Sheet

Page 20: Backbone Conf 2014 - Realtime & Firebase

Get Started

var ref = new Firebase("https://<your-firebase>.firebaseio.com");

— Cheat Sheet

Page 21: Backbone Conf 2014 - Realtime & Firebase

Update in realtime

ref.set({ name: "Backbone Conf" });

— Cheat Sheet

Page 22: Backbone Conf 2014 - Realtime & Firebase

React to updates in realtime

ref.on("value", function(data) { var name = data.val() ? data.val().name : ""; console.log(“My name is " + name); });

— Cheat Sheet

Page 23: Backbone Conf 2014 - Realtime & Firebase
Page 24: Backbone Conf 2014 - Realtime & Firebase

Backbone.Firebase.Collection

// This is a plain old Backbone Model var Todo = Backbone.Model.extend({ defaults: { completed: false, title: 'New todo' } });

// This is a Firebase Collection that syncs data from this url var Todos = Backbone.Firebase.Collection.extend({ url: 'https://<your-firebase>.firebaseio.com/todos', model: Todo });

Page 25: Backbone Conf 2014 - Realtime & Firebase

Now, Forget Fetch & Save! todoList.add({ subject: 'Make more coffee', importance: 1 });

todoList.remove(someModel);

var model = todoList.create({bar: "foo"}); todoList.get(model.id);

Page 26: Backbone Conf 2014 - Realtime & Firebase
Page 27: Backbone Conf 2014 - Realtime & Firebase

Backbone.Firebase.Model — Not in a collection, pretty please.

var Todo = Backbone.Firebase.Model.extend({ url: "https://<your-firebase>.firebaseio.com/mytodo" });

Page 28: Backbone Conf 2014 - Realtime & Firebase

Example User Settings or Profile with Backbone.Firebase.Model

var UserSettings = Backbone.Firebase.Model.extend({ url: “https://<your-firebase>.firebaseio.com/userSettings/645835" });

-> Adapt UI based on changes — e.g. instant cross-window settings -> Do the same for User Profile — e.g. nickname change instant sync

Tips: instead of ‘url’, use ref.child(‘userSettings’).child(userId)

Page 29: Backbone Conf 2014 - Realtime & Firebase

Saving Data

set( ) Write or replace data to a defined path, like messages/users/<username>

update( ) Update some of the keys for a defined path without replacing all of the data

push( ) Add to a list of data in Firebase. Every time you call push() Firebase generates a unique ID, like messages/users/<unique-user-id>/<username>

transaction( ) Use our transactions feature when working with complex data that could be corrupted by concurrent updates

Page 30: Backbone Conf 2014 - Realtime & Firebase

Retrieving Data

on/once value / child_added / child_changed / child_removed / child_moved

Querying Data

Order — orderByChild(), orderByKey(), or orderByPriority() Complex — limitToFirst(), limitToLast(), startAt(), endAt(), and equalTo()

Page 31: Backbone Conf 2014 - Realtime & Firebase
Page 32: Backbone Conf 2014 - Realtime & Firebase

Advanced

- Connection Status — ref.child(‘.info/connected’) - Reliable onDisconnect — ref.onDisconnect().remove() / set / update

Page 33: Backbone Conf 2014 - Realtime & Firebase

— Cheat Sheet

Security, huh?

Page 34: Backbone Conf 2014 - Realtime & Firebase

- collection view — e.g. Marionette ≠ sort… - pagination — startAt/endAt + limit - loading by reference (argh…), but… - … denormalization! - offline — beware of ref.once(‘value’, …) - triggers — interact with services (Zapier)

Challenges

Page 35: Backbone Conf 2014 - Realtime & Firebase

Denormalization— Avoid Building Nests!

Page 36: Backbone Conf 2014 - Realtime & Firebase
Page 37: Backbone Conf 2014 - Realtime & Firebase

“Denormalizing your data is normal”, Firebase Blog- Firepad — OT Collaborative Text Editor - GeoFire — Geographical Data - Firechat - Office Space Organiser

Page 38: Backbone Conf 2014 - Realtime & Firebase

THANKS@CWEHRUNG