Building Offline First apps with Hoodie

Presented at JS.LA March’17. Source code of the demo: https://github.com/gr2m/sweet.la

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