Post on 02-Jul-2015
description
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)
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
@marcelkalveramweb developer at
THANK YOU FOR LISTENINGPLEASE ASK YOUR QUESTIONS NOW