Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Better performance for component-based web apps

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.

43b3d09e5d13d076f5e120383702c04f?s=128

José M. Pérez

November 30, 2018
Tweet

More Decks by José M. Pérez

Other Decks in Technology

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