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
470
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
450
Dedicating Space
gr2m
0
350
Welcoming communities
gr2m
2
440
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
490
Offline First – Made Simple!
gr2m
10
3.1k
WTF IS HOODIE?
gr2m
4
1.5k
Other Decks in Technology
See All in Technology
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
160
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
340
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
4
290
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
130
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
180
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
120
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
2k
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
100
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
720
Mambaで物体検出 完全に理解した
shirarei24
2
210
AWS re:Inforce 2025 re:Cap Update Pickup & AWS Control Tower の運用における考慮ポイント
htan
1
210
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Code Reviewing Like a Champion
maltzj
524
40k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Automating Front-end Workflow
addyosmani
1370
200k
RailsConf 2023
tenderlove
30
1.2k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How GitHub (no longer) Works
holman
314
140k
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