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
290
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
260
Dedicating Space
gr2m
0
230
Welcoming communities
gr2m
2
340
Offline First – The Good Parts
gr2m
0
250
Creating Inviting Communities
gr2m
1
490
Building Offline First applications with Backbone
gr2m
1
430
noBackend?
gr2m
0
310
Offline First – Made Simple!
gr2m
10
2.8k
WTF IS HOODIE?
gr2m
4
1.4k
Other Decks in Technology
See All in Technology
グイグイ系QAエンジニアでやっていくよ!
____rina____
0
790
Prisma ORMを2年運用して培ったノウハウを共有する
tockn
19
5.1k
Google Cloud Next '24 Recap in ZOZO AIにより変わる開発 運用/Development and operation changed by AI
gachimuchiengineer
0
210
データ基盤を支える技術
chanyou0311
5
3k
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
390
RubyKaigi 2024 - Make Your Own Regex Engine!
makenowjust
1
180
【SORACOM UG 四国】今だからこそ学ぶ!IoTの全体像と最新事例、生成AIの基礎
soracom
PRO
2
190
知識と実践を紡ぐGenAI / Connecting Knowledge and experience with GenAI
aki_moon
2
190
大規模言語モデル (LLM)における低精度数値表現
pfn
PRO
3
860
ハードウェアを動かすTypeScriptの世界
9wick
3
1.2k
能動学習のいろは:書籍「Human-in-the-Loop機械学習」3〜5章
hiroyoshiito
0
310
20240509 CloudWatch でいろいろなものを監視してみよう
masaruogura
1
120
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
49
31k
The Language of Interfaces
destraynor
151
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Infographics Made Easy
chrislema
238
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Happy Clients
brianwarren
92
6.4k
RailsConf 2023
tenderlove
9
590
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