SSR, SPAs and PWAs

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!).

3179e6bb62dc91d29bb906ffef4fa2d4?s=128

Marco Otte-Witte

October 19, 2018
Tweet

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. None
  56. • serve the app's main UI shell from a service

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

    worker • fill in content dynamically once the app starts
  58. None
  59. GET /

  60. None
  61. GET /app.js

  62. None
  63. GET /

  64. GET /

  65. None
  66. GET /app.js

  67. None
  68. • some visual content available immediately

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

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

    • requires JS to work at all
  71. Choose one!

  72. Choose one all!

  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. • running the same SPA in the browser and on

    the server
  86. • running the same SPA in the browser and on

    the server • no conceptual difference between browser and server
  87. • running the same SPA in the browser and on

    the server • no conceptual difference between browser and server • valuable initial response
  88. • no browser APIs in Node!

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

  90. https://breethe.app

  91. None
  92. None
  93. None
  94. GET /

  95. None
  96. GET /app.js

  97. None
  98. None
  99. GET /api/locations?search=Nürnberg

  100. None
  101. GET /api/measurements?location=1

  102. None
  103. None
  104. GET /locations/1

  105. None
  106. Progressive Enhancement

  107. None
  108. GET /locations/1

  109. None
  110. GET /

  111. None
  112. None
  113. GET /

  114. None
  115. GET /app.js

  116. None
  117. Running a JavaScript app without JavaScript

  118. None
  119. GET /

  120. None
  121. None
  122. GET /search?term=Nürnberg

  123. None
  124. <form onsubmit={{action submitSearch}} action="/search" method="get">

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

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

  127. None
  128. GET /

  129. None
  130. GET /search/nearby

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

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

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

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

    on the client and degrades gracefully
  136. Source: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization/

  137. SSR content + baseline functionality

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

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

    functionality PWA app characteristics + offline support
  140. https://github.com/simplabs/breethe-client

  141. None
  142. None
  143. ember install fastboot

  144. None
  145. Thanks

  146. Q&A

  147. simplabs.com @simplabs