ReactJS binary-studio.com

React JSJS library focused on UI, not a framework

one-way data flow

VirtualDOM

UI = f(x)ReactJS

F - Component

x - state

MVC

Problems

Facebook problems

201430th of April

F8 Facebook Developer Conference

Flux

Flux

Flux

Action

Dispatcher

Store

View

● Instead of MVC for React● Unidirectional data flow● Created by Facebook● Many stores

Store

Store

...

DispatcherCentral hub that messages all data flow

It is a registry of callbacks into the store

=> mechanism to deliver actions into the stores Action

Dispatcher

Store

ViewStore

Store

...

Actionstriggered by the view

information about changes

Action

Dispatcher

Store

ViewStore

Store

...

Storeapplication state

reacts to specific actions

issue events when data or state updated Action

Dispatcher

Store

ViewStore

Store

...

ViewsTriggers actions

Reacts to specific events in the store

Action

Dispatcher

Store

ViewStore

Store

...

Race of Flux implementationsrelay

flux

alt

reflux

flummox

fluxible

fluxxor

marty.js

fynx

McFly

……..

Problems of FluxStore contains store change logic and state

The state is being rewritten with every action

Dispatcher cannot dispatch while dispatching

2015End of the race

Redux wins!

Why Redux?1. One global state

2. New state after each action (Time traveling)

3. State is read-only

4. Changes are made with pure functions (reducers)

5. Hot reload

Redux

View layer

Action

Dispatcher Store View

Provider Connect

( previousState, action ) => newState Basic principle

Redux flow - ActionWhenever you want to change the state of the application, you shoot off an action.

Action function returns a formatted action object

Redux flow - ReducerEvery reducer:

receive state

return new state

Not mutated old state! new one!

Redux flow - Store

Redux flow - Connect

Smart elementsHow things works

no DOM markup, no styles

Provide data

call actions

Dumb elementsHow things look

No app dependencies

Just props for data and callbacks

only UI state

Solved issues1. Delegation is easier

a. top-down props is not required

2. Separation of concerns

a. Data fetching => actions

b. Data decorations => reducer

c. view logic

3. State management

a. App-specific

b. Immutable

c. Maintainable

Redux SummaryOne store

Reducers === (previousState, action) => newState

State changes only in reducers

Structured code

We have access to state in every moment

Server-side EnvironmentsNode.js

ReactJS .NET

Nashorn

Tooling

React DevTools

Redux DevToolsdevtools

Redux slider monitor

https://calesce.github.io/redux-slider-monitor/?debug_session=123

Webpack

WebpackLike Grunt or Gulp, but different

Bundles

Uses javascript modules

Reduce the amount of AJAX requests

Totally configurable

Webpack

http://webpack.github.io/docs/configuration.html

Entry - entry files, which WP will use

Webpack

http://webpack.github.io/docs/configuration.html

Output:● path - location where

webpack will build the files

● publicPath - location where wwbpack serves files from.

Webpack

http://webpack.github.io/docs/configuration.html

Loaders:● Like tasks ● Transform files● Preprocess files as you

require or import them.

Preloaders - the same but before executing loaders and building bundles

Webpack

http://webpack.github.io/docs/configuration.html

Plugins:● Like tasks ● Work with bundle

Webpack

http://webpack.github.io/docs/configuration.html

Bundles:● Lazy loading● Resource per page

WebpackPlugins

Loaders

Async build

Chunks

DevTools

Webpack-dev-serverWhen you need HTTP

Serves files virtually

Hot reload (works on socket.io)

Hot reload

Complementary-Toolshttps://github.com/facebook/react/wiki/Complementary-Tools

LinksRedux video: egghead

Flux: Rus/Eng

Redux: Rus/Eng

Demohttps://bitbucket.org/oleksandrkovalov/bsa-2016-react-demo-2

Thank you! Let’s redux!