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
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
3
200
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
160
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.3k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
120
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
460
ロールが細分化された組織でSREは何をするか?
tgidgd
1
300
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
410
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
930
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
A better future with KSS
kneath
238
17k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Six Lessons from altMBA
skipperchong
28
3.9k
Faster Mobile Websites
deanohume
308
31k
Docker and Python
trallard
45
3.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
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