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
79
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
94
Universal Applications
stopachka
0
75
Engineering Growth
stopachka
0
51
ES2015 & React
stopachka
0
46
ES2015
stopachka
0
55
Other Decks in Technology
See All in Technology
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
140
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
790
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
4
220
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
2
340
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
140
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
190
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
3
1.4k
Digitization部 紹介資料
sansan33
PRO
1
4.5k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
150
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
150
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
A designer walks into a library…
pauljervisheath
207
24k
Automating Front-end Workflow
addyosmani
1370
200k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How to train your dragon (web standard)
notwaldorf
96
6.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
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