Slide 1

Slide 1 text

React Offline First @ri7nz

Slide 2

Slide 2 text

- R AdySurya A @ri7nz Background ‍♂ - Interested about Modern Web Technology & useReact. - Start the journey as Front end since 2018 - present.

Slide 3

Slide 3 text

- Introducing to Offline First ♻. What this talk is ‍♂ - Why React ⚛ ?. - Introducing to PouchDB.

Slide 4

Slide 4 text

Offline first is a way of building applications where having network connectivity is an enhancement, not a necessity. Introducing Offline First

Slide 5

Slide 5 text

- Reliable application but no reliable Network. Why offline first? - Look like Native Apps. - Faster User Experience, both offline or online (*optional).

Slide 6

Slide 6 text

How? Static Dynamic WEB Apps Resources Static Resources: ● HTML ● CSS ● JS ● Fonts ● Image / Media Dynamic Resources: ● Data

Slide 7

Slide 7 text

Data Web Application User, Browser, & Device Modern Web Architecture Client Side Rendering

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

If you need Synchronize the Database across devices CouchDB

Slide 10

Slide 10 text

- Database in your browser - Can synchronize database in server that implements CouchDB replication Protocol - Asynchronous Introducing PouchDB

Slide 11

Slide 11 text

Example Data in the Browser

Slide 12

Slide 12 text

Source : https://www.html5rocks.com/en/tutorials/offline/quota-research/ Quota WebStorage / IndexDB

Slide 13

Slide 13 text

Why React ⚛ - CRA for make SPA (Single Page Application). - Flexible. - Have many library.

Slide 14

Slide 14 text

Showcase https://canary.nadya.app/

Slide 15

Slide 15 text

Example Code

Slide 16

Slide 16 text

Example Code src/services/subscription.js src/fragments/Shell.js https://git.io/nadya

Slide 17

Slide 17 text

React-pouchDB https://www.npmjs.com/package/react-pouchdb

Slide 18

Slide 18 text

Conclusion - We can Focus just in Frontend (Client Side) - We can build for fast development - Make user ‍ Happy ❤

Slide 19

Slide 19 text

Happy Reacting! @ri7nz