Single Page Applications are awesome … ▪ They provide better UX once loaded ▪ Communication is reduced to deltas ▪ This results in fewer requests and smaller payload ▪ Should your Network die, you still have some content available ▪ They’re super-easy to deploy
Single Page Applications are hard… ▪ The client is in control… but the client starts when everything has been transferred ▪ The client side app has to take care of all the errors and has to be a lot lot smarter ▪ Flaky networks harm the UX ▪ Fallbacks are hard ▪ Bad practices are more seductive ▪ States are hard to share
Client Client Initial request non-content HTML AJAX call via JS content diff SPAs Resource request JavaScript payload Initial AJAX call via JS content payload What is going on here?
domLoading domInteractive domContentLoaded domComplete The DOM is getting parsed DOM is parsed and ready to work on The document is loaded (wo stylesheets, images) All sub resources are loaded
Tree Shaking ▪ This new syntax allows tools to do a static code analysis based on the JavaScript AST. ▪ With that, we can exclude functions we simply do not need, reducing our bundle size even more.
Angular Ahead of Time compilation ▪ Faster rendering: With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first. ▪ Fewer asynchronous requests: The compiler inlines external html templates and css style sheets within the application JavaScript, eliminating separate ajax requests for those source files.
Angular Ahead of Time compilation ▪ Smaller Angular framework download size: There’s no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload. ▪ Detect template errors earlier: The AOT compiler detects and reports template binding errors during the build step before users can see them. ▪ Better security: AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks
Server side rendering for SPAs ▪ Thanks to a little technology called Node.js, we are able to render JS on the client and the server ▪ As long as you have valid routes (= URLs), you have the ability to render the state on the server ▪ The first requests bring the rendered state ▪ Then the JavaScript framework kicks in
Bundling … ▪ Why bundle everything, when we just need a few things to start? ▪ Routes deep down in the navigation might not be used at all… ▪ Bundle by routes, split away code that you don’t need at first…
srcset="screenshot-200.png 200w, screenshot-400.png 400w, screenshot-600.png 600w, screenshot-800.png 800w, screenshot-1000.png 1000w, screenshot-1200.png 1200w, screenshot-1400.png 1400w, screenshot-1600.png 1600w” sizes="(min-width: 900px) 50vw, 100vw" alt=”Super screenshot of our product."> A low-res fallback image for browsers that don’t know srcset These sources are available. For each “width unit” there’s a reduced version of our original screenshot The sizes define which source to choose from. Retina screens are also checked
ddprrt
zakky21
azukiazusa1
tanakahisateru
texmeijin
trapezoid
tomokusaba
niftycorp
huffon
misatokii
rdmueller
skanehira
mot_techtalk
jponch
paulrobertlloyd
wjessup
aki_iinuma
marcelosomers
shpigford
jmmastey
addyosmani
stephaniewalter
danielanewman
destraynor
shlominoach