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

SSR, SPAs and PWAs

Marco Otte-Witte
October 19, 2018
Programming
0
350

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
120
Handling images on the web
marcoow
0
390
Fast, Fast, Fast
marcoow
2
460
Feel the Glimmer - ParisJS
marcoow
1
490
Feel the Glimmer - MunichJS 11/17
marcoow
0
130
The JSON:API spec
marcoow
3
1.7k
Leveraging the complete Ember Toolbelt
marcoow
0
330
Feel the Glimmer
marcoow
1
230
Templates and Logic in Ember
marcoow
0
680

Other Decks in Programming

See All in Programming
Jakarta EE meets AI
ivargrimstad
0
220
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
CSC509 Lecture 09
javiergs
PRO
0
140
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
AWS Lambdaから始まった
Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
Better Code Design in PHP
afilina
PRO
0
130
ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Amazon Bedrock Agentsを用いてアプリ開発してみた！
har1101
0
340
Jakarta EE meets AI
ivargrimstad
0
670
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
930

Featured

See All Featured
Designing for Performance
lara
604
68k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Code Reviewing Like a Champion
maltzj
520
39k
Scaling GitHub
holman
458
140k
Rails Girls Zürich Keynote
gr2m
94
13k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
We Have a Design System, Now What?
morganepeng
50
7.2k
Docker and Python
trallard
40
3.1k
Building Applications with DynamoDB
mza
90
6.1k

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