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