The talk covers the following topics: 1. Introduction to event sourcing. 2. How event sourcing and Redux are similar. 3. How to implement offline mode for React Native application. 4. How everything from above was run in a production.

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

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

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

5. Classical database

6. REST API (CRUD)

7. What if your data is

8. Large append-only log

9. Just huge list of immutable facts

10. Everything else is a cache

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

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

13. 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

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

15. 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)

16. 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

17. Mobile

18. Web

19. 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

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

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

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

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

25. 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

27. Now we do have offline mode for free

28. Event creation (mobile)

30. Send events (mobile)

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

32. Events structure (mongoose schema)

33. Event handler initialization in app.js

34. EventHandler - main

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

36. Code structure

37. 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”

38. 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

39. 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