react.js and flux in details
TRANSCRIPT
React.jsи FLUX
Artyom Trityak
React.js and Flux
Artyom Trityak Electric Cloud Skype: art.trityak E-mail: [email protected]
• Build complex UI without pain
• That’s easy - re-render whole page on change
• React.js will make a diff and apply only changes to DOM
React? What’s React? Why React?
React elements composition
Nested elements
Nested elements
Nested elements
this.props.children
• SEO - no need phantom.js renderer for SPA
• Increase first load speed
• JS-bindings «on flight»
Server Side Rendering
Server Side Rendering: Node.js
Server Side Rendering: Node.js
https://github.com/artyomtrityak/react-server-render-node
Flux
Flux: one directional data flow
onClick onSelect
onChange …
Actions.actionName(params) !
UserActions.createUser(…) UserActions.selectGroup(…) 1
2
3
Flux: Who is owner? React is owner
1
2
3
4
Flux: Action -> WebUtils -> Dispatcher
12
3
Сервер
Fetch.js Superagent jQuery.ajax
EventEmitter
EventEmitter Events
1
2
3
ES6 Store
Immutable.js
http://facebook.github.io/immutable-js
• Immutable state
• One directional data flow
Flux: «умные» и «глупые» компоненты
Smart component (state)
STORE
ACTIONS
Flux: «умные» и «глупые» компоненты
Smart component (state)
STORE
ACTIONS
Dumb component
(props)
Dumb component
(props)
Dumb component
(props)
props
ФЫВcallbacks
Flux: examples
https://github.com/facebook/flux/tree/master/examples
https://github.com/gaearon/flux-react-router-example
React Router
React Router
React Router
React Router
React Router
+Bonus
React Native
end 2015 - beg 2016
https://github.com/facebook/react-native
Facebook groups app
• JavaScript
• NO WebView
• NO browser
• JavaScript logic in separated thread does not block Native UI
• JSX HTML -> Native platform elements
• Learn once, write everywhere
• Example: http://www.facebookgroups.com/
React Native
iOS / Android devs: «But…»
