Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building Offline First apps with Hoodie
Search
Gregor Martynus
March 30, 2017
Technology
0
480
Building Offline First apps with Hoodie
Presented at JS.LA March’17. Source code of the demo:
https://github.com/gr2m/sweet.la
Gregor Martynus
March 30, 2017
Tweet
Share
More Decks by Gregor Martynus
See All by Gregor Martynus
Octokit – Your official GitHub Platform Toolkit
gr2m
2
460
Dedicating Space
gr2m
0
360
Welcoming communities
gr2m
2
450
Offline First – The Good Parts
gr2m
0
410
Creating Inviting Communities
gr2m
1
590
Building Offline First applications with Backbone
gr2m
1
540
noBackend?
gr2m
0
500
Offline First – Made Simple!
gr2m
10
3.1k
WTF IS HOODIE?
gr2m
4
1.5k
Other Decks in Technology
See All in Technology
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.2k
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
360
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
AWSで推進するデータマネジメント
kawanago
1
1.2k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
310
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
180
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
1
370
Agile PBL at New Grads Trainings
kawaguti
PRO
1
380
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
630
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
290
Flutterでキャッチしないエラーはどこに行く
taiju59
0
220
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
190
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
KATA
mclloyd
32
14k
Code Review Best Practice
trishagee
70
19k
A Tale of Four Properties
chriscoyier
160
23k
Optimizing for Happiness
mojombo
379
70k
It's Worth the Effort
3n
187
28k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Unsuck your backbone
ammeep
671
58k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Transcript
OFFLINE FIRST APPS WITH HOODIE @gr2m | js.la March’17
HI, I’M GREGOR! @GR2M ! HOOD.IE ! OFFLINEFIRST.ORG ! NEIGHBOURHOOD.IE
@gr2m | js.la March’17
DEMO ! @gr2m | js.la March’17
RECAP ! @gr2m | js.la March’17
$ mdkir sweet.la $ cd sweet.la # creates package.json $
npm init -y # installs hoodie and sets "start" script $ npm install --save hoodie $ npm start @gr2m | js.la March’17
Load Hoodie Client <script scr="/hoodie/client.js"></script> Data hoodie.store.add({name: 'honey'}) hoodie.store.on('change', renderItems)
Account hoodie.account.signIn({username: 'foo', password: 'secret'}) @gr2m | js.la March’17
hoodie.account.signUp() hoodie.account.signIn() hoodie.account.signOut() hoodie.account.destroy() hoodie.account.on() hoodie.store.add() hoodie.store.find() hoodie.store.findOrAdd() hoodie.store.findAll() hoodie.store.update()
hoodie.store.updateOrAdd() hoodie.store.updateAll() hoodie.store.remove() hoodie.store.removeAll() hoodie.store.pull() hoodie.store.push() hoodie.store.sync() hoodie.store.connect() hoodie.store.disconnect() hoodie.store.on() hoodie.connectionStatus.startChecking() hoodie.connectionStatus.stopChecking() hoodie.connectionStatus.on() @gr2m | js.la March’17
HOW DOES IT WORK? @gr2m | js.la March’17
@gr2m | js.la March’17
@gr2m | js.la March’17
@gr2m | js.la March’17
@gr2m | js.la March’17
@gr2m | js.la March’17
@gr2m | js.la March’17
@gr2m | js.la March’17
@gr2m | js.la March’17
@gr2m | js.la March’17
HOODIE IS OPEN SOURCE ▸ built with JavaScript, hapi, CouchDB,
PouchDB ▸ extendable with app specific or npm plugins ▸ "most welcoming Open Source community" 1 1 many people say so :) @gr2m | js.la March’17
! HOOD.IE ! GITHUB.COM/HOODIEHQ ! TWITTER.COM/HOODIEHQ @gr2m | js.la March’17
OFFLINE FIRST APPS WITH HOODIE @gr2m | js.la March’17
OFFLINE FIRST APPS WITH HOODIE @gr2m | js.la March’17
OFFLINE FIRST IS AN APPROACH TO BUILD APPS THAT ALWAYS
WORK, WITHOUT ANY LOADING BARS, UNDER ANY NETWORK CONDITIONS. @gr2m | js.la March’17
WHAT MOBILE FIRST WAS TO UI OFFLINE FIRST IS TO
CONNECTIVITY @gr2m | js.la March’17
OFFLINE FIRST IS RELIABLE PERFORMANCE @gr2m | js.la March’17
OFFLINE FIRST TECHNOLOGY @gr2m | js.la March’17
1. ASSETS 2. DATA @gr2m | js.la March’17
1. ASSETS ▸ Install from App Store ▸ Service Worker
▸ AppCache (Deprecated) ▸ ! Think of app updates @gr2m | js.la March’17
2. DATA ▸ Store data offline ▸ Sync ▸ !
Watch out for conflicts / data loss @gr2m | js.la March’17
! REMEMBER ! FRIENDS DON’T LET FRIENDS BUILT THEIR OWN
SYNC ENGINE @gr2m | js.la March’17
OFFLINE FIRST DESIGN @gr2m | js.la March’17
OFFLINE FIRST RULE #1 OFFLINE != ERROR @gr2m | js.la
March’17
OFFLINE FIRST JOY #1 CONVERSION ! @gr2m | js.la March’17
OFFLINE FIRST JOY #2 SAVE? ALL. THE. TIME. @gr2m |
js.la March’17
OFFLINE FIRST JOY #3 SERVER DOWN? MAINTENANCE? ¯\_(ϑ)_/¯ @gr2m |
js.la March’17
OFFLINE FIRST JOY #4 LATENCY? ZERO. @gr2m | js.la March’17
OFFLINE FIRST JOY #5 SECURITY ! ▸ Intranet apps to
go ▸ local encryption @gr2m | js.la March’17
OFFLINE FIRST VIABILITY @gr2m | js.la March’17
UBIQUITOUS CONNECTIVITY IS A MYTH™ @gr2m | js.la March’17
OFFLINE FIRST TRIVIA LTE IN THE US SLOWED DOWN BY
50% IN 20162 2 twinprime.com/lte-has-slowed-by-50-in-the-us/ @gr2m | js.la March’17
OFFLINE FIRST TRIVIA ALMOST 60% OF MOBILE IS 2G3 3
http://www.gsma.com/mobileeconomy/ @gr2m | js.la March’17
OFFLINE FIRST TRIVIA 100 MILLION PEOPLE CAME ONLINE IN INDIA
IN 20164 4 http://www.internetlivestats.com/internet-users-by-country/ @gr2m | js.la March’17
OFFLINE FIRST TRIVIA DO YOU KNOW WHY THE OFFLINE DINOSAUR
IS SO CUTE? @gr2m | js.la March’17
Because you see it so much. @gr2m | js.la March’17
! Questions? @gr2m | js.la March’17
RESOURCES http://offlinefirst.org/ https://medium.com/offline-camp http://hood.ie/blog/say-hello-to-offline-first.html https://nolanlawson.com/2016/10/13/progressive-enhancement-isnt- dead-but-it-smells-funny/ https://pwa.rocks @gr2m | js.la
March’17