UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Upload
Sign in
Max Klymyshyn, profile picture
Uploaded byMax Klymyshyn
PDF, PPTX4,365 views

Robust web apps with React.js

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.

Software◦
Download as PDF, PPTX
1 / 38
2 / 38
3 / 38
4 / 38
5 / 38
6 / 38
7 / 38
8 / 38
9 / 38
10 / 38
11 / 38
12 / 38
13 / 38
14 / 38
15 / 38
16 / 38
17 / 38
18 / 38
19 / 38
20 / 38
Robust apps with React.js MAKSYM KLYMYSHYN @maxmaxmaxmax CTO GVMachines Inc.
TOC TOC ‣ Typical mistakes ‣ Data flow ‣ React.js basics ‣ Flux
Typical mistakes
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
It’s all about tightly coupled application components
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
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.
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
Cohesion Typical mistakes ‣ Reduce module complexity ‣ Increase system maintainability ‣ Increase module reusability
I believe, that if framework allow to make coupled things, they will be coupled.
Coupling correlates with cohesion and vice versa
Data flow
Data flow What’s the deal? ‣ Read and write from/to database ‣ Call external API ‣ React on external events ‣ Messages exchange/queues
Data flow It’s all about data flow
Data flow Most of modern applications consist from message queues of different types and forms.
React.js basics React.js basics
React.js basics A JavaScript library for building UI Wikipedia
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
What’s inside React.js Widgets definition
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
What’s inside React.js Widgets definition
What’s inside React.js Nested widgets & state spread
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
What’s inside React.js
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.
What’s inside React.js Virtual DOM
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
Flux FLUX Architecture
FLUX React.js is a JavaScript library for building UI Wikipedia
FLUX FLUX is application architecture for building User Interfaces Flux website
FLUX
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
FLUX Store and View Store and View
FLUX Events Dependency
Conclusion
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 !
Thanks! React.js @maxmaxmaxmax