Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Offline First apps with Hoodie

Avatar for Gregor Martynus 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
Avatar for Gregor Martynus

Gregor Martynus

March 30, 2017
Tweet

More Decks by Gregor Martynus

See All by Gregor Martynus
Octokit – Your official GitHub Platform Toolkit
Avatar for Gregor Martynus gr2m
2
440
Dedicating Space
Avatar for Gregor Martynus gr2m
0
350
Welcoming communities
Avatar for Gregor Martynus gr2m
2
440
Offline First – The Good Parts
Avatar for Gregor Martynus gr2m
0
410
Creating Inviting Communities
Avatar for Gregor Martynus gr2m
1
590
Building Offline First applications with Backbone
Avatar for Gregor Martynus gr2m
1
540
noBackend?
Avatar for Gregor Martynus gr2m
0
480
Offline First – Made Simple!
Avatar for Gregor Martynus gr2m
10
3k
WTF IS HOODIE?
Avatar for Gregor Martynus gr2m
4
1.5k

Other Decks in Technology

See All in Technology
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
Avatar for Ryo Suzuki ryo_suzuki
1
160
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
Avatar for karacoro / からころ tsukuha
1
380
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for jackal5647 aaguide
0
500
三視点LLMによる複数観点レビュー
Avatar for リリカル mhlyc
0
220
伴走から自律へ： 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
3
460
Deep Security Conference 2025：生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
Avatar for Masayoshi Mizutani mizutani
4
2.8k
SREのためのeBPF活用ステップアップガイド
Avatar for Sohei Iwahori egmc
2
1.3k
AIでテストプロセス自動化に挑戦する
Avatar for K_SAK sakatakazunori
1
520
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
Avatar for tomoki10 tomoki10
1
670
本当にわかりやすいAIエージェント入門
Avatar for segavvy segavvy
1
260
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
Avatar for hanayo04 hanayo04
1
400
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
Avatar for watany watany
18
7.6k

Featured

See All Featured
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
Scaling GitHub
Avatar for Zach Holman holman
460
140k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
520
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k

Transcript

  1. OFFLINE FIRST APPS WITH HOODIE @gr2m | js.la March’17

  2. HI, I’M GREGOR! @GR2M ! HOOD.IE ! OFFLINEFIRST.ORG ! NEIGHBOURHOOD.IE

    @gr2m | js.la March’17

  3. DEMO ! @gr2m | js.la March’17

  4. RECAP ! @gr2m | js.la March’17

  5. $ 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

  6. 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

  7. 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

  8. HOW DOES IT WORK? @gr2m | js.la March’17

  9. @gr2m | js.la March’17

  10. @gr2m | js.la March’17

  11. @gr2m | js.la March’17

  12. @gr2m | js.la March’17

  13. @gr2m | js.la March’17

  14. @gr2m | js.la March’17

  15. @gr2m | js.la March’17

  16. @gr2m | js.la March’17

  17. @gr2m | js.la March’17

  18. 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

  19. ! HOOD.IE ! GITHUB.COM/HOODIEHQ ! TWITTER.COM/HOODIEHQ @gr2m | js.la March’17

  20. OFFLINE FIRST APPS WITH HOODIE @gr2m | js.la March’17

  21. OFFLINE FIRST APPS WITH HOODIE @gr2m | js.la March’17

  22. OFFLINE FIRST IS AN APPROACH TO BUILD APPS THAT ALWAYS

    WORK, WITHOUT ANY LOADING BARS, UNDER ANY NETWORK CONDITIONS. @gr2m | js.la March’17

  23. WHAT MOBILE FIRST WAS TO UI OFFLINE FIRST IS TO

    CONNECTIVITY @gr2m | js.la March’17

  24. OFFLINE FIRST IS RELIABLE PERFORMANCE @gr2m | js.la March’17

  25. OFFLINE FIRST TECHNOLOGY @gr2m | js.la March’17

  26. 1. ASSETS 2. DATA @gr2m | js.la March’17

  27. 1. ASSETS ▸ Install from App Store ▸ Service Worker

    ▸ AppCache (Deprecated) ▸ ! Think of app updates @gr2m | js.la March’17

  28. 2. DATA ▸ Store data offline ▸ Sync ▸ !

    Watch out for conflicts / data loss @gr2m | js.la March’17

  29. ! REMEMBER ! FRIENDS DON’T LET FRIENDS BUILT THEIR OWN

    SYNC ENGINE @gr2m | js.la March’17

  30. OFFLINE FIRST DESIGN @gr2m | js.la March’17

  31. OFFLINE FIRST RULE #1 OFFLINE != ERROR @gr2m | js.la

    March’17

  32. OFFLINE FIRST JOY #1 CONVERSION ! @gr2m | js.la March’17

  33. OFFLINE FIRST JOY #2 SAVE? ALL. THE. TIME. @gr2m |

    js.la March’17

  34. OFFLINE FIRST JOY #3 SERVER DOWN? MAINTENANCE? ¯\_(ϑ)_/¯ @gr2m |

    js.la March’17

  35. OFFLINE FIRST JOY #4 LATENCY? ZERO. @gr2m | js.la March’17

  36. OFFLINE FIRST JOY #5 SECURITY ! ▸ Intranet apps to

    go ▸ local encryption @gr2m | js.la March’17

  37. OFFLINE FIRST VIABILITY @gr2m | js.la March’17

  38. UBIQUITOUS CONNECTIVITY IS A MYTH™ @gr2m | js.la March’17

  39. 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

  40. OFFLINE FIRST TRIVIA ALMOST 60% OF MOBILE IS 2G3 3

    http://www.gsma.com/mobileeconomy/ @gr2m | js.la March’17

  41. 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

  42. OFFLINE FIRST TRIVIA DO YOU KNOW WHY THE OFFLINE DINOSAUR

    IS SO CUTE? @gr2m | js.la March’17

  43. Because you see it so much. @gr2m | js.la March’17

  44. ! Questions? @gr2m | js.la March’17

  45. 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