LEVERAGING HOOD.IE 
TO BUILD FOR THE OFFLINE STATE
BEING OFFLINE SUCKS 
No Wi-Fi No service 
Poor connectivity Unavailable
CONSEQUENCES 
Data loss Inaccessibility 
Long loading times Sluggish behavior
PAIN POINTS 
WHY MOST WEB APPS DON’T WORK OFFLINE
PAIN POINTS 
Every action depends on a connection 
Apps save all user-specific data online 
No fallback solution when conn...
PAIN POINTS 
Every action depends on a connection 
We need offline first solutions 
Apps save all user-specific data onlin...
„We can’t keep building apps with 
the desktop mindset of permanent, 
fast connectivity, where a temporary 
disconnection ...
We used HTML5 features to make the 
site available offline. Users can look 
up full information about conferences 
they're...
HOOD.IE ARCHITECTURE 
HOW IT BRIDGES THE „OFFLINE PROBLEM“
FRONTEND BACKEND 
App 
hoodie API 
localStorage 
couchDB
Angular.JS 
Backbone.JS 
Ember.JS 
Knockout.JS 
TheNextBigThing.JS 
hoodie API
SOME HOOD.IE BASICS 
QUICK START GUIDE FOR CODING COWBOYS
5-STEP—INSTALL 
$ 
$ 
$ 
$ 
$ 
brew install couchdb 
npm install -g hoodie-cli 
hoodie new cowboyapp 
cd cowboyapp 
hoodie...
INITIALIZATION 
<script src="hoodie.js"></script> 
hoodie = new Hoodie();
USER MANAGEMENT 
BACKEND-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'); 
SIGN IN AS THIS USER 
hoodie.account.signIn('ch...
App 
hoodie.accounts API 
couchDB 
signs up a new cowboy
PROMISES 
hoodie.account.signUp('chuck@norris.com', 'secret') 
.done(function(cowboy) { 
… 
} 
.fail(function(cowboy) { 
…...
HOOD.IE STORAGE 
PLAIN AND ROBUST OFFLINE DATA
ADD A NEW OBJECT 
var type = 'goldnugget'; 
var attributes = { category: 'raw', 
value: '$1200' }; 
hoodie.store.add(type,...
App 
digs a gold nugget 
hoodie store API 
Hoodie’s API decouples client/server. 
It can get interrupted or stop at any 
s...
FINDING ALL OBJECTS 
var type = 'goldnugget'; 
hoodie.store.findAll(type) 
.done(function (goldnuggets) { … }); 
OTHER FUN...
HOOD.IE EVENTS 
GET NOTIFIED WHEN STUFF GETS FIRED
Account events 
Store events 
EVENT TYPES 
signup signin 
signout authenticated unauthenticated 
add update 
remove change...
IMPLEMENTING EVENTS 
hoodie.account.on('signin', function (user) {…}); 
USER HAS SIGNED IN, 
ALSO FIRES THE „AUTHENTICATED...
App 
cowboy firing bullets 
hoodie.store 
couchDB 
localStorage
SYNCHRONIZATION 
BLAZING FAST REAL-TIME UPDATES
Cowboy 
couchDB 
hoodie.remote API 
localStorage 
Angry dude
COUCHDB CHANGES FEED 
{ 
seq: 12, 
id: "foo", 
"changes": [ 
{"rev": „1-2320…“} 
], 
hoodie.remote seq: 12, 
} 
id: "bar",...
IMPLEMENTATION 
hoodie.remote.on('add:peng', function (peng) {…}); 
GETS CALLED WHEN AN EVENT IS TRIGGERED REMOTELY 
hoodi...
Events Synchronization 
Accounts Storage 
Pain points Architecture Basics
Every action depends on a connection 
Apps save all user-specific data online 
No fallback solution when connection fails
Actions can be performed without being connected 
Every action depends on a connection 
Apps save all user-specific data o...
CHECK OUT THE ALL 
NEW HOOD.IE WEBSITE
@marcelkalveram 
web developer at
THANK YOU FOR LISTENING 
PLEASE ASK YOUR QUESTIONS NOW
Nächste SlideShare
Wird geladen in …5
×

Leveraging hood.ie to build for the offline state

1.550 Aufrufe

Veröffentlicht am

A talk I gave at Codemotion Madrid on November 21 of 2014 about the JavaScript application framework hood.ie

I give a brief introduction to the pain points of "online-only" applications, how to use hoodie and then talk a bit about the architecture of the framework.

After that I go into detail about its main features, user management, data storage, events and synchronization.

For those of you who are interested in developing offline-first, you should check out the hoodie website at http://hood.ie.

Veröffentlicht in: Technologie

Leveraging hood.ie to build for the offline state

  1. 1. LEVERAGING HOOD.IE TO BUILD FOR THE OFFLINE STATE
  2. 2. BEING OFFLINE SUCKS No Wi-Fi No service Poor connectivity Unavailable
  3. 3. CONSEQUENCES Data loss Inaccessibility Long loading times Sluggish behavior
  4. 4. PAIN POINTS WHY MOST WEB APPS DON’T WORK OFFLINE
  5. 5. PAIN POINTS Every action depends on a connection Apps save all user-specific data online No fallback solution when connection fails
  6. 6. PAIN POINTS Every action depends on a connection We need offline first solutions Apps save all user-specific data online No fallback solution when connection fails
  7. 7. „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.“ — Jan Lehnardt, hood.ie team
  8. 8. 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. — Jake Archibald, Lanyrd’s lead engineer
  9. 9. HOOD.IE ARCHITECTURE HOW IT BRIDGES THE „OFFLINE PROBLEM“
  10. 10. FRONTEND BACKEND App hoodie API localStorage couchDB
  11. 11. Angular.JS Backbone.JS Ember.JS Knockout.JS TheNextBigThing.JS hoodie API
  12. 12. SOME HOOD.IE BASICS QUICK START GUIDE FOR CODING COWBOYS
  13. 13. 5-STEP—INSTALL $ $ $ $ $ brew install couchdb npm install -g hoodie-cli hoodie new cowboyapp cd cowboyapp hoodie start
  14. 14. INITIALIZATION <script src="hoodie.js"></script> hoodie = new Hoodie();
  15. 15. USER MANAGEMENT BACKEND-LESS AND RELENTLESSLY SIMPLE
  16. 16. I really want to implement user signup, sign in, sign out and the password forgotten function from scratch… ?
  17. 17. SIGN UP AS NEW USER hoodie.account.signUp('chuck@norris.com', 'secret'); SIGN IN AS THIS USER hoodie.account.signIn('chuck@norris.com', 'secret');
  18. 18. App hoodie.accounts API couchDB signs up a new cowboy
  19. 19. PROMISES hoodie.account.signUp('chuck@norris.com', 'secret') .done(function(cowboy) { … } .fail(function(cowboy) { … });
  20. 20. HOOD.IE STORAGE PLAIN AND ROBUST OFFLINE DATA
  21. 21. ADD A NEW OBJECT var type = 'goldnugget'; var attributes = { category: 'raw', value: '$1200' }; hoodie.store.add(type, attributes) .done(function (goldnugget) { … }); ALL DATA IS PRIVATE BY DEFAULT, NOT PUBLIC!
  22. 22. App digs a gold nugget hoodie store API Hoodie’s API decouples client/server. It can get interrupted or stop at any stage without breaking. couchDB localStorage NoSQL storage
  23. 23. 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)
  24. 24. HOOD.IE EVENTS GET NOTIFIED WHEN STUFF GETS FIRED
  25. 25. Account events Store events EVENT TYPES signup signin signout authenticated unauthenticated add update remove change add:bullet
  26. 26. 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
  27. 27. App cowboy firing bullets hoodie.store couchDB localStorage
  28. 28. SYNCHRONIZATION BLAZING FAST REAL-TIME UPDATES
  29. 29. Cowboy couchDB hoodie.remote API localStorage Angry dude
  30. 30. COUCHDB CHANGES FEED { seq: 12, id: "foo", "changes": [ {"rev": „1-2320…“} ], hoodie.remote seq: 12, } id: "bar", "changes": [ {"rev": „1-2320…“} ],
  31. 31. 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…
  32. 32. Events Synchronization Accounts Storage Pain points Architecture Basics
  33. 33. Every action depends on a connection Apps save all user-specific data online No fallback solution when connection fails
  34. 34. Actions can be performed without being connected Every action depends on a connection Apps save all user-specific data offline Apps save all user-specific data online Falls back to localStorage when connection fails No fallback solution when connection fails
  35. 35. CHECK OUT THE ALL NEW HOOD.IE WEBSITE
  36. 36. @marcelkalveram web developer at
  37. 37. THANK YOU FOR LISTENING PLEASE ASK YOUR QUESTIONS NOW

×