Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

"Offline mode for a mobile application, redux on server and a little bit about event sourcing." talk at React Native Camp by Viktor Turskyi

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

"Offline mode for a mobile application, redux on server and a little bit about event sourcing." talk at React Native Camp by Viktor Turskyi

  1. 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. 2. About me ● CTO at WebbyLab ● Open Source developer (Perl, JavaScript) ● 13 years in Software development ● Successfully delivered more than 60 projects
  3. 3. Classical 3-tier architecture Stateless Source: https://www.mrc-productivity.com/blog/2011/01/mobile-applications-why-architecture-matters/
  4. 4. Classical database
  5. 5. REST API (CRUD)
  6. 6. What if your data is
  7. 7. Large append-only log
  8. 8. Just huge list of immutable facts
  9. 9. Everything else is a cache
  10. 10. Source: https://www.mrc-productivity.com/blog/2011/01/mobile-applications-why-architecture-matters/
  11. 11. Classical approach (mutate state) Initial DB state: BALANCE 100USD User spends 30 USD New DB state: BALANCE 70 USD
  12. 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. 13. Event sourcing Source:https://docs.microsoft.com/en-us/azure/architecture/patterns/event-sourcing
  14. 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. 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. 16. Mobile
  17. 17. Web
  18. 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. 19. Training (group) metrics ● Training adoption burndown chart ● Aggregated students activity ● Adoption level for group ● etc
  20. 20. Technologies Mobile: React Native + Redux Web: React + Redux Backend: NodeJs + Mongo + Redux?
  21. 21. Event sourcing Source: https://www.confluent.io/blog/event-sourcing-cqrs-stream-processing-apache-kafka-whats-connection/
  22. 22. Redux Source: https://itnext.io/integrating-semantic-ui-modal-with-redux-4df36abb755c?gi=5cd4056739b8
  23. 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. 24. Now we do have offline mode for free
  25. 25. Event creation (mobile)
  26. 26. Send events (mobile)
  27. 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. 28. Events structure (mongoose schema)
  29. 29. Event handler initialization in app.js
  30. 30. EventHandler - main
  31. 31. Never mutate events Instead store reference to last applied event in metrics Track processed events
  32. 32. Code structure
  33. 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. 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. 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

    Be the first to comment

    Login to see the comments

  • komaval

    Apr. 5, 2018

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.

Views

Total views

568

On Slideshare

0

From embeds

0

Number of embeds

31

Actions

Downloads

1

Shares

0

Comments

0

Likes

1

×