universal applications
TRANSCRIPT
Universal Applications
Stepan Parunashvili
1
@stopachkawww.stepanp.com
2
Who am I?
@stopachkawww.stepanp.com
3
Who am I?
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
javascript
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
*rolls up sleeves*
56
57
server.js
58
server.js
59
server.js
60
server.js
61
62
63
server.js
64
server.js
65
server.js
66
Time to react
67
68
components.js
69
server.js
70
server.js
71
server.js
72
server.js
73
74
components.js
75
components.js
76
components.js
77
78
server.js
79
server.js
80
server.js
81
load client side react
client.js
82
...Now the views are shared
83
What's the catch?
84
build tools(webpack, babel & family)
85
Time to route
86
87
client.js
ReactRouter
88
89
server.js
90
server.js
91
components.js
92
load client side react
components.js
93
load client side react
routes.js
94
load client side react
client.js
95
load client side react
client.js
show it working
96
97
98
disable js
99
100
server.js
101
server.jsserver.js
show it working
102
How about data fetching?
103
104
api.js
105
api.js
106
components.js
107
server.js
108
server.js
109
server.js
110
server.js
111
server.js
112
client.js
113
client.js
114
client.js
115
client.js
...but there's a library for that
116
react-resolver
117
is it all rosy?
118
not really
119
but the payoff?
120
121
122
123
124
routingvalidationviews
wait... single-threaded backend?
125
Clojurescript anyone?
126
that's it : )
127
Questions?
128