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
92

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
110
Universal Applications
Avatar for Stepan Parunashvili stopachka
0
82
Engineering Growth
Avatar for Stepan Parunashvili stopachka
0
61
ES2015 & React
Avatar for Stepan Parunashvili stopachka
0
63
ES2015
Avatar for Stepan Parunashvili stopachka
0
68

Other Decks in Technology

See All in Technology
Getting started with Google Antigravity
Avatar for Mete Atamel meteatamel
0
370
歴史に敬意を！ パラシュートVPoEが組織と共同で立ち上がる信頼醸成オンボーディング
Avatar for Go Akazawa go0517go
PRO
0
230
AI時代のAPIファースト開発
Avatar for 草薙昭彦 nagix
2
610
AWS CDK の目玉新機能「Mixins」とは / cdk-mixins
Avatar for k.goto gotok365
2
260
AWSが推進する AI駆動開発ライフサイクル入門 〜 AI駆動開発時代に必要な人材とは 〜 / introduction_to_aidlc_and_skills
Avatar for Atsushi Fukui fatsushi
7
4.9k
バニラVisaギフトカードを棄てるのは結構大変
Avatar for meow meow_noisy
0
140
Amazon Bedrock AgentCoreでブラウザ拡張型AI調査エージェントを開発した話 (シングルエージェント編)
Avatar for Kiminori Yokoi nasuvitz
2
110
Databricks （と気合い）で頑張るAI Agent 運用
Avatar for camay kameitomohiro
0
260
作るべきものと向き合う - ecspresso 8年間の開発史から学ぶ技術選定 / 技術選定con findy 2026
Avatar for FUJIWARA Shunichiro fujiwara3
5
960
社内ワークショップで終わらせない 業務改善AIエージェント開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
370
もう怖くないバックグラウンド処理 Background Tasks のすべて - Hakodate.swift #1
Avatar for Kanta Oikawa kantacky
0
110
プロダクト開発の品質を守るAIコードレビュー：事例に見る導入ポイント
Avatar for Atsushi Nakatsugawa moongift
PRO
1
490

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
470
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.4k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
170
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
2.6k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
63
53k
HDC tutorial
Avatar for Michiel Stock michielstock
1
460
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k

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