On Scaling React Applications, at Applicative 2016
On Scaling React ApplicationsStepan Parunashvili1
View Slide
@stopachkawww.stepanp.com2
3Scaling React Applications?
4Scaling React Applications?
Scaling Your Team5
6# engineersoutput
7# engineersoutput
8# engineersoutput
9# engineersoutput
Scaling Your Product10
11LOC# features
12LOC# featuresrewrite
13LOC# features
Goal: Scale Frontend14
Why React?15
16
...201517
...201418
...201319
...201220
...201121
201022
23
24v0.1.0
25
26
27
28
29
30
incrementappend, decrement, replace31
Now...32
33
34
35
36
37
Problem:Keep the DOM in Sync38
39
40
41
42
2011...43
2012...44
201345
46
47
48
declarative49
50
composable51
52
cohesive53
54
declarativecomposablecohesive55
What's next?56
57
58
59
How do we do this?60
Container Components61
62props @huang47
63FooContainer
64FooContainerFoo
65FooContainerFoohandle dataui logic
66
Why?67
68Container Components• manage data
69Container Components• manage data• ui logic
70Container Components• manage data• ui logic• reusable
71Container Components• manage data• ui logic• reusable• tests needed
72UI Components• manage data• ui logic• reusable• tests needed
73
74
75
76
77
78
79
80
timeout/retry81
timeout/retrybatch82
timeout/retrybatchfilter params83
84
85
86
87
88
89
90
91
Expose UI Components92
93
94
95UI Component
96containercontainer
* Works best with Redux97
98
99
100Containers to Manage DataExpose UI ComponentsKeep a single app state
What's next?101
102
103Step: Action Fired
104Step: Diff Virtual DOM
105Step: Apply changeset
106Step: Diff Virtual DOM
107Step: Diff Virtual DOM:0
1 year later...113
1 year later...114
ImmutableJS116
Structural Sharing122
Robust by Default125
Records131
What's next?136
HOC137
Implicit Contracts139
Implicit ContractsState Clashes140
Implicit ContractsState ClashesPerformance Issues141
Push difficulties towardsthe core144
On JS Fatigue145
Stick to Principles146
Could this be a paradigmshift?147
Could this level the playingfield?148
Could this reduce iterationtime?149
For now,150
Use Container ComponentsUse Immutable DataUse FP151
Bonus:relay,redux-sagacss-modules152
Thank you :)153