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