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
470
Feel the Glimmer - ParisJS
marcoow
1
500
Feel the Glimmer - MunichJS 11/17
marcoow
0
130
The JSON:API spec
marcoow
3
1.8k
Leveraging the complete Ember Toolbelt
marcoow
0
340
Feel the Glimmer
marcoow
1
230
Templates and Logic in Ember
marcoow
0
690

Other Decks in Programming

See All in Programming
Amazon S3 NYJavaSIG 2024-12-12
sullis
0
110
【re:Growth 2024】 Aurora DSQL をちゃんと話します！
maroon1st
0
810
Beyond ORM
77web
8
1.2k
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
130
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点

eiganken
1
150
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ！
maroon1st
0
510
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
390
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
350
バグを見つけた？それAppleに直してもらおう！
uetyo
0
180
KubeCon + CloudNativeCon NA 2024 Overview at Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
260
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
960
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
7
1.5k

Featured

See All Featured
Speed Design
sergeychernyshev
25
680
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Adopting Sorbet at Scale
ufuk
73
9.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How STYLIGHT went responsive
nonsquared
96
5.2k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k

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