React + flux
-
Upload
daniel-werthen -
Category
Technology
-
view
520 -
download
2
description
Transcript of React + flux
React + FluxDaniel Werthén, Frontend at Viktklubb
Consultant at Netlight
React is not a mvc framework
2
Nor is it a templating engine
3
React is a library for creating UI
4
It treats UI as a function
5
AKA: Components
Data comes in, virtual DOM comes out
6
When the data changesre-render
7
Diff the next virtual DOM with the previous one
8
Update the real DOM with little to no
overhead
9
What makes UI development
difficult?
10
State is hard
11
State is hard
12
And UI means a lot of state
Even more so if it is mutable
13
And exponentially so if it changes over time
14
It is difficult to debug
15
Makes concurrency a nightmare
16
So what to do? Flux!
17
Flux is more of a pattern rather than a framework
18
Gather all state in one place
19
(In normalized form)
20
Apply transformations on this one true source of state
21
With an output that is the input of React
components
22
User input results in changed state
23
Which is tracked by
event callbacks
And then reflected as updates to the state[source]
24
That change is propagatedto the components sharing
the same state
25
Components sharing the same state are
completely de-coupled
26
Components are (properly)
composable
27
Uni-directional flow
28
[State]Stores
[UI]Components
[User input]Actions
Dispatcher
DEMO
29
QA?
30
React in short
It is very efficient!
No unneccessary DOM updates
Virtual event callbacks mapping
DOM independent
Easy server side rendering (RenderComponentToString)
Unit testing components with Jest
Works wonders with Browserify and NPM
31