React.jsи FLUX

Artyom Trityak

React.js and Flux

Artyom Trityak Electric Cloud Skype: art.trityak E-mail: art.trityak@gmail.com

• 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…»