1.
LEVERAGING HOOD.IE
TO BUILD FOR THE OFFLINE STATE

2.
BEING OFFLINE SUCKS
No Wi-Fi No service
Poor connectivity Unavailable

3.
CONSEQUENCES
Data loss Inaccessibility
Long loading times Sluggish behavior

4.
PAIN POINTS
WHY MOST WEB APPS DON’T WORK OFFLINE

5.
PAIN POINTS
Every action depends on a connection
Apps save all user-specific data online
No fallback solution when connection fails

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.
„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.
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.
HOOD.IE ARCHITECTURE
HOW IT BRIDGES THE „OFFLINE PROBLEM“

10.
FRONTEND BACKEND
App
hoodie API
localStorage
couchDB

11.
Angular.JS
Backbone.JS
Ember.JS
Knockout.JS
TheNextBigThing.JS
hoodie API

12.
SOME HOOD.IE BASICS
QUICK START GUIDE FOR CODING COWBOYS

13.
5-STEP—INSTALL
$
$
$
$
$
brew install couchdb
npm install -g hoodie-cli
hoodie new cowboyapp
cd cowboyapp
hoodie start

14.
INITIALIZATION
<script src="hoodie.js"></script>
hoodie = new Hoodie();

15.
USER MANAGEMENT
BACKEND-LESS AND RELENTLESSLY SIMPLE

16.
I really want to implement user
signup, sign in, sign out and the
password forgotten function
from scratch…
?

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.
App
hoodie.accounts API
couchDB
signs up a new cowboy

19.
PROMISES
hoodie.account.signUp('chuck@norris.com', 'secret')
.done(function(cowboy) {
…
}
.fail(function(cowboy) {
…
});

20.
HOOD.IE STORAGE
PLAIN AND ROBUST OFFLINE DATA

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.
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.
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.
HOOD.IE EVENTS
GET NOTIFIED WHEN STUFF GETS FIRED

25.
Account events
Store events
EVENT TYPES
signup signin
signout authenticated unauthenticated
add update
remove change add:bullet

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.
App
cowboy firing bullets
hoodie.store
couchDB
localStorage

28.
SYNCHRONIZATION
BLAZING FAST REAL-TIME UPDATES

29.
Cowboy
couchDB
hoodie.remote API
localStorage
Angry dude

30.
COUCHDB CHANGES FEED
{
seq: 12,
id: "foo",
"changes": [
{"rev": „1-2320…“}
],
hoodie.remote seq: 12,
}
id: "bar",
"changes": [
{"rev": „1-2320…“}
],

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.
Events Synchronization
Accounts Storage
Pain points Architecture Basics

33.
Every action depends on a connection
Apps save all user-specific data online
No fallback solution when connection fails

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.
CHECK OUT THE ALL
NEW HOOD.IE WEBSITE

36.
@marcelkalveram
web developer at

37.
THANK YOU FOR LISTENING
PLEASE ASK YOUR QUESTIONS NOW