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
100
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
120
Universal Applications
Avatar for Stepan Parunashvili stopachka
0
90
Engineering Growth
Avatar for Stepan Parunashvili stopachka
0
73
ES2015 & React
Avatar for Stepan Parunashvili stopachka
0
73
ES2015
Avatar for Stepan Parunashvili stopachka
0
78

Other Decks in Technology

See All in Technology
価格.comをAI駆動で全面刷新する ー 30年分の技術的負債を返し、次の30年の土台をつくる ー / AI Engineering Summit Tokyo 2026
Avatar for tkyowa tkyowa
53
59k
脆弱性対応、どこで線を引くか
Avatar for ryoji miyamoto rymiyamoto
0
240
AAIFに入ってみた ～内から見えるコミュニティ動向～
Avatar for Satoshi Ito sato4
0
120
2026TECHFRESH畢業分享會 - AI 時代的人生存檔點
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
440
AI駆動開発が変える、大規模開発の前提 ーHuman in the Loop から Human on the Loop へ / AIE2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
30
23k
エンジニアリング戦略の作り方 / Crafting Engineering Strategy
Avatar for iwashi iwashi86
18
6k
個人最適 から 全体最適 へ　AI情報共有会・AIギルド・AI-DLC で進める カンリーの組織展開
Avatar for ふくだ（fukuda ryu） rfdnxbro
0
2.1k
作って終わりにしない タイミーのセマンティックレイヤー育成の現在地
Avatar for chanyou0311 chanyou0311
3
2k
2026TECHFRESH畢業分享會 - Lightning Talk - 資料也要 CI/CD? 用 Airbyte 自動化資料同步
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
420
ChatworkとBPaaS 異なる特性で学んだAI機能開発の ベストプラクティス
Avatar for kubell kubell_hr
2
3.4k
Databricks における 生成AIガバナンスの実践
Avatar for Takaaki Yayoi taka_aki
1
370
Claude Code×Terraform IaC テンプレート駆動開発
Avatar for Itou Hideki itouhi
1
470

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
23k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
360
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.4k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
940
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
320

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