The React Approach for Building Apps

Transcript

1. The React Approach for Building Apps Or how it breaks tradition
2. It’s all about perspective ...
3. It’s all about perspective - BackboneJS is a lightweight MV* library - AngularJS focus on extending HTML - EmberJS is more imperative - ReactJS sets a functional design pattern - VueJS prefers the “visual” separation of concerns
4. Tradition HTML JavaScript CSS DOM Network Cache
5. Tradition HTML JavaScript CSS DOM Network Cache UI DATA
6. Sometimes tradition is hard to deal with
7. Sometimes tradition is hard to deal with JavaScript UI
8. Sometimes tradition is hard to deal JavaScript onfocus UI
9. Sometimes tradition is hard to deal JavaScript onclick onfocus UI
10. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange UI
11. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange ... UI
12. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange ... UI updateA()
13. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange ... UI updateB() updateA()
14. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange ... UI updateC() updateB() updateA()
15. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange ... UI ... updateC() updateB() updateA()
16. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange ... UI ... updateC() updateB() updateA() DATA
17. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange ... UI ... updateC() updateB() updateA() DATA onprogress
18. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange ... UI ... updateC() updateB() updateA() DATA onprogress onload
19. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange ... UI ... updateC() updateB() updateA() DATA onprogress onload onerror
20. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange ... UI ... updateC() updateB() updateA() DATA onprogress onload onerror ...
21. Sometimes tradition is hard to deal JavaScript onclick onfocus onchange ... UI ... updateC() updateB() updateA() DATA onprogress onload onerror ... MUCH STATE!
22. Sometimes tradition is hard to deal - Key-Value Observation (Backbone, Ember) - Dirty Checking (Angular)
23. The problem - Deal with the DOM stateful nature - Seamlessly react to actions/events - Eventually apply updates to the real DOM (and maintain performance)
24. A different approach - Simple - Predictable - Reliable
25. Virtual DOM
26. Virtual DOM A N C B Virtual DOM ... DOM Successive renders Updates
27. Lower internals footprint “Simplicity is prerequisite for reliability” Edsger W. Dijkstra
28. It’s functional!
29. It is composable!
30. It’s a state machine!
31. Recap - Lots of different approaches out there - Some have more opinionated than others - DOM is stateful and JS is not reactive - React approach: a Virtual DOM - React was built for simplicity
32. Thank you! rsoares @botequilha References: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html https://facebook.github.io/react/docs/displaying-data.html https://www.youtube.com/watch?v=-DX3vJiqxm4