robust web apps with react.js

@maxmaxmaxmaxMAKSYM KLYMYSHYNCTO GVMachines Inc.

Robust apps with React.js

TOC

TOC

‣ Typical mistakes

‣ Data flow

‣ React.js basics

‣ Flux

Typical mistakes

It’s not about stackTypical mistakes

‣ 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

Coupled code

Typical mistakes

‣ 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

Coupling disadvantages

Typical mistakes

‣ 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

What’s the deal?

Data flow

‣ Read and write from/to database

‣ Call external API

‣ React on external events

‣ Messages exchange/queues

It’s all about data flow

Data flow

Most of modern applications consist from message queues of

different types and forms.

Data flow

React.js basics

React.js basics

A JavaScript library for building UI Wikipedia

React.js basics

ComponentsWhat’s inside React.js

‣ 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

Widgets definition

What’s inside React.js

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

Widgets definition

What’s inside React.js

Nested widgets & state spread

What’s inside React.js

Virtual DOM

What’s inside React.js

‣ 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.

Virtual DOM

What’s inside React.js

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

React.js basics

Flux

FLUX Architecture

React.js is a JavaScript library for building UI Wikipedia

FLUX

FLUX is application architecture for building User Interfaces

Flux website

FLUX

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

Store and View

FLUX Store and View

Events Dependency

FLUX

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