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

Universal Applications

Avatar for Stepan Parunashvili Stepan Parunashvili
March 06, 2016
Technology
1
79

Universal Applications

Talk on Universal (Isomorphic) Applications at Spotlight React

Avatar for Stepan Parunashvili

Stepan Parunashvili

March 06, 2016
Tweet

More Decks by Stepan Parunashvili

See All by Stepan Parunashvili
Scaling React Applications
Avatar for Stepan Parunashvili stopachka
2
95
Universal Applications
Avatar for Stepan Parunashvili stopachka
0
75
Engineering Growth
Avatar for Stepan Parunashvili stopachka
0
51
ES2015 & React
Avatar for Stepan Parunashvili stopachka
0
46
ES2015
Avatar for Stepan Parunashvili stopachka
0
55

Other Decks in Technology

See All in Technology
恐怖！テストコードなき夜
Avatar for つくぼし tsukuboshi
2
110
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
Avatar for Sansan R&D sansan_randd
0
150
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
Avatar for Masato Ishigaki / 石垣雅人 i35_267
6
360
robocopy の怖い話/scary-story-about-robocopy
Avatar for emi emiki
0
420
2025新卒研修・HTML/CSS #弁護士ドットコム
Avatar for 弁護士ドットコム bengo4com
2
3.9k
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
Avatar for Cygames cygames
PRO
1
2k
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
Avatar for Yasuhiro Onishi onishi
15
7.9k
Jitera Company Deck / JP
Avatar for Jitera Inc. jitera
0
310
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
Avatar for kasacchiful kasacchiful
0
110
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
Avatar for CUEBiC Inc. cuebic9bic
2
160
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
Avatar for LayerX layerx
PRO
1
290
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング～ゲーム会社における情報資産の活かし方～
Avatar for Cygames cygames
PRO
0
150

Featured

See All Featured
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.4k
Navigating Team Friction
Avatar for Lara Hogan lara
188
15k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.8k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
720
It's Worth the Effort
Avatar for 3n 3n
185
28k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k

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