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

Better performance for component-based web apps

José M. Pérez
November 30, 2018
Technology
0
24

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.

José M. Pérez

November 30, 2018
Tweet

More Decks by José M. Pérez

See All by José M. Pérez
Increase the Performance of your Site with Lazy-Loading and Code-Splitting
jmperez
0
33
Progressive Image Rendering
jmperez
0
31
Progressive image rendering
jmperez
2
1.7k
Progressive image rendering
jmperez
2
1.9k
Loading Images Progressively
jmperez
1
79
Cross platform web development
jmperez
0
260
X-platform web dev in Spotify
jmperez
0
150
Desarrollo Web en Spotify
jmperez
0
1.5k

Other Decks in Technology

See All in Technology
土壌と植物で奏でるアート~農業における新たなパラダイム~
shinrinakamura
0
190
クラウドサイン事業本部 プロダクト組織 紹介資料
bengo4com
0
160
テンションも揚げてこう! Ebitengine開発
lapis2411
0
210
Oracle Cloud Infrastructure：2023年9月度サービス・アップデート
oracle4engineer
PRO
0
140
モチベーションサイクルという観点でQAをしよう
mixi_engineers
PRO
1
150
30点で打席に立つ
konifar
11
4k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
90k
バクラクのAI-OCR機能を支えるアノテーションの仕組み
tomoaki25
2
390
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.6k
DDD e Team Topologies como estes conceitos podem te dar pistas de como montar seus times de engenharia!!!
claudioed
2
330
Swift Package Mangerのバグを直した話
k_koheyi
2
150
LLM 時代におさえておきたい Azure Serverless ファミリーまとめ / serverlessdaystokyo2023-llm-aoai
miyake
5
800

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
56k
Optimizing for Happiness
mojombo
368
67k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
130
9k
Building Your Own Lightsaber
phodgson
97
5.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
15
1.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Unsuck your backbone
ammeep
660
56k
Web Components: a chance to create the future
zenorocha
304
41k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Ruby is Unlike a Banana
tanoku
93
9.9k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Designing for humans not robots
tammielis
246
24k

Transcript

  1. Better performance for
    component-based web apps
    Madrid | November 30 - December 1, 2018
    José M. Pérez - @jmperezperez

    View Slide

  2. What we'll talk about
    What we'll talk about
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  3. What we'll talk about
    What we'll talk about
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
    Modern libraries/frameworks

    View Slide

  4. What we'll talk about
    What we'll talk about
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
    ES6
    Modern libraries/frameworks

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  8. …and survive the
    …and survive the
    JavaScript fatigue
    JavaScript fatigue
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  14. We ❤ modern tools
    We ❤ modern tools
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  15. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  16. Source: The State of Javascript 2018
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  17. Developer
    Developer
    ergonomics
    ergonomics
    User
    User
    experience
    experience
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  18. Do not blame the user
    Do not blame the user
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  22. Welcome to the era
    Welcome to the era
    of
    of

    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  23. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  24. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  25. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  26. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide


  27. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide



  28. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide




  29. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide





  30. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  32. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  33. Application code
    Application code
    Framework code
    Framework code
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  34. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  35. Server-Side Rendering a Slow App
    Server-Side Rendering a Slow App
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  45. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  47. How we used to ensure
    How we used to ensure
    dependencies
    dependencies
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  49. ES6 - import/export
    ES6 - import/export
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  51. Dynamic Loading
    Dynamic Loading
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  53. THIS IS GREAT
    THIS IS GREAT
    Serve the code for the current path
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  55. From this
    From this
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  56. To this
    To this
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  57. Lazy Loading
    Lazy Loading
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
    Viewport

    View Slide

  58. Lazy Loading
    Lazy Loading
    Image
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
    Viewport

    View Slide

  59. Lazy Loading
    Lazy Loading
    Image
    Text with web font
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
    Viewport

    View Slide

  60. Lazy Loading
    Lazy Loading
    Image
    Text with web font
    Other components
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez
    Viewport

    View Slide

  61. THIS IS EVEN GREATER
    THIS IS EVEN GREATER
    Serve the code for the current path
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  63. Polyfill on-demand
    Polyfill on-demand
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  64. Polyfill on-demand
    Polyfill on-demand
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  65. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  66. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  67. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  71. BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  72. Before code-splitting
    Before code-splitting
    styles.css bundle.js
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  74. THIS IS AMAZING
    THIS IS AMAZING
    Serve the code for the current
    screen and browser
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  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

    View Slide

  76. Wrapping up
    Wrapping up
    BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

    View Slide

  77. JS fatigue
    JS fatigue

    View Slide

  78. JS fatigue
    JS fatigue

    View Slide

  79. JS fatigue
    JS fatigue
    These are tools. Add them
    These are tools. Add them
    to your toolbox.
    to your toolbox.

    View Slide

  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

    View Slide

  81. Thanks!
    Thanks!
    @jmperezperez

    View Slide