LEVERAGING HOOD.IETO BUILD FOR THE OFFLINE STATE

BEING OFFLINE SUCKS

No serviceNo Wi-Fi

Poor connectivity Unavailable

CONSEQUENCES

Data loss Inaccessibility

Long loading times Sluggish behavior

PAIN POINTSWHY MOST WEB APPS DON’T WORK OFFLINE

Apps save all user-specific data online

Every action depends on a connection

No fallback solution when connection fails

PAIN POINTS

Apps save all user-specific data online

Every action depends on a connection

No fallback solution when connection fails

PAIN POINTS

We need offline first solutions

— Jan Lehnardt, hood.ie team

„We can’t keep building apps with the desktop mindset of permanent, fast connectivity, where a temporary

disconnection or slow service is regarded as a problem and communicated as an error.“

— Jake Archibald, Lanyrd’s lead engineer

We used HTML5 features to make the site available offline. Users can look

up full information about conferences they're attending even if they have no

data connection.

HOOD.IE ARCHITECTUREHOW IT BRIDGES THE „OFFLINE PROBLEM“

BACKENDFRONTEND

hoodie API

App

localStorage

couchDB

hoodie API

Angular.JS Backbone.JS

Ember.JS Knockout.JS

TheNextBigThing.JS

SOME HOOD.IE BASICSQUICK START GUIDE FOR CODING COWBOYS

5-STEP—INSTALL

$

$

$

$

$

npm install -g hoodie-cli

hoodie new cowboyapp

cd cowboyapp

hoodie start

brew install couchdb

INITIALIZATION

<script src="hoodie.js"></script>

hoodie = new Hoodie();

USER MANAGEMENTBACKEND-LESS AND RELENTLESSLY SIMPLE

I really want to implement user signup, sign in, sign out and the

password forgotten function from scratch…

?

SIGN UP AS NEW USER

hoodie.account.signUp('chuck@norris.com', 'secret');

hoodie.account.signIn('chuck@norris.com', 'secret');

SIGN IN AS THIS USER

App

hoodie.accounts APIcouchDB

signs up a new cowboy

PROMISES

hoodie.account.signUp('chuck@norris.com', 'secret')

.done(function(cowboy) {

…

}

.fail(function(cowboy) {

…

});

HOOD.IE STORAGEPLAIN AND ROBUST OFFLINE DATA

ADD A NEW OBJECT

hoodie.store.add(type, attributes)

ALL DATA IS PRIVATE BY DEFAULT, NOT PUBLIC!

var type = 'goldnugget';

var attributes = { category: 'raw', value: '$1200' };

.done(function (goldnugget) { … });

App

hoodie store APIcouchDB

localStorageNoSQL storage

digs a gold nugget

Hoodie’s API decouples client/server. It can get interrupted or stop at any stage without breaking.

FINDING ALL OBJECTS

var type = 'goldnugget';

hoodie.store.findAll(type)

.done(function (goldnuggets) { … });

OTHER FUNCTIONS

update(type, id, update), find(type, id), remove(type, id), removeAll(type)

HOOD.IE EVENTSGET NOTIFIED WHEN STUFF GETS FIRED

Account events

Store events

signup signin

signout authenticated unauthenticated

add update

remove change add:bullet

EVENT TYPES

IMPLEMENTING EVENTS

hoodie.account.on('signin', function (user) {…});

USER HAS SIGNED IN, ALSO FIRES THE „AUTHENTICATED“ EVENT

hoodie.store.on('add:bullet', function (bullet) {…});

WITH : WE CAN LISTEN TO CHANGES FOR A SPECIFIC OBJECT TYPE

hoodie.storecouchDB

localStorage

App

cowboy firing bullets

SYNCHRONIZATIONBLAZING FAST REAL-TIME UPDATES

Cowboy

couchDBhoodie.remote API

localStorage

Angry dude

COUCHDB CHANGES FEED

{

}

hoodie.remote seq: 12, id: "bar", "changes": [

{"rev": „1-2320…“}],

seq: 12, id: "foo", "changes": [

{"rev": „1-2320…“}],

IMPLEMENTATION

hoodie.remote.on('add:peng', function (peng) {…});

GETS CALLED WHEN AN EVENT IS TRIGGERED REMOTELY

hoodie.remote.on('change', function (whatever) {…});

GETS CALLED FOR ANY OF THE EVENTS: ADD, UPDATE, REMOVE…

ArchitecturePain points Basics

Accounts Storage

Events Synchronization

Apps save all user-specific data online

Every action depends on a connection

No fallback solution when connection fails

Apps save all user-specific data online

Every action depends on a connection

No fallback solution when connection fails

Actions can be performed without being connected

Apps save all user-specific data offline

Falls back to localStorage when connection fails

CHECK OUT THE ALL NEW HOOD.IE WEBSITE

@marcelkalveramweb developer at

THANK YOU FOR LISTENINGPLEASE ASK YOUR QUESTIONS NOW