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

Transcript

1. SSR, SPAs and PWAs
   

   View Slide

2. View Slide

3. 
   
   
   
   Space Jam
   <br/>.footer-links {<br/>margin: 5px;<br/>}<br/>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. SSR, SPAs and PWAs
   

   View Slide

10. SSR, SPAs and PWAs
    The Return of Progressive
    Enhancement
    

    View Slide

11. Marco Otte-Witte
    @marcoow
    

    View Slide

12. simplabs.com
    @simplabs
    

    View Slide

13. SSR, SPAs and PWAs
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. Classic (SSR) web sites
    

    View Slide

18. View Slide

19. GET /
    

    View Slide

20. View Slide

21. View Slide

22. GET /?search=Nürnberg
    

    View Slide

23. View Slide

24. GET /locations/1
    

    View Slide

25. View Slide

26. • document is visually complete as received from server
    

    View Slide

27. • document is visually complete as received from server
    • …as well as immediately functional
    

    View Slide

28. • document is visually complete as received from server
    • …as well as immediately functional
    • subsequent page transitions require server roundtrips
    

    View Slide

29. Single Page Apps
    

    View Slide

30. View Slide

31. GET /
    

    View Slide

32. View Slide

33. GET /app.js
    

    View Slide

34. View Slide

35. View Slide

36. GET /api/locations?search=Nürnberg
    

    View Slide

37. View Slide

38. GET /api/measurements?location=1
    

    View Slide

39. View Slide

40. • initial document is essentially useless
    

    View Slide

41. • initial document is essentially useless
    • …until JS loads, app starts and runs completely in the browser
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

45. Source: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization/
    

    View Slide

46. Progressive Web Apps
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. ⚡
    

    View Slide

56. ⚡
    

    View Slide

57. View Slide

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

    View Slide

59. • serve the app's main UI shell from a service worker
    • fill in content dynamically once the app starts
    

    View Slide

60. View Slide

61. GET /
    

    View Slide

62. View Slide

63. GET /app.js
    

    View Slide

64. View Slide

65. GET /
    

    View Slide

66. GET /
    

    View Slide

67. View Slide

68. GET /app.js
    

    View Slide

69. View Slide

70. • some visual content available immediately
    

    View Slide

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

    View Slide

72. • some visual content available immediately
    • application works offline
    • requires JS to work at all
    

    View Slide

73. Choose one!
    

    View Slide

74. Choose one all!
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. View Slide

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

    View Slide

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

    View Slide

89. • running the same SPA in the browser and on the server
    • no conceptual difference between browser and server
    • valuable initial response
    

    View Slide

90. • no browser APIs in Node!
    

    View Slide

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

    View Slide

92. https://breethe.app
    

    View Slide

93. View Slide

94. View Slide

95. View Slide

96. GET /
    

    View Slide

97. View Slide

98. GET /app.js
    

    View Slide

99. View Slide

100. View Slide

101. GET /api/locations?search=Nürnberg
     

     View Slide

102. View Slide

103. GET /api/measurements?location=1
     

     View Slide

104. View Slide

105. View Slide

106. GET /locations/1
     

     View Slide

107. View Slide

108. Progressive
     Enhancement
     

     View Slide

109. View Slide

110. GET /locations/1
     

     View Slide

111. View Slide

112. GET /
     

     View Slide

113. View Slide

114. View Slide

115. GET /
     

     View Slide

116. View Slide

117. GET /app.js
     

     View Slide

118. View Slide

119. Running a JavaScript app
     without JavaScript
     

     View Slide

120. View Slide

121. GET /
     

     View Slide

122. View Slide

123. View Slide

124. GET /search?term=Nürnberg
     

     View Slide

125. View Slide

126. 
     

     View Slide

127. 
     

     View Slide

128. 
     

     View Slide

129. View Slide

130. GET /
     

     View Slide

131. View Slide

132. GET /search/nearby
     

     View Slide

133. View Slide

134. Show nearby locations
     

     View Slide

135. Show nearby locations
     

     View Slide

136. Show nearby locations
     

     View Slide

137. we now have an SPA that does not require JavaScript on the
     client and degrades gracefully
     

     View Slide

138. Source: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization/
     

     View Slide

139. SSR content + baseline functionality
     

     View Slide

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

     View Slide

141. SSR content + baseline functionality
     SPA improved UX & full functionality
     PWA app characteristics + offline support
     

     View Slide

142. https://github.com/simplabs/breethe-client
     

     View Slide

143. View Slide

144. View Slide

145. ember install fastboot
     

     View Slide

146. View Slide

147. Thanks
     

     View Slide

148. Q&A
     

     View Slide

149. simplabs.com
     @simplabs
     

     View Slide