notes from the future: beyond flux
TRANSCRIPT
![Page 1: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/1.jpg)
NOTES FROM THE FUTURE
Beyond Flux
![Page 2: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/2.jpg)
ABOUT ME@jergason
jergason on github jsjabber etc etc
engineer at kuali co
![Page 3: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/3.jpg)
![Page 4: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/4.jpg)
![Page 5: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/5.jpg)
ABOUT YOU?
![Page 6: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/6.jpg)
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."
![Page 7: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/7.jpg)
Viewsactions
Dispatchercallback
Stores
events
controller-view event handlers
Flux
![Page 8: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/8.jpg)
Viewsactions
Dispatchercallback
Stores
events
controller-view event handlers
FluxOK
![Page 9: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/9.jpg)
DEMO TIME
![Page 10: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/10.jpg)
![Page 11: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/11.jpg)
![Page 12: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/12.jpg)
![Page 13: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/13.jpg)
Flux
![Page 14: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/14.jpg)
![Page 15: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/15.jpg)
WHAT ISTHE
FUTURE
![Page 16: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/16.jpg)
![Page 17: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/17.jpg)
Immutable Data
![Page 18: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/18.jpg)
DEMO TIME
![Page 19: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/19.jpg)
THIS IS STUPID
![Page 20: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/20.jpg)
"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."
![Page 21: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/21.jpg)
THIS IS SLOW
![Page 22: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/22.jpg)
LOL NOT SLOW
![Page 23: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/23.jpg)
DEMO TIME
![Page 24: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/24.jpg)
http://hypirion.com/musings/understanding-persistent-vector-pt-1
![Page 25: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/25.jpg)
ᕕ( ᐛ )ᕗ
Lets make an app!
![Page 26: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/26.jpg)
(•_•)
global app state
![Page 27: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/27.jpg)
ಠ_ಠ
pass global state to all children
![Page 28: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/28.jpg)
(つ☢益☢)つ︵┻━┻
top-level callback
![Page 29: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/29.jpg)
CURSORS
![Page 30: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/30.jpg)
DEMO TIME
![Page 31: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/31.jpg)
render function
cursorscursor callback
componentscursor updates
![Page 32: Notes From The Future: Beyond Flux](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a2bc401a28ab445f8b47f5/html5/thumbnails/32.jpg)
Resourceshttps://github.com/facebook/immutable-js https://github.com/omniscientjs/immstruct https://github.com/swannodette/om https://github.com/jergason/happytrack