Уже много всего говорили про React, но этот доклад о другом. Этот доклад о том, как мы добавили React.js в большое приложение (>2000 файлов, 2 года разработки) и что из этого получилось. Модульность, Backbone Flux и котики. +Бонус - React Native

1. React.js
и FLUX
Artyom Trityak
React.js and Flux
Artyom Trityak
Electric Cloud
Skype: art.trityak
E-mail: art.trityak@gmail.com

2. • 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?

3. React elements composition

4. Nested elements

5. Nested elements

6. Nested elements
this.props.children

7. • SEO - no need phantom.js renderer for SPA
• Increase first load speed
• JS-bindings «on flight»
Server Side Rendering

8. Server Side Rendering: Node.js

9. Server Side Rendering: Node.js
https://github.com/artyomtrityak/react-server-render-node

11. Flux

12. Flux: one directional data flow

13. onClick
onSelect
onChange
…
Actions.actionName(params)
!
UserActions.createUser(…)
UserActions.selectGroup(…) 1
2
3
Flux: Who is owner? React is owner

14. 1
2
3
4

15. Flux: Action -> WebUtils -> Dispatcher
1
2
3

16. Сервер
Fetch.js
Superagent
jQuery.ajax

17. EventEmitter
EventEmitter Events
1
2
3

18. ES6 Store

19. Immutable.js
http://facebook.github.io/immutable-js
• Immutable state
• One directional data flow

20. Flux: «умные» и «глупые» компоненты
Smart component
(state)
STORE
ACTIONS

21. Flux: «умные» и «глупые» компоненты
Smart component
(state)
STORE
ACTIONS
Dumb
component
(props)
Dumb
component
(props)
Dumb
component
(props)
props
ФЫВ
callbacks

22. Flux: examples
https://github.com/facebook/flux/tree/master/examples
https://github.com/gaearon/flux-react-router-example

23. React Router

24. React Router

25. React Router

26. React Router

27. React Router

28. +Bonus
React Native
end 2015 - beg 2016
https://github.com/facebook/react-native

29. Facebook groups app

30. • 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

31. iOS / Android devs: «But…»