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 19, 2016
Programming
0
70
Universal Applications
Building Universal Applications, Delivered at FE Day in Guangzhou
Stepan Parunashvili
March 19, 2016
Tweet
Share
More Decks by Stepan Parunashvili
See All by Stepan Parunashvili
Scaling React Applications
stopachka
2
93
Engineering Growth
stopachka
0
49
Universal Applications
stopachka
1
77
ES2015 & React
stopachka
0
44
ES2015
stopachka
0
55
Other Decks in Programming
See All in Programming
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
310
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
180
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
230
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
720
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
170
C++20 射影変換
faithandbrave
0
520
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
340
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
エラーって何種類あるの?
kajitack
5
300
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
18
3.3k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
140
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Designing Experiences People Love
moore
142
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
33
5.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building Applications with DynamoDB
mza
95
6.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
Universal Applications Stepan Parunashvili 1
@stopachka www.stepanp.com 2 笳茯
Universal Applications 3
Isomorphic? 4
5
6
7
Isomorphic 8
Universal 9
10
...2015 11
...2014 12
...2013 13
...2012 14
...2011 15
...2010 16
...2009 17
2008 18
19
20 v2.2.2
21
22
23 javascript?
24 鉖᯾牦
25
26 routing validation views
27 routing validation views c00l animations
28 routing validation views c00l animations (in some browsers...b^.^d)
29
30
2009... 31
2010 32
33
34 v0.1.0
35
36
37
38
39 routing validation views
40 ...routing ...validation ...views routing validation views
41
42
43
is it just the way things are? 44
45
46
47 routing validation views
48
49 what if we made our own representation of the
dom...
...React! 50
win 1: code sharing 51
win 2: perceived performance 52
win 3: SEO 53
Can we build this? 54
ٵ॓ԧ牫 55
56 server.js
57 server.js
58 server.js
59 server.js
60
61
62 server.js
63 server.js
64 server.js
65
Time to react 66
67 components.js
68 server.js
69 server.js
70 server.js
71 server.js
72
73 components.js
74 components.js
75 components.js
76
77 server.js
78 server.js
79 server.js
80 load client side react client.js
81
...Now the views are shared 82
What's the catch? 83
build tools (webpack, babel & family) 84
Time to route 85
86 client.js
ReactRouter 87
88 server.js
let's disable universal rendering for now 89
90 server.js
91 server.js
92 components.js
93 load client side react components.js
94 load client side react routes.js
95 load client side react client.js
96 load client side react client.js
show it working 97
98
99
disable js 100
101 server.js
102 server.js server.js
103 server.js server.js
104 server.js server.js
105 server.js server.js
show it working 106
How about stores? 107
108 client.js
109 client.js
110 client.js
111 client.js
112 client.js
113 client.js
114 server.js server.js
115 server.js server.js
116 server.js server.js
initial data 珌牫 117
118 client.js
119 client.js
120 server.js
121 server.js
122 server.js
123 server.js
124 server.js
125 server.js
ok, ok....ݢฎ... 126
How about data fetching? 127
128 api.js
129 api.js
130 components.js
131 components.js
132 server.js
133 server.js
134 server.js
135 server.js
/home -> /page/2 ? 136
137 client.js
138 client.js
139 client.js
...but there's a library for that 140
react-resolver 141
is it all rosy? 142
not really 143
but the payoff? 144
145
146
147
148 routing validation views
wait... single-threaded-backend? 149
ClojureScript. 150
ClojureScript. Boom 151
so.. 152
Build Declaratively 153
Question assumptions 154
Questions? 155