Scaling React Applications

On Scaling React Applications, at Applicative 2016

Transcript

1. On Scaling React Applications Stepan Parunashvili 1
2. @stopachka www.stepanp.com 2
3. 3 Scaling React Applications?
4. 4 Scaling React Applications?
5. Scaling Your Team 5
6. 6 # engineers output
7. 7 # engineers output
8. 8 # engineers output
9. 9 # engineers output
10. Scaling Your Product 10
11. 11 LOC # features
12. 12 LOC # features rewrite
13. 13 LOC # features
14. Goal: Scale Frontend 14
15. Why React? 15
17. ...2015 17
18. ...2014 18
19. ...2013 19
20. ...2012 20
21. ...2011 21
22. 2010 22
24. 24 v0.1.0
31. increment append, decrement, replace 31
32. Now... 32
38. Problem: Keep the DOM in Sync 38
43. 2011... 43
44. 2012... 44
45. 2013 45
49. declarative 49
51. composable 51
53. cohesive 53
55. declarative composable cohesive 55
56. What's next? 56
60. How do we do this? 60
61. Container Components 61
62. 62 props @huang47
63. 63 FooContainer
64. 64 FooContainer Foo
65. 65 FooContainer Foo handle data ui logic
67. Why? 67
68. 68 Container Components • manage data
69. 69 Container Components • manage data • ui logic
70. 70 Container Components • manage data • ui logic • reusable
71. 71 Container Components • manage data • ui logic • reusable • tests needed
72. 72 UI Components • manage data • ui logic • reusable • tests needed
81. timeout/retry 81
82. timeout/retry batch 82
83. timeout/retry batch filter params 83
92. Expose UI Components 92
95. 95 UI Component
96. 96 container container
97. * Works best with Redux 97
100. 100 Containers to Manage Data Expose UI Components Keep a single app state
101. What's next? 101
103. 103 Step: Action Fired
104. 104 Step: Diff Virtual DOM
105. 105 Step: Apply changeset
106. 106 Step: Diff Virtual DOM
107. 107 Step: Diff Virtual DOM :0
113. 1 year later... 113
114. 1 year later... 114
116. ImmutableJS 116
122. Structural Sharing 122
125. Robust by Default 125
131. Records 131
136. What's next? 136
137. HOC 137
139. Implicit Contracts 139
140. Implicit Contracts State Clashes 140
141. Implicit Contracts State Clashes Performance Issues 141
144. Push difficulties towards the core 144
145. On JS Fatigue 145
146. Stick to Principles 146
147. Could this be a paradigm shift? 147
148. Could this level the playing field? 148
149. Could this reduce iteration time? 149
150. For now, 150
151. Use Container Components Use Immutable Data Use FP 151
152. Bonus: relay, redux-saga css-modules 152
153. Thank you :) 153