Simple Development Offline First Web/App

This talks presented on JSConf Asia 2019 at Singapore
I talked about why we should care on creating more resilience app and show how our solution to create faster application with offline-first in mind

(you could access google slides on this link http://bit.ly/jsconfasia-offlinefirst)

Transcript

2. Hallo! I’m Ans I work for an IoT Aquaculture startup for rural area You can find me at: @ans4175
3. Ponds Shrimp
4. Ponds Fish
5. Ponds Traditional Feeding
6. Ponds Overfeeding Causing Fish Death
8. “Extreme Programming” Code by the pond
9. Rapid Simple Development Offline First Web/App
10. What’s on the menu ▷ Offline First ▷ Existing Approach ▷ Own Solution ▷ Others Works
11. Offline First?
12. “ offlinefirst.org
13. So Why we should care? ….
14. Why? Rural Areas
15. Rural Area Marginalised Tech
16. Rural Area Network Coverage https://www.nperf.com/en/map/ID/-/5119.Telkomsel/signal/?ll=-6.286604647733838&lg=10 7.9693228378892&zoom=14
17. World Bank: Digital Dividends (2016)
18. “ WWW = World Wide Web, Not Wealthy Western Web @brucel
19. Why? People
20. People Population boom! “unconnected world”
21. People First internet interaction with smartphone
22. Why? Availability
23. Availability You don’t always have connectivity to sync data
25. How? Existing Approach
28. Progressive Web Apps Service Worker Native ‘look like’ Network Cache
29. B….but? Data Sync & Conflict Resolution
30. Network Checking Network Cache Data Sync
31. Document State Sync vs Command State Sync
32. Trello Sync (Document State) “Any code that depended on server logic before now has to implement it itself” “The basic idea behind our sync is to store changes made offline as a series of deltas that are later uploaded to the server” ▷ https://tech.trello.com/sync-architecture/ ▷ https://tech.trello.com/syncing-changes/ CLOUD LOCAL DATA CLIENT UI deltas
33. Redux Offline (Command State) https://github.com/redux-offline/redux-offline
34. How? Create own sync mechanism
35. Realm/Firestore Backend as a Service
36. Realm/Firestore
37. ▷ Distributed Database CouchDB + PouchDB
38. CouchDB + PouchDB ▷ Distributed Database ▷ HTTP Protocol for Replication
39. How? Sync Mechanism Ready
40. So What do we choose?
41. Technical Requirement ▷ Web development ready ▷ Mobile development ready ▷ Time to implement faster ◦ No need to write our own sync protocol
42. Tech
43. ▷ Can use CRA → Service worker ready React/RN Concerns
44. Tech Simple Development Offline First Web/App
45. ▷ Can use CRA → Service worker ready ▷ Reactive Rendering Pouch+Couch? React/RN Concerns
46. ▷ Can use CRA → Service worker ready ▷ Reactive Rendering Pouch+Couch? ◦ Integrate reactive rendering with Pouch(+Couch) React/RN Concerns
47. ▷ Can use CRA → Service worker ready ▷ Reactive Rendering Pouch+Couch? ◦ Integrate reactive rendering with Pouch(+Couch) ◦ State Container? React/RN Concerns
48. State Container
49. State Container
50. Remember this??? CLOUD LOCAL DATA CLIENT UI deltas
52. Tech State Container Interfacing w/ Data Sync
53. Pouchy Store https://github.com/eFishery/pouchy-store-example
54. Initialize Store
55. Component
56. Component
57. Render
58. Pouchy Store
59. Interface CRUD Method Ready
60. Improvement Fewer LoC
61. Improvement Reactive Rendering w/ Data Sync
62. ▷ Can use CRA → Service worker ready ▷ Reactive Rendering Pouch+Couch? ◦ State Container ▷ ReactNative Support? ◦ Pouch storage used IndexedDB/WebSQL, how RN? React/RN Concerns
63. WebSQL → SQLite Adapter Pouch Storage on RN?
64. SQLite Adapter
65. Tech Simple Development Offline First Web/App w/ Reactive Rendering
66. Syncing Data Online
67. Using While Offline
68. Syncing Data After Offline
69. Basic Features Need to implement selective filtering Lesson Learned Pouch Max Connection Browser limitation up to 6 simultaneous connections
70. Conclusion Do not create own sync mechanism
71. ▷ Shelf (https://sid.studio/shelf/) ◦ Using React Hooks ▷ https://github.com/amark/gun (GunDB) ▷ Local First Software (Martin Kleppmann) ◦ https://www.inkandswitch.com/local-first.html Others Works
72. Thanks! Offline First? Let’s grab a coffee But yeah you can ping me ONLINE at: @ans4175 ans4175@gmail.com This template is free to use under Creative Commons Attribution license. If you use the graphic assets (photos, icons and typographies) provided with this presentation you must keep the Credits slide.