leveraging hood.ie to build for the offline state
DESCRIPTION
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.TRANSCRIPT
![Page 1: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/1.jpg)
LEVERAGING HOOD.IETO BUILD FOR THE OFFLINE STATE
![Page 2: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/2.jpg)
BEING OFFLINE SUCKS
No serviceNo Wi-Fi
Poor connectivity Unavailable
![Page 3: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/3.jpg)
CONSEQUENCES
Data loss Inaccessibility
Long loading times Sluggish behavior
![Page 4: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/4.jpg)
PAIN POINTSWHY MOST WEB APPS DON’T WORK OFFLINE
![Page 5: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/5.jpg)
Apps save all user-specific data online
Every action depends on a connection
No fallback solution when connection fails
PAIN POINTS
![Page 6: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/6.jpg)
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
![Page 7: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/7.jpg)
— 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.“
![Page 8: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/8.jpg)
— 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.
![Page 9: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/9.jpg)
HOOD.IE ARCHITECTUREHOW IT BRIDGES THE „OFFLINE PROBLEM“
![Page 10: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/10.jpg)
BACKENDFRONTEND
hoodie API
App
localStorage
couchDB
![Page 11: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/11.jpg)
hoodie API
Angular.JS Backbone.JS
Ember.JS Knockout.JS
TheNextBigThing.JS
![Page 12: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/12.jpg)
SOME HOOD.IE BASICSQUICK START GUIDE FOR CODING COWBOYS
![Page 13: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/13.jpg)
5-STEP—INSTALL
$
$
$
$
$
npm install -g hoodie-cli
hoodie new cowboyapp
cd cowboyapp
hoodie start
brew install couchdb
![Page 14: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/14.jpg)
INITIALIZATION
<script src="hoodie.js"></script>
hoodie = new Hoodie();
![Page 15: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/15.jpg)
USER MANAGEMENTBACKEND-LESS AND RELENTLESSLY SIMPLE
![Page 16: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/16.jpg)
I really want to implement user signup, sign in, sign out and the
password forgotten function from scratch…
?
![Page 17: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/17.jpg)
SIGN UP AS NEW USER
hoodie.account.signUp('[email protected]', 'secret');
hoodie.account.signIn('[email protected]', 'secret');
SIGN IN AS THIS USER
![Page 18: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/18.jpg)
App
hoodie.accounts APIcouchDB
signs up a new cowboy
![Page 19: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/19.jpg)
PROMISES
hoodie.account.signUp('[email protected]', 'secret')
.done(function(cowboy) {
…
}
.fail(function(cowboy) {
…
});
![Page 20: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/20.jpg)
HOOD.IE STORAGEPLAIN AND ROBUST OFFLINE DATA
![Page 21: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/21.jpg)
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) { … });
![Page 22: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/22.jpg)
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.
![Page 23: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/23.jpg)
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)
![Page 25: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/25.jpg)
Account events
Store events
signup signin
signout authenticated unauthenticated
add update
remove change add:bullet
EVENT TYPES
![Page 26: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/26.jpg)
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
![Page 27: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/27.jpg)
hoodie.storecouchDB
localStorage
App
cowboy firing bullets
![Page 28: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/28.jpg)
SYNCHRONIZATIONBLAZING FAST REAL-TIME UPDATES
![Page 29: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/29.jpg)
Cowboy
couchDBhoodie.remote API
localStorage
Angry dude
![Page 30: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/30.jpg)
COUCHDB CHANGES FEED
{
}
hoodie.remote seq: 12, id: "bar", "changes": [
{"rev": „1-2320…“}],
seq: 12, id: "foo", "changes": [
{"rev": „1-2320…“}],
![Page 31: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/31.jpg)
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…
![Page 32: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/32.jpg)
ArchitecturePain points Basics
Accounts Storage
Events Synchronization
![Page 33: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/33.jpg)
Apps save all user-specific data online
Every action depends on a connection
No fallback solution when connection fails
![Page 34: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/34.jpg)
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
![Page 36: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/36.jpg)
@marcelkalveramweb developer at
![Page 37: Leveraging hood.ie to build for the offline state](https://reader037.vdocuments.site/reader037/viewer/2022102816/559446c51a28abfc728b465f/html5/thumbnails/37.jpg)
THANK YOU FOR LISTENINGPLEASE ASK YOUR QUESTIONS NOW