Universal Applications

Building Universal Applications, Delivered at FE Day in Guangzhou

Transcript

1. Universal Applications Stepan Parunashvili 1
2. @stopachka www.stepanp.com 2 笳茯෈
3. Universal Applications 3
4. Isomorphic? 4
8. Isomorphic 8
9. Universal 9
11. ...2015 11
12. ...2014 12
13. ...2013 13
14. ...2012 14
15. ...2011 15
16. ...2010 16
17. ...2009 17
18. 2008 18
20. 20 v2.2.2
23. 23 javascript?
24. 24 鉖᯾牦
26. 26 routing validation views
27. 27 routing validation views c00l animations
28. 28 routing validation views c00l animations (in some browsers...b^.^d)
31. 2009... 31
32. 2010 32
34. 34 v0.1.0
39. 39 routing validation views
40. 40 ...routing ...validation ...views routing validation views
44. is it just the way things are? 44
47. 47 routing validation views
49. 49 what if we made our own representation of the dom...
50. ...React! 50
51. win 1: code sharing 51
52. win 2: perceived performance 52
53. win 3: SEO 53
54. Can we build this? 54
55. ٵ॓ԧ牫 55
56. 56 server.js
57. 57 server.js
58. 58 server.js
59. 59 server.js
62. 62 server.js
63. 63 server.js
64. 64 server.js
66. Time to react 66
67. 67 components.js
68. 68 server.js
69. 69 server.js
70. 70 server.js
71. 71 server.js
73. 73 components.js
74. 74 components.js
75. 75 components.js
77. 77 server.js
78. 78 server.js
79. 79 server.js
80. 80 load client side react client.js
82. ...Now the views are shared 82
83. What's the catch? 83
84. build tools (webpack, babel & family) 84
85. Time to route 85
86. 86 client.js
87. ReactRouter 87
88. 88 server.js
89. let's disable universal rendering for now 89
90. 90 server.js
91. 91 server.js
92. 92 components.js
93. 93 load client side react components.js
94. 94 load client side react routes.js
95. 95 load client side react client.js
96. 96 load client side react client.js
97. show it working 97
100. disable js 100
101. 101 server.js
102. 102 server.js server.js
103. 103 server.js server.js
104. 104 server.js server.js
105. 105 server.js server.js
106. show it working 106
107. How about stores? 107
108. 108 client.js
109. 109 client.js
110. 110 client.js
111. 111 client.js
112. 112 client.js
113. 113 client.js
114. 114 server.js server.js
115. 115 server.js server.js
116. 116 server.js server.js
117. initial data 珌牫 117
118. 118 client.js
119. 119 client.js
120. 120 server.js
121. 121 server.js
122. 122 server.js
123. 123 server.js
124. 124 server.js
125. 125 server.js
126. ok, ok....ݢฎ... 126
127. How about data fetching? 127
128. 128 api.js
129. 129 api.js
130. 130 components.js
131. 131 components.js
132. 132 server.js
133. 133 server.js
134. 134 server.js
135. 135 server.js
136. /home -> /page/2 ? 136
137. 137 client.js
138. 138 client.js
139. 139 client.js
140. ...but there's a library for that 140
141. react-resolver 141
142. is it all rosy? 142
143. not really 143
144. but the payoff? 144
148. 148 routing validation views
149. wait... single-threaded-backend? 149
150. ClojureScript. 150
151. ClojureScript. Boom 151
152. so.. 152
153. Build Declaratively 153
154. Question assumptions 154
155. Questions? 155