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
110
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
670

Other Decks in Programming

See All in Programming
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
Honoの来た道とこれから
yusukebe
19
3k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
VR HMDとしてのVision Pro＋ゲーム開発について
yasei_no_otoko
0
100
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
150
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
Macとオーディオ再生 2024/11/02
yusukeito
0
190
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
Identifying User Idenity
moro
6
7.9k

Featured

See All Featured
Designing for Performance
lara
604
68k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Automating Front-end Workflow
addyosmani
1365
200k
Practical Orchestrator
shlominoach
186
10k
Raft: Consensus for Rubyists
vanstee
136
6.6k
BBQ
matthewcrist
85
9.3k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Producing Creativity
orderedlist
PRO
341
39k
Building Flexible Design Systems
yeseniaperezcruz
327
38k

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