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
81
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
95
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
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
Developer Advocate / Community Managerなるには?
tsho
0
120
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
310
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.8k
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
200
How to achieve interoperable digital identity across Asian countries
fujie
0
140
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
170
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
250
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
140
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
210
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
How to train your dragon (web standard)
notwaldorf
96
6.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Cult of Friendly URLs
andyhume
79
6.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Speed Design
sergeychernyshev
32
1.2k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
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