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
flutterkaigi_2024.pdf
kyoheig3
0
150
Flutterを言い訳にしない！アプリの使い心地改善テクニック5選🔥
kno3a87
1
200
Remix on Hono on Cloudflare Workers
yusukebe
1
300
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
Arm移行タイムアタック
qnighy
0
340
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1k
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
Outline View in SwiftUI
1024jp
1
340
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.3k
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
150

Featured

See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Agile that works and the tools we love
rasmusluckow
327
21k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Faster Mobile Websites
deanohume
305
30k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Ruby is Unlike a Banana
tanoku
97
11k
Unsuck your backbone
ammeep
668
57k
What's in a price? How to price your products and services
michaelherold
243
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
It's Worth the Effort
3n
183
27k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k

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