React Native Thinking Offline

Muhammad Hanzala

Software Developer @ Mujadidia Inc.
CS Student @ UBIT, Karachi University
@MuhammadHanzala
@muhammad-hanzala

React Native Thinking Offline

As Web Developer:   Offline Strategy

But what about Mobile Apps

Offline Strategies:

  • If online, then... else...
  • Read-Only Cache
  • Database Synchronization

If online, then... else...

The simplest imaginable way is simply to check if you’re online, and branch out your program logic accordingly.

But..

In real-world mobile network conditions it’s impossible to really detect when you are online.

Read-Only Cache

Save data on first request, serve on failure.

But..

It can't mutate, and hard to manage network-resilient updating of your state.

Database Synchronization

Using third-party end-to-end synchronization solution like Realm Platform

But..

It requires you to design your back end around a special-case database product

Client-Side Database

One popular option is to use a persistence database like Realm

But..

The issue is to manually synchronize our Redux store with our Realm DB, because Realm is a schema backed DB and Redux is unstructured JSON.

What's the Ideal Strategy...?

Ideal Strategy:

  • can handle Read-Write data
  • Pessimistic and Optimistic Updates
  • can survive schema migrations on app updates

Q: How can we achieve that...?

Answer:

Redux

So the idea is..

  • Your redux store will be your database
  • offline-supported actions will be dispatched with an offline meta field

Don't be worry for implementing this architecture manually, we already have existing middlewares which follows these.

The best available option is...

Redux Offline

Redux Offline provides you the ability to implement network-resilient API calls, retries, optimistic UI updates, migrations and more.

Live Example

Thank you for your attention

Links:

Example Code: https://github.com/MuhammadHanzala/react-native-offline-example

Slides: https://slides.com/muhammadhanzala/react-native-thinking-offline

@muhammad-hanzala

@MuhammadHanzala

Made with Slides.com