1.
Offline mode for a mobile application
Redux on server and a little bit about event sourcing
Viktor Turskyi
React Native CAMP Conference 2018

2.
About me
● CTO at WebbyLab
● Open Source developer
(Perl, JavaScript)
● 13 years in Software
development
● Successfully delivered more
than 60 projects

3.
Classical 3-tier architecture
Stateless
Source: https://www.mrc-productivity.com/blog/2011/01/mobile-applications-why-architecture-matters/

4.
Classical database

5.
REST API (CRUD)

6.
What if your data is

7.
Large append-only log

8.
Just huge list of immutable facts

9.
Everything else is a cache

10.
Source: https://www.mrc-productivity.com/blog/2011/01/mobile-applications-why-architecture-matters/

11.
Classical approach (mutate state)
Initial DB state:
BALANCE 100USD
User spends 30 USD
New DB state:
BALANCE 70 USD

12.
Event sourcing (append fact)
Initial DB state:
FUNDS_ADDED 25 USD
FUNDS_ADDED 61 USD
FUNDS_SPENT 10 USD
FUNDS_ADDED 24 USD
User spends 30 USD
New DB state:
FUNDS_ADDED 25 USD
FUNDS_ADDED 61 USD
FUND_SPENT 10 USD
FUNDS_ADDED 24 USD
FUNDS_SPENT 30 USD

13.
Event sourcing
Source:https://docs.microsoft.com/en-us/azure/architecture/patterns/event-sourcing

14.
Why to use event sourcing?
● Build specific materialized views for different business domains
● Capture intent of the data, track user behaviour (not only results)
● Audit trail
● Possibility to rollback to any previous state
● Minimize data conflicts
● High processing performance (gracefully degrade on load, no locks)
● Flexibility to change format of materialized view (replay events)

15.
Business task - create LMS for compliance
● Create training app (training == quiz): iOS, Android, Web
● Offline mode for mobile (read and write)
● Audit trail support
● Detailed analytics in mobile, web, nodejs
● Constantly evolving requirements to analytics

16.
Mobile

17.
Web

18.
Session (user) metrics
● Training adoption burndown chart
● Adoption level
● Predict time to finish
● Spent time in training
● Monthly activity charts
● Spent time on each question

19.
Training (group) metrics
● Training adoption burndown chart
● Aggregated students activity
● Adoption level for group
● etc

20.
Technologies
Mobile: React Native + Redux
Web: React + Redux
Backend: NodeJs + Mongo + Redux?

21.
Event sourcing
Source: https://www.confluent.io/blog/event-sourcing-cqrs-stream-processing-apache-kafka-whats-connection/

22.
Redux
Source: https://itnext.io/integrating-semantic-ui-modal-with-redux-4df36abb755c?gi=5cd4056739b8

23.
Merge Redux with event sourcing
● Client: create temporary queue
● Client: Add timestamp to every event
● Server: split event handlers into two parts:
○ Pure functions with business logic (reducer)
○ Side effects containing utils (db utils etc)
● Server: Use immutable structures for metrics.
● Client and Server share the same reducers

24.
Now we do have offline mode for free

25.
Event creation (mobile)

26.
Send events (mobile)

27.
What do we use for events persistence in RN?
RN AsyncStorage for redux store
react-native-fs for large blobs (images, audio etc)

28.
Events structure (mongoose schema)

29.
Event handler initialization in app.js

30.
EventHandler - main

31.
Never mutate events
Instead store reference to last applied event in metrics
Track processed events

32.
Code structure

33.
Main issues to solve
Mobile: Store larger number of events in offline mode
Backend: Store events in a more suitable place (Kafka)
Backend: Split the event queue into “realtime” and “delayed”

34.
Links
Event Sourcing pattern by Microsoft
https://docs.microsoft.com/en-us/azure/architecture/patterns/event-sourcing
Event Sourcing pattern by Martin Fowler
https://martinfowler.com/eaaDev/EventSourcing.html
"Turning the database inside out with Apache Samza" by Martin Kleppmann
https://www.youtube.com/watch?v=fU9hR3kiOK0

35.
Viktor Turskyi (koorchik)
viktor@webbylab.com
https://twitter.com/koorchik https://twitter.com/webbylab
https://github.com/koorchik https://github.com/webbylab
http://webbylab.com