Scaling React Applications

On Scaling React Applications, at Applicative 2016

Transcript

1. On Scaling React Applications
   Stepan Parunashvili
   1
   

   View Slide

2. @stopachka
   www.stepanp.com
   2
   

   View Slide

3. 3
   Scaling React Applications?
   

   View Slide

4. 4
   Scaling React Applications?
   

   View Slide

5. Scaling Your Team
   5
   

   View Slide

6. 6
   # engineers
   output
   

   View Slide

7. 7
   # engineers
   output
   

   View Slide

8. 8
   # engineers
   output
   

   View Slide

9. 9
   # engineers
   output
   

   View Slide

10. Scaling Your Product
    10
    

    View Slide

11. 11
    LOC
    # features
    

    View Slide

12. 12
    LOC
    # features
    rewrite
    

    View Slide

13. 13
    LOC
    # features
    

    View Slide

14. Goal: Scale Frontend
    14
    

    View Slide

15. Why React?
    15
    

    View Slide

16. View Slide

17. ...2015
    17
    

    View Slide

18. ...2014
    18
    

    View Slide

19. ...2013
    19
    

    View Slide

20. ...2012
    20
    

    View Slide

21. ...2011
    21
    

    View Slide

22. View Slide

23. View Slide

24. 24
    v0.1.0
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. increment
    append, decrement, replace
    31
    

    View Slide

32. Now...
    32
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. Problem:
    Keep the DOM in Sync
    38
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. 2011...
    43
    

    View Slide

44. 2012...
    44
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. declarative
    49
    

    View Slide

50. View Slide

51. composable
    51
    

    View Slide

52. View Slide

53. cohesive
    53
    

    View Slide

54. View Slide

55. declarative
    composable
    cohesive
    55
    

    View Slide

56. What's next?
    56
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. How do we do this?
    60
    

    View Slide

61. Container Components
    61
    

    View Slide

62. 62
    props @huang47
    

    View Slide

63. 63
    FooContainer
    

    View Slide

64. 64
    FooContainer
    Foo
    

    View Slide

65. 65
    FooContainer
    Foo
    handle data
    ui logic
    

    View Slide

66. View Slide

67. Why?
    67
    

    View Slide

68. 68
    Container Components
    • manage data
    

    View Slide

69. 69
    Container Components
    • manage data
    • ui logic
    

    View Slide

70. 70
    Container Components
    • manage data
    • ui logic
    • reusable
    

    View Slide

71. 71
    Container Components
    • manage data
    • ui logic
    • reusable
    • tests needed
    

    View Slide

72. 72
    UI Components
    • manage data
    • ui logic
    • reusable
    • tests needed
    

    View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. timeout/retry
    81
    

    View Slide

82. timeout/retry
    batch
    82
    

    View Slide

83. timeout/retry
    batch
    filter params
    83
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. Expose UI Components
    92
    

    View Slide

93. View Slide

94. View Slide

95. 95
    UI Component
    

    View Slide

96. 96
    container
    container
    

    View Slide

97. * Works best with Redux
    97
    

    View Slide

98. View Slide

99. View Slide

100. 100
     Containers to Manage Data
     Expose UI Components
     Keep a single app state
     

     View Slide

101. What's next?
     101
     

     View Slide

102. View Slide

103. 103
     Step: Action Fired
     

     View Slide

104. 104
     Step: Diff Virtual DOM
     

     View Slide

105. 105
     Step: Apply changeset
     

     View Slide

106. 106
     Step: Diff Virtual DOM
     

     View Slide

107. 107
     Step: Diff Virtual DOM
     :0
     

     View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

112. View Slide

113. 1 year later...
     113
     

     View Slide

114. 1 year later...
     114
     

     View Slide

115. View Slide

116. ImmutableJS
     116
     

     View Slide

117. View Slide

118. View Slide

119. View Slide

120. View Slide

121. View Slide

122. Structural Sharing
     122
     

     View Slide

123. View Slide

124. View Slide

125. Robust by Default
     125
     

     View Slide

126. View Slide

127. View Slide

128. View Slide

129. View Slide

130. View Slide

131. Records
     131
     

     View Slide

132. View Slide

133. View Slide

134. View Slide

135. View Slide

136. What's next?
     136
     

     View Slide

137. HOC
     137
     

     View Slide

138. View Slide

139. Implicit Contracts
     139
     

     View Slide

140. Implicit Contracts
     State Clashes
     140
     

     View Slide

141. Implicit Contracts
     State Clashes
     Performance Issues
     141
     

     View Slide

142. View Slide

143. View Slide

144. Push difficulties towards
     the core
     144
     

     View Slide

145. On JS Fatigue
     145
     

     View Slide

146. Stick to Principles
     146
     

     View Slide

147. Could this be a paradigm
     shift?
     147
     

     View Slide

148. Could this level the playing
     field?
     148
     

     View Slide

149. Could this reduce iteration
     time?
     149
     

     View Slide

150. For now,
     150
     

     View Slide

151. Use Container Components
     Use Immutable Data
     Use FP
     151
     

     View Slide

152. Bonus:
     relay,
     redux-saga
     css-modules
     152
     

     View Slide

153. Thank you :)
     153
     

     View Slide