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

SSR, SPAs and PWAs

Marco Otte-Witte
October 19, 2018
Programming
0
340

SSR, SPAs and PWAs

This talk has all the acronyms! It offers a deep dive into Server Side Rendering (SSR) in times of SPAs and PWAs. We will look at how pre-rendering JS applications server-side does not only improve perceived startup times but enables advanced techniques like incremental startup on the client and even progressive enhancement (yes, really!).

Marco Otte-Witte

October 19, 2018
Tweet

More Decks by Marco Otte-Witte

See All by Marco Otte-Witte
Securing Technology Investments
marcoow
0
88
Handling images on the web
marcoow
0
390
Fast, Fast, Fast
marcoow
2
420
Feel the Glimmer - ParisJS
marcoow
1
440
Feel the Glimmer - MunichJS 11/17
marcoow
0
120
The JSON:API spec
marcoow
3
1.6k
Leveraging the complete Ember Toolbelt
marcoow
0
250
Feel the Glimmer
marcoow
1
220
Templates and Logic in Ember
marcoow
0
580

Other Decks in Programming

See All in Programming
Ruby Function Composition
bkuhlmann
1
340
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
900
Polars入門
daikikatsuragawa
1
170
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.5k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
220
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
360
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
440
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
CDKコントリビュートの最初の壁を越えよう！ -簡単issueの見つけ方-
badmintoncryer
3
210
"config" ってなんだ？ / What is "config"?
okashoi
0
310
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
480

Featured

See All Featured
GraphQLとの向き合い方2022年版
quramy
33
12k
Embracing the Ebb and Flow
colly
80
4.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
21
6.4k
Building Applications with DynamoDB
mza
88
5.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Teambox: Starting and Learning
jrom
128
8.4k
A Philosophy of Restraint
colly
197
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
14
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Six Lessons from altMBA
skipperchong
22
3k

Transcript

  1. SSR, SPAs and PWAs

  2. None

  3. <html> <!-- Copyright 1996 Warner Bros. Online --> <!-- Badda

    Bing, Badda Boom --> <head> <title>Space Jam</title> <style type="text/css"> .footer-links { margin: 5px; } </style> </head> <body bgcolor="#000000" background="img/bg_stars.gif" text="#ff0000" link="#ff4c4c" vlink="#ff4c4c" alink="#ff4c4c"> <center> <!--**************Ads - Don't Touch!*************************************--> <CENTER> <nobr> <table border=0 cellpadding=0 cellspacing=0 width=488 height=60> <tr> <td align="center"> <!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234&page.allowcompete=no"--> </td> <td align="center" width="20"></td> <td align="center"> <!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234"--> </td> </tr> </table> </NOBR> </center> <!--*******************************************************************--> <br>
  4. None
  5. None
  6. None
  7. None
  8. None

  9. SSR, SPAs and PWAs

  10. SSR, SPAs and PWAs The Return of Progressive Enhancement

  11. Marco Otte-Witte @marcoow

  12. simplabs.com @simplabs

  13. SSR, SPAs and PWAs

  14. None
  15. None
  16. None

  17. Classic (SSR) web sites

  18. None

  19. GET /

  20. None
  21. None

  22. GET /?search=Nürnberg

  23. None

  24. GET /locations/1

  25. None

  26. • document is visually complete as received from server

  27. • document is visually complete as received from server •

    …as well as immediately functional

  28. • document is visually complete as received from server •

    …as well as immediately functional • subsequent page transitions require server roundtrips

  29. Single Page Apps

  30. None

  31. GET /

  32. None

  33. GET /app.js

  34. None
  35. None

  36. GET /api/locations?search=Nürnberg

  37. None

  38. GET /api/measurements?location=1

  39. None

  40. • initial document is essentially useless

  41. • initial document is essentially useless • …until JS loads,

    app starts and runs completely in the browser

  42. • initial document is essentially useless • …until JS loads,

    app starts and runs completely in the browser • subsequent page transitions are client-side and thus fast

  43. • initial document is essentially useless • …until JS loads,

    app starts and runs completely in the browser • subsequent page transitions are client-side and thus fast • only data is loaded lazily

  44. • initial document is essentially useless • …until JS loads,

    app starts and runs completely in the browser • subsequent page transitions are client-side and thus fast • only data is loaded lazily • requires JS to work at all

  45. Source: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization/

  46. Progressive Web Apps

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None

  55. ⚡

  56. ⚡

  57. None

  58. • serve the app's main UI shell from a service

    worker

  59. • serve the app's main UI shell from a service

    worker • fill in content dynamically once the app starts
  60. None

  61. GET /

  62. None

  63. GET /app.js

  64. None

  65. GET /

  66. GET /

  67. None

  68. GET /app.js

  69. None

  70. • some visual content available immediately

  71. • some visual content available immediately • application works offline

  72. • some visual content available immediately • application works offline

    • requires JS to work at all

  73. Choose one!

  74. Choose one all!

  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. None

  87. • running the same SPA in the browser and on

    the server

  88. • running the same SPA in the browser and on

    the server • no conceptual difference between browser and server

  89. • running the same SPA in the browser and on

    the server • no conceptual difference between browser and server • valuable initial response

  90. • no browser APIs in Node!

  91. • no browser APIs in Node! • use isomorphic dependencies

  92. https://breethe.app

  93. None
  94. None
  95. None

  96. GET /

  97. None

  98. GET /app.js

  99. None
  100. None

  101. GET /api/locations?search=Nürnberg

  102. None

  103. GET /api/measurements?location=1

  104. None
  105. None

  106. GET /locations/1

  107. None

  108. Progressive Enhancement

  109. None

  110. GET /locations/1

  111. None

  112. GET /

  113. None
  114. None

  115. GET /

  116. None

  117. GET /app.js

  118. None

  119. Running a JavaScript app without JavaScript

  120. None

  121. GET /

  122. None
  123. None

  124. GET /search?term=Nürnberg

  125. None

  126. <form onsubmit={{action submitSearch}} action="/search" method="get">

  127. <form action="/search" method="get">

  128. <form onsubmit="javascript:…" action="/search" method="get">

  129. None

  130. GET /

  131. None

  132. GET /search/nearby

  133. None

  134. <a href="/search/nearby" onclick={{action searchByLocation}}>Show nearby locations</a>

  135. <a href="/search/nearby" >Show nearby locations</a>

  136. <a href="/search/nearby" onclick="javascript:…" >Show nearby locations</a>

  137. we now have an SPA that does not require JavaScript

    on the client and degrades gracefully

  138. Source: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization/

  139. SSR content + baseline functionality

  140. SSR content + baseline functionality SPA improved UX & full

    functionality

  141. SSR content + baseline functionality SPA improved UX & full

    functionality PWA app characteristics + offline support

  142. https://github.com/simplabs/breethe-client

  143. None
  144. None

  145. ember install fastboot

  146. None

  147. Thanks

  148. Q&A

  149. simplabs.com @simplabs