Robust web apps with React.js
17 likes4,358 views
This document discusses building robust apps with React.js by avoiding tightly coupled components and focusing on proper data flow. It introduces React.js basics like components, JSX, virtual DOM and one-way data flow. It also covers Flux architecture with unidirectional data flow through stores, dispatcher and actions. The conclusion emphasizes that React.js is about understanding data flow in the app to reduce mistakes and increase immutability.
Robust web apps with React.js
- 1. Robust apps with React.js MAKSYM KLYMYSHYN @maxmaxmaxmax CTO GVMachines Inc.
- 2. TOC TOC ‣ Typical mistakes ‣ Data flow ‣ React.js basics ‣ Flux
- 4. Typical mistakes It’s not about stack ‣ Most of application have sporadic data flow and tightly coupled components ‣ It’s quite hard to avoid it and meet deadlines simultaneously ‣ Only when you have really well formed team and strong architect ‣ So it’s not about Backbone, Angular or any other frameworks
- 5. It’s all about tightly coupled application components
- 6. Typical mistakes Coupled code ‣ Easy to write – you do not need to think a lot about design ‣ Good for quick bootstrap because you care only about domain ‣ Not require any deep knowledge about programming science and apps design
- 7. Typical mistakes Coupling disadvantages ‣ A change in one module usually forces a ripple effect of changes in other modules. ‣ Assembly of modules might require more effort and/or time due to the increased inter-module dependency. ‣ A particular module might be harder to reuse and/ or test because dependent modules must be included.
- 8. But… Typical mistakes ‣ some frameworks designed to provide more ways to communicate between components ‣ So it’s easier to make coupled things ‣ And increase coupling between components ‣ Which increase probability to introduce new bugs during change one of them
- 9. Cohesion Typical mistakes ‣ Reduce module complexity ‣ Increase system maintainability ‣ Increase module reusability
- 10. I believe, that if framework allow to make coupled things, they will be coupled.
- 11. Coupling correlates with cohesion and vice versa
- 12. Data flow
- 13. Data flow What’s the deal? ‣ Read and write from/to database ‣ Call external API ‣ React on external events ‣ Messages exchange/queues
- 14. Data flow It’s all about data flow
- 16. Data flow Most of modern applications consist from message queues of different types and forms.
- 17. React.js basics React.js basics
- 18. React.js basics A JavaScript library for building UI Wikipedia
- 19. What’s inside React.js Components ‣ Object-oriented widgets definition ‣ Nested widgets support ‣ HTML-Like Widget DOM definition (VirtualDOM) ‣ State spreading to nested components - one way reactive data flow ‣ Optimised rendering to the real DOM tree ‣ Two-way data binding helpers
- 20. What’s inside React.js Widgets definition
- 21. JSX What’s inside React.js ‣ To simplify Virtual DOM definition added html-subset language called JSX ‣ JSX allow to define Widget DOM piece directly within your JavaScript file ‣ JSX convert for production into raw JavaScript with preprocessor
- 22. What’s inside React.js Widgets definition
- 23. What’s inside React.js Nested widgets & state spread
- 24. What’s inside React.js Virtual DOM ‣ Modification within real DOM tree is very slow ‣ To speed up things created Virtual DOM which consist from lightweight JavaScript objects which represent Widgets DOM tree ‣ When state changed Virtual and real DOM trees are compared and real DOM modified only where it’s required
- 26. What’s inside React.js ‣ Complexity to compare two trees is O(n^3) complexity ‣ React.js managed to turn O(n^3) problem into linear O(n) ‣ So it’s really fast.
- 27. What’s inside React.js Virtual DOM
- 28. React.js basics Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes. React.js website
- 30. FLUX React.js is a JavaScript library for building UI Wikipedia
- 31. FLUX FLUX is application architecture for building User Interfaces Flux website
- 32. FLUX
- 33. FLUX FLUX ‣ Data flows in a single direction (cycle) ‣ Dispatcher - hub to manage all data flow ‣ Stores - contain application state and logic ‣ Views - representation of state within Stores, listen to events from depend stores ‣ Actions - dispatcher helper methods
- 34. FLUX Store and View Store and View
- 36. Conclusion
- 37. Conclusion ‣ React.js is not about right thing, React.js is all about data flow ‣ You’ll start from pattern which accurately provide abilities to deeply understand flow within your app ‣ It’s easier to not make mistakes within your app architecture ‣ Immutability helpers help you develop !