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
81

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
48
ES2015
Avatar for Stepan Parunashvili stopachka
0
55

Other Decks in Technology

See All in Technology
QAエンジニアがプロダクト専任で チームの中に入ると。。。？/登壇資料（杉森 太樹）
Avatar for Hacobu hacobu
PRO
0
190
フライトコントローラPX4の中身（制御器）を覗いてみた
Avatar for ざきまつ santana_hammer
1
140
"おまじない"はもう卒業！ デバッガで探るSpring Bootの裏側と「学び方」の学び方
Avatar for 竹内 雅和 takeuchi_132917
0
120
日々のSlackアラート確認運用をCustom Chat Modesで楽にした話 / 日々のSlackアラート確認運用をCustom Chat Modesで楽にした話
Avatar for Imamoto Hikaru imamotohikaru
0
450
エンジニアにとってコードと並んで重要な「データ」のお話 - データが動くとコードが見える：関数型＝データフロー入門
Avatar for Izumu KUSUNOKI ismk
0
470
Introducing RFC9111 / YAPC::Fukuoka 2025
Avatar for Ken’ichiro Oyama k1low
1
220
レビュー負債を解消する ― CodeRabbitが支えるAI駆動開発
Avatar for Atsushi Nakatsugawa moongift
PRO
0
150
Datadog On-Call と Cloud SIEM で作る SOC 基盤
Avatar for Yoshiki Kurihara kuriyosh
0
160
CloudFormationコンソールから、 実際に作られたリソースを辿れるようになろう！
Avatar for amixedcolor amixedcolor
1
170
Proxmox × HCP Terraformで始めるお家プライベートクラウド
Avatar for Lamaglama39 lamaglama39
1
190
仕様は“書く”より“語る” - 分断を超えたチーム開発の実践 / 20251115 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
430
はじめての OSS コントリビューション 〜小さな PR が世界を変える〜
Avatar for Chihiro Ito chiroito
3
190

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
192
56k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
4.9k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k

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