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

Universal Applications

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
91
Engineering Growth
Avatar for Stepan Parunashvili stopachka
0
75
ES2015 & React
Avatar for Stepan Parunashvili stopachka
0
77
ES2015
Avatar for Stepan Parunashvili stopachka
0
79

Other Decks in Technology

See All in Technology
AI工学特論: MLOps・継続的評価
Avatar for Asei Sugiyama asei
11
3k
AI時代におけるテストの基礎の再定義 / Rethinking the Fundamentals of Testing in the AI Era
Avatar for Matsu mineo_matsuya
15
6.1k
運用を犠牲にせずコストを制御し事業成長を支える B2B SaaS ID管理基盤におけるS3 Tableのログストレージ活用
Avatar for 株式会社カミナシ kaminashi
1
100
文字起こし基盤の信頼性
Avatar for abnoumaru abnoumaru
0
150
AI エージェント時代のデジタルアイデンティティ
Avatar for Naohiro Fujie fujie
1
1.1k
終末スローライフアプリ『LIVING with LIVLIES』運用を支える技術～不思議な生き物リヴリーの体を借りて、終末世界を冒険！世界観を支えるURP描画設計・量産パイプライン・AI活用について～
Avatar for ENSAPIA Engineering株式会社 202409e2
0
110
最高のシステムプロンプトを作るためにフィードバック機能を導入した話
Avatar for Ryotaro Harada alchemy1115
0
220
データ活用研修 問いの発見と仮説構築【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
650
Claude Mythos、Fable...フロンティアAIの最新動向と企業のセキュリティ対策
Avatar for GMO Flatt Security flatt_security
0
170
Escolhendo LLMs na Prática: Lições Reais em Busca Agêntica no Mercado Livre —TDC 2026 Floripa
Avatar for Jessica Pauli de C Bonson jpbonson
0
100
Claude Code並行開発環境の ムダ‧ムラ‧ムリを見直した話
Avatar for Muranaka muranakaaa
0
290
13年運用タイトルのサーバーサイドが辿り着いた現在地 ― モンスターストライクにおける技術・組織・AI活用から得た知見
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
290

Featured

See All Featured
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
640
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
520
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.7k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
390
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
480
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
190
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.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