Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Universal Applications

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Stepan Parunashvili Stepan Parunashvili
March 06, 2016
Technology
93
1

Universal Applications

Talk on Universal (Isomorphic) Applications at Spotlight React

Avatar for Stepan Parunashvili

Stepan Parunashvili

March 06, 2016

More Decks by Stepan Parunashvili

See All by Stepan Parunashvili
Scaling React Applications
Avatar for Stepan Parunashvili stopachka
2
110
Universal Applications
Avatar for Stepan Parunashvili stopachka
0
83
Engineering Growth
Avatar for Stepan Parunashvili stopachka
0
62
ES2015 & React
Avatar for Stepan Parunashvili stopachka
0
64
ES2015
Avatar for Stepan Parunashvili stopachka
0
69

Other Decks in Technology

See All in Technology
Zephyr(RTOS)でARMとRISC-Vのコア間通信をしてみた
Avatar for misoji engineer iotengineer22
0
110
LLMに何を任せ、何を任せないか
Avatar for an cap120
11
6.6k
「AIエージェントで変わる開発プロセス―レビューボトルネックからの脱却」
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
200
MCPで決済に楽にする
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
0
160
互換性のある（らしい）DBへの移行など考えるにあたってたいへんざっくり
Avatar for Takanori Sejima sejima
PRO
0
450
GitHub Actions侵害 — 相次ぐ事例を振り返り、次なる脅威に備える
Avatar for GMO Flatt Security flatt_security
9
6.8k
OCI技術資料 : ロード・バランサ 概要 - FLB・NLB共通
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
4
27k
How to install a gem
Avatar for André Arko indirect
0
2k
Blue/Green Deployment を用いた PostgreSQL のメジャーバージョンアップ
Avatar for Ken Kato kkato1
0
170
タスク管理も1on1も、もう「管理」じゃない - KiroとBedrock AgentCoreで変わった“判断の仕事”
Avatar for Yusuke Shimizu yusukeshimizu
0
150
Oracle Cloud Infrastructure：2026年3月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
220
CloudFrontのHost Header転送設定でパケットの中身はどう変わるのか？
Avatar for nagisa_53 nagisa53
1
230

Featured

See All Featured
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
300
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
140
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
170
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
780
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.3k

Transcript

  1. Universal Applications Stepan Parunashvili 1

  2. @stopachka www.stepanp.com 2 Who am I?

  3. @stopachka www.stepanp.com 3 Who am I?

  4. Universal Applications 4

  5. Isomorphic? 5

  6. 6

  7. 7

  8. 8

  9. Isomorphic 9

  10. Universal 10

  11. 11

  12. ...2015 12

  13. ...2014 13

  14. ...2013 14

  15. ...2012 15

  16. ...2011 16

  17. ...2010 17

  18. ...2009 18

  19. 2008 19

  20. 20

  21. 21 v2.2.2

  22. 22

  23. 23

  24. 24 javascript?

  25. 25 javascript

  26. 26

  27. 27 routing validation views

  28. 28 routing validation views c00l animations

  29. 29 routing validation views c00l animations (in some browsers...b^.^d)

  30. 30

  31. 31

  32. 2009... 32

  33. 2010 33

  34. 34

  35. 35 v0.1.0

  36. 36

  37. 37

  38. 38

  39. 39

  40. 40 routing validation views

  41. 41 ...routing ...validation ...views routing validation views

  42. 42

  43. 43

  44. 44

  45. is it just the way things are? 45

  46. 46

  47. 47

  48. 48 routing validation views

  49. 49

  50. 50 what if we made our own representation of the

    dom...

  51. ...React! 51

  52. win 1: code sharing 52

  53. win 2: perceived performance 53

  54. win 3: SEO 54

  55. Can we build this? 55

  56. *rolls up sleeves* 56

  57. 57 server.js

  58. 58 server.js

  59. 59 server.js

  60. 60 server.js

  61. 61

  62. 62

  63. 63 server.js

  64. 64 server.js

  65. 65 server.js

  66. 66

  67. Time to react 67

  68. 68 components.js

  69. 69 server.js

  70. 70 server.js

  71. 71 server.js

  72. 72 server.js

  73. 73

  74. 74 components.js

  75. 75 components.js

  76. 76 components.js

  77. 77

  78. 78 server.js

  79. 79 server.js

  80. 80 server.js

  81. 81 load client side react client.js

  82. 82

  83. ...Now the views are shared 83

  84. What's the catch? 84

  85. build tools (webpack, babel & family) 85

  86. Time to route 86

  87. 87 client.js

  88. ReactRouter 88

  89. 89 server.js

  90. 90 server.js

  91. 91 components.js

  92. 92 load client side react components.js

  93. 93 load client side react routes.js

  94. 94 load client side react client.js

  95. 95 load client side react client.js

  96. show it working 96

  97. 97

  98. 98

  99. disable js 99

  100. 100 server.js

  101. 101 server.js server.js

  102. show it working 102

  103. How about data fetching? 103

  104. 104 api.js

  105. 105 api.js

  106. 106 components.js

  107. 107 server.js

  108. 108 server.js

  109. 109 server.js

  110. 110 server.js

  111. 111 server.js

  112. 112 client.js

  113. 113 client.js

  114. 114 client.js

  115. 115 client.js

  116. ...but there's a library for that 116

  117. react-resolver 117

  118. is it all rosy? 118

  119. not really 119

  120. but the payoff? 120

  121. 121

  122. 122

  123. 123

  124. 124 routing validation views

  125. wait... single-threaded backend? 125

  126. Clojurescript anyone? 126

  127. that's it : ) 127

  128. Questions? 128