Better performance for component-based web apps

Modern tools are fun to use and they are useful to create websites with great performance.

This talk aims to show how to apply ideas like code-splitting, lazy-loading and CSS-in-JS (aka JSS) to websites built with components. This represents a superior way of delivering to the user only the assets that are needed and it's essential for creating fast loading sites.

We might be suffering from JS fatigue, trying to keep up to date with the latest and greatest. We don't need to rush, just understand what these techniques do and how they fit in the bigger picture.

Transcript

1. Better performance for component-based web apps Madrid | November 30 - December 1, 2018 José M. Pérez - @jmperezperez
2. What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
3. What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Modern libraries/frameworks
4. What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez ES6 Modern libraries/frameworks
5. What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Code Splitting Modern libraries/frameworks ES6
6. What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez CSS-in-JS Modern libraries/frameworks ES6 Code Splitting
7. What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Combine all to build sites with great performance Modern libraries/frameworks ES6 Code Splitting CSS-in-JS
8. …and survive the …and survive the JavaScript fatigue JavaScript fatigue BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
9. Who I am Who I am BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Senior Software Engineer at Spotify Google Developer Expert in Web Technologies
10. Who I am Who I am BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Senior Software Engineer at Spotify Google Developer Expert in Web Technologies
11. Who I am Who I am BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Senior Software Engineer at Spotify Google Developer Expert in Web Technologies
12. Who I am Who I am BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Senior Software Engineer at Spotify Google Developer Expert in Web Technologies
13. Who I am Who I am BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Senior Software Engineer at Spotify Google Developer Expert in Web Technologies I build things using web
14. We ❤ modern tools We ❤ modern tools BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
15. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
16. Source: The State of Javascript 2018 BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
17. Developer Developer ergonomics ergonomics User User experience experience BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
18. Do not blame the user Do not blame the user BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
19. Do not blame the user Do not blame the user Low end device? Might not afford new one BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
20. Do not blame the user Do not blame the user Low end device? Might not afford new one Old browser? Might not have permissions to install new one BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
21. Do not blame the user Do not blame the user Low end device? Might not afford new one Old browser? Might not have permissions to install new one Slow network? On a plane, subway, public wifi, limited data plan... BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
22. Welcome to the era Welcome to the era of of <components /> <components /> BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
23. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
24. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
25. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
26. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
27. <Router> BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
28. <Router> <TabBar> BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
29. <Router> <TabBar> <LazyLoad(CoverArt)> BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
30. <Router> <TabBar> <LazyLoad(CoverArt)> <Connect(NowPlayingBar)> BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
31. Serving a large bundle in Serving a large bundle in the old days the old days BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
32. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
33. Application code Application code Framework code Framework code BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
34. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
35. Server-Side Rendering a Slow App Server-Side Rendering a Slow App BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
36. Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Client-Side Rendering time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
37. Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Client-Side Rendering Waiting for server response time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
38. Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Client-Side Rendering Waiting for server response Blank page time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
39. Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
40. Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Ready
41. Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Waiting for server response Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Ready
42. Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Waiting for server response Visible, non-interactive page Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Ready
43. Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Waiting for server response Visible, non-interactive page Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Ready Execute JS
44. Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Waiting for server response Visible, non-interactive page Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Ready Ready Execute JS
45. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
46. Solution Solution Serve to the user Serve to the user just what is needed just what is needed BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
47. How we used to ensure How we used to ensure dependencies dependencies BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
48. We didn't have a way* to We didn't have a way* to define dependencies define dependencies * With the exception of YUI Loader, Require.JS and custom tools BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
49. ES6 - import/export ES6 - import/export BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
50. Modelling a web site has Modelling a web site has pages as dependencies pages as dependencies BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
51. Dynamic Loading Dynamic Loading BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
52. Code Splitting at Path Level Code Splitting at Path Level bundle.js bundle.js hom e.js about.js contact.js BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
53. THIS IS GREAT THIS IS GREAT Serve the code for the current path BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
54. More importantly More importantly Adding features has no cost in Adding features has no cost in payload / rendering time payload / rendering time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
55. From this From this BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
56. To this To this BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
57. Lazy Loading Lazy Loading BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Viewport
58. Lazy Loading Lazy Loading Image BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Viewport
59. Lazy Loading Lazy Loading Image Text with web font BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Viewport
60. Lazy Loading Lazy Loading Image Text with web font Other components BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Viewport
61. THIS IS EVEN GREATER THIS IS EVEN GREATER Serve the code for the current path BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
62. THIS IS EVEN GREATER THIS IS EVEN GREATER Serve the code for the current path screen BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
63. Polyfill on-demand Polyfill on-demand BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
64. Polyfill on-demand Polyfill on-demand BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
65. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
66. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
67. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
68. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez THIS IS EVEN MORE THIS IS EVEN MORE GREATER GREATER Serve the code for the current screen
69. THIS IS EVEN MORE THIS IS EVEN MORE GREATER GREATER Serve the code for the current screen and browser BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
70. CSS-in-JS CSS-in-JS Breaking down the Breaking down the styles monolith styles monolith BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
71. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
72. Before code-splitting Before code-splitting styles.css bundle.js BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
73. Code splitting + CSS-in-JS Code splitting + CSS-in-JS bundle.js account.js about.js blog.js JS code CSS code within JS BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
74. THIS IS AMAZING THIS IS AMAZING Serve the code for the current screen and browser BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
75. THIS IS AMAZING THIS IS AMAZING Serve the code Break the behemoth of JS and CSS for the current screen and browser BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
76. Wrapping up Wrapping up BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
77. JS fatigue JS fatigue
78. JS fatigue JS fatigue
79. JS fatigue JS fatigue These are tools. Add them These are tools. Add them to your toolbox. to your toolbox.
80. JS fatigue JS fatigue These are tools. Add them These are tools. Add them to your toolbox. to your toolbox. Look at the bigger picture Look at the bigger picture
81. Thanks! Thanks! @jmperezperez