This document discusses building offline-first applications in React Native. It outlines several approaches for developing offline functionality including feature restriction, caching, request queuing, authentication, and conflict resolution. It also emphasizes the importance of adopting an offline-first developer mindset. Common libraries are presented for caching, request queuing, and offline data handling with REST and GraphQL backends. Firebase is recommended for a quick MVP approach due to its built-in request queuing, caching, and data reconciliation features.

1. Offline-first in React Native
Lose Your Web Dev Reflexes and Build Great Offline Apps

2. Hello!
I’m Josh Warwick
Architect Developer @
Theodo (UK)
@jaw9c
2

3. 3
React Native London Meetup
@RNLmeetup
React Native London
📍 Pusher, Old street

4. 10+ appsReleased to production
30+Developers upskilled
2-3 yearsWorking with React Native
4

5. 5

6. Types of “Offline”
6
Increasingly Online

7. Types of “Offline”
7
Increasingly Online
? ?Where does your app fit?

8. What makes a great “offline” app?
Self -
contained
Informative Seamless

9. Bespoke
Backends
Backend-as-a-service
9
REST

10. Approaches
Feature Restriction
Which subset of our features can
we block when our user is offline?
Caching
What data can we persisting such
that the app remains functional?
Request Queuing
Can we keep all the updates stored
in a queue and apply them all?
Authentication
Logging in requires a request so
what alternatives are there?
Conflict Resolution
What happens when a user
updates something that is shared?
Developer Mindset
How can we coach developers to
be offline-first thinkers
10

11. Feature Restriction
11

12. Deliveroo
12

13. Google Chrome
13

14. Feature Restriction
👍 Easy to implement
When offline mode is
seen as edge case it’s
the pragmatic
approach
👎 UX edge cases
Moves the complexity
to the UX of the app.
14
@react-native-community/netinfo

15. Caching
15

16. Twitter
16

17. Spotify
17

18. Caching
👍 Common Libs
Libraries provide a
simple ootb solution
👎 Can’t cache it all
You don’t want to
cache your prod DB on
your users phones
👮 Data protection
Not all data can be
stored on device
unencrypted
18

19. Caching | Libraries
Redux / REST API GraphQL Images
19
⚙ async-storage
⚙
redux-persist
⚙ apollo-cache-persist
⚙ react-relay-offline
⚡ iOS basic built in
⚙ react-native-cached-image
+
+
⚙ async-storage

20. redux-persist
20

21. apollo-cache-persist
21

22. Request Queuing
22

23. LinkedIn
23

24. Twitter
24

25. Request Queuing
👍 Usability
Opposite of feature
restriction - everything
is possible
😬 Complexity
Automatic retries?
Optimistic update?
How do we tell the
user?
💪 Flexibility
Don’t have to
implement everything!
25

26. Request Queuing | Libraries
REST API GraphQL
26
⚙ redux-offline
⚙ roll-your-own™
⚙ apollo-link-queue
⚙ apollo-link-serialize
⚙ react-relay-offline
Firebase/ Amplify
Included 🎉

27. redux-offline
27

28. apollo-link-queue
28

29. Approaches
Feature Restriction
Which subset of our features can
we block when our user is offline?
Caching
What data can we persisting such
that the app remains functional?
Request Queuing
Can we keep all the updates stored
in a queue and apply them all?
Authentication
Logging in requires a request so
what alternatives are there?
Conflict Resolution
What happens when a user
updates something that is shared?
Developer Mindset
How can we coach developers to
be offline-first thinkers
29

30. Authentication
30

31. Revolut
31

32. Yolt
32

33. Authentication
🚀 Great to keep
when back online
The local auth can
lockdown the app even
when online
😎 Biometrics
Using the “latest”
secure methods users
are used to now
⚙ No good library
Realistically going to
have to build out your
own solution
33

34. Authentication implementation
34
Setup/Edit Pin user flow
Pin entry screen
Pin re-entry screen
Save pin in secure storage
Login flow
Pin entry screen
Check pin against secure storage
Enter Error

35. Conflict Resolution
35

36. Conflict resolution
36
✍
A
✍
A
Request Queue

37. Conflict resolution
37
A
B
✅
???

38. Conflict resolution
✍ Complete control
Granular control over
how updates are
applied
📈 Complexity
Implementing this is a
fair amount of work, is it
worth it?
38

39. Developer Mindset
39

40. “
Rule 1: Treat internet connection
like a second class citizen
40

41. “
Rule 2: Have a clear fallback
strategy for critical user flows
41

42. “
Rule 3: Be pragmatic about the
user interaction
42

43. MVP: Firebase
- Request Queuing
- Caching
- Optimistic updates
- Auto reconciliation
Recommended approach
Custom: Amplify/ GQL
- Request Queuing
- Caching
- Optimistic updates
- Not all for free
- Extensibility
43

44. What makes a great “offline” app?
Self -
contained
Informative Seamless

45. Approaches
Feature Restriction
Which subset of our features can
we block when our user is offline?
Caching
What data can we persisting such
that the app remains functional?
Request Queuing
Can we keep all the updates stored
in a queue and apply them all?
Authentication
Logging in requires a request so
what alternatives are there?
Conflict Resolution
What happens when a user
updates something that is shared?
Developer Mindset
How can we coach developers to
be offline-first thinkers
45

46. Thanks!
Any questions?
You can find me at:
@jaw9c
📧 joshw@theodo.co.uk
46
Come work with us
Design credit: SlidesCarnival