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