backbone conf 2014 - realtime & firebase

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

— BackboneConf — 2014

WHY ?

the user world

The Daily Struggle

The Daily Struggle

TODAY— Fast & Real-Time —

when?

when?

Realtime web analytics

Digital Advertising E-Commerce

Publishing

Massively Multiplayer Online Games

Backend Services

Messaging

Collaboration

Realtime Monitoring

Chat

Existing Features New Features

Real-Time First

HostedSELF-Hosted

SELF-Hosted

Hosted

Hosted

General Messaging / PubSub

Data Sync + Persistence + Full Stack

Messaging

PubNub, Pusher

Firebase, Google Drive, Meteor

Focus on delivery to servers

— Challenges —

— Backbone Fire

simple

philosophy

model / collection

easy transition

black magic

asObject / asArray

community

2-way data binding 3-way data binding

— Backbone Fire

- 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

Get Started

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

— Cheat Sheet

Update in realtime

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

— Cheat Sheet

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

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 });

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);

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

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

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)

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

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()

Advanced

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

— Cheat Sheet

Security, huh?

- 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

Denormalization— Avoid Building Nests!

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

THANKS@CWEHRUNG