React With Offline First

Transcript

1. React Offline First @ri7nz
2. - R AdySurya A @ri7nz Background ‍♂ - Interested about Modern Web Technology & useReact. - Start the journey as Front end since 2018 - present.
3. - Introducing to Offline First ♻. What this talk is ‍♂ - Why React ⚛ ?. - Introducing to PouchDB.
4. Offline first is a way of building applications where having network connectivity is an enhancement, not a necessity. Introducing Offline First
5. - Reliable application but no reliable Network. Why offline first? - Look like Native Apps. - Faster User Experience, both offline or online (*optional).
6. How? Static Dynamic WEB Apps Resources Static Resources: • HTML • CSS • JS • Fonts • Image / Media Dynamic Resources: • Data
7. Data Web Application User, Browser, & Device Modern Web Architecture Client Side Rendering
9. If you need Synchronize the Database across devices CouchDB
10. - Database in your browser - Can synchronize database in server that implements CouchDB replication Protocol - Asynchronous Introducing PouchDB
11. Example Data in the Browser
12. Source : https://www.html5rocks.com/en/tutorials/offline/quota-research/ Quota WebStorage / IndexDB
13. Why React ⚛ - CRA for make SPA (Single Page Application). - Flexible. - Have many library.
14. Showcase https://canary.nadya.app/
15. Example Code
16. Example Code src/services/subscription.js src/fragments/Shell.js https://git.io/nadya
17. React-pouchDB https://www.npmjs.com/package/react-pouchdb
18. Conclusion - We can Focus just in Frontend (Client Side) - We can build for fast development - Make user ‍ Happy ❤
19. Happy Reacting! @ri7nz