Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Universal Applications
Search
Stepan Parunashvili
March 06, 2016
Technology
1
71
Universal Applications
Talk on Universal (Isomorphic) Applications at Spotlight React
Stepan Parunashvili
March 06, 2016
Tweet
Share
More Decks by Stepan Parunashvili
See All by Stepan Parunashvili
Scaling React Applications
stopachka
2
86
Universal Applications
stopachka
0
62
Engineering Growth
stopachka
0
42
ES2015 & React
stopachka
0
36
ES2015
stopachka
0
48
Other Decks in Technology
See All in Technology
サーバーレス SaaS における運用監視の負荷軽減のためのアプローチ
ririru0325
0
100
最新のWasm事情
askua
5
2.6k
AIとともに歩んだライブラリアップデートの道のり/ vue-fes-japan-2024-link-and-motivation
lmi
2
2.5k
全社を巻き込んだ業務オペレーション改善と、それは事業成長に貢献しているのか?を実感した話
marroooon
0
160
Reality is not an End-to-End Prediction Problem: Applied NLP in the Age of Generative AI
inesmontani
PRO
0
230
AWS CDK を活用した 大量 AWS アカウントへのプロビジョニング例 〜 SaaSus Platform の場合 〜 於 JAWS-UG CDK支部 #17
yaggy
1
180
Demystifying Vite Internals
nozomuikuta
3
920
ZOZOのデータマネジメントの取り組み:これまでとこれから / ZOZO's Data Management Initiatives
takagiyudai
0
170
自然言語処理を役立てるのはなぜ難しいのか
pfn
PRO
17
4.6k
AWS Step Functionsのタスク入出力に秩序を与えよう
haku__hime
0
140
Snowflakeでスロークエリ改善に取り組んだ話
tabata0208
0
150
巨大企業でDX革新を起こすということ BTCONJP 2024
yamaken66
1
490
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Gamification - CAS2011
davidbonilla
80
5k
Scaling GitHub
holman
458
140k
GitHub's CSS Performance
jonrohan
1030
460k
BBQ
matthewcrist
85
9.2k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Rails Girls Zürich Keynote
gr2m
93
13k
Statistics for Hackers
jakevdp
796
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Transcript
Universal Applications Stepan Parunashvili 1
@stopachka www.stepanp.com 2 Who am I?
@stopachka www.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 routing validation views
28 routing validation views c00l animations
29 routing validation views c00l animations (in some browsers...b^.^d)
30
31
2009... 32
2010 33
34
35 v0.1.0
36
37
38
39
40 routing validation views
41 ...routing ...validation ...views routing validation views
42
43
44
is it just the way things are? 45
46
47
48 routing validation views
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.js server.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 routing validation views
wait... single-threaded backend? 125
Clojurescript anyone? 126
that's it : ) 127
Questions? 128