Notes From The Future: Beyond Flux

Flux is a simple and powerful data model for React, but I'm not convinced it is the best answer for modeling data flows in a front-end application. Learn how ideas inspired by functional programming and Om like immutable data and cursors can help you make it easier to reason about your application.

Transcript

1. NOTES FROM THE FUTURE Beyond Flux
2. ABOUT ME @jergason jergason on github jsjabber etc etc engineer at kuali co
5. ABOUT YOU?
6. Flux "Flux eschews MVC in favor of a unidirectional data flow. When a user interacts with a React view, the view propagates an action through a central dispatcher, to stores that hold the application's data and business logic, which updates all of the views that are affected."
7. Views actions Dispatcher callback Stores events controller-view event handlers Flux
8. Views actions Dispatcher callback Stores events controller-view event handlers Flux OK
9. DEMO TIME
13. Flux
15. WHAT IS THE FUTURE
17. Immutable Data
18. DEMO TIME
19. THIS IS STUPID
20. "Much of what makes application development difficult is tracking mutation and maintaining state. Developing with immutable data encourages you to think differently about how data flows through your application. Subscribing to data events throughout your application, by using Object.observe, or any other mechanism, creates a huge overhead of book-keeping which can hurt performance and creates opportunities for areas of your application to get out of sync. Since immutable data never changes, subscribing to changes throughout the model is a dead-end and new data can only ever be passed from above."
21. THIS IS SLOW
22. LOL NOT SLOW
23. DEMO TIME
24. http://hypirion.com/musings/understanding-persistent-vector-pt-1
25. ᕕ( ᐛ )ᕗ Lets make an app!
26. (•_•) global app state
27. ಠ_ಠ pass global state to all children
28. (つ☢益☢)つ︵┻━┻ top-level callback
29. CURSORS
30. DEMO TIME
31. render function cursors cursor callback components cursor updates
32. Resources https://github.com/facebook/immutable-js https://github.com/omniscientjs/immstruct https://github.com/swannodette/om https://github.com/jergason/happytrack