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

Did we(b development) lose the right direction?

Did we(b development) lose the right direction?

stefan judis

March 05, 2020
Tweet

More Decks by stefan judis

Other Decks in Programming

Transcript

  1. @stefanjudis
    Did we(b development)
    lose the right direction?

    View full-size slide

  2. This is a talk about
    general "best practices"...

    View full-size slide

  3. This is a rant about
    general "best practices"...

    View full-size slide

  4. @stefanjudis
    news.stefanjudis.com
    Heyo,
    I'm Stefan!

    View full-size slide

  5. The state of web development
    ten years ago...

    View full-size slide

  6. 4waisenkinder.de

    View full-size slide

  7. I love technology and I
    love writing JavaScript!

    View full-size slide

  8. stefanjudis.com
    2017 - 2020

    View full-size slide

  9. Chrome – Cable iPhone 6 – 3G

    View full-size slide

  10. Usually, any score above a 90
    gets you in the top ~5% of
    performant websites.
    Lighthouse documentation

    View full-size slide

  11. HTTP/2
    Everything's compressed and minified!

    View full-size slide

  12. github.com/webpack-contrib/webpack-bundle-analyzer
    Code
    splitting

    View full-size slide

  13. www.fmboschetto.it

    View full-size slide

  14. webpagetest.org/video/

    View full-size slide

  15. webpagetest.org/video/view.php?id=200302_2df0157ba9ea8586f5d987f7a1c3d52ed5e2a874
    Chrome – Cable

    View full-size slide

  16. Stefan, you just
    messed it up!

    View full-size slide

  17. Maybe, but how can it
    be so easy to mess up?

    View full-size slide

  18. stefanjudis.com
    fmboschetto.it 4waisenkinder.de
    Overall page weight 340KB / 940KB
    265KB / 284KB 159KB / 300KB
    index.html 108KB / 340KB
    8KB / 32KB 6KB / 18KB
    CSS resources 1
    0 1
    Images resources 0*
    32
    (246KB / 254KB)
    0*
    Speed Index (LTE) 1.4s / 0.8s 2.1s / 0.7s 2.3s / 1.5s
    JS resources 22
    (183KB / 512KB)
    6
    (68KB / 177KB)
    2
    (2KB / 6KB)
    *ignoring tracking pixel
    Lighthouse Perf Score 100 97 90

    View full-size slide

  19. 10% - First contentful paint
    10% - Time to interactive
    10% - Speed Index
    25% - Largest contentful paint
    30% - Total blocking time
    15% - Cumulative layout shift
    JavaScript blocks
    the main-thread!

    View full-size slide

  20. paulirish.github.io/lh-scorecalc/
    calibreapp.com/blog/lighthouse-changes-scoring-algorithm

    View full-size slide

  21. www.youtube.com/watch?v=Lx1cYJAVnzA

    View full-size slide

  22. timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/
    Scripting related CPU time (in milliseconds) for mobile devices in percentiles
    Median

    View full-size slide

  23. medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

    View full-size slide

  24. A 150KB image is not
    comparable to 150KB of
    gzipped JavaScript!

    View full-size slide

  25. Page weight is not
    equal page weight!

    View full-size slide

  26. That's a 340KB index file for
    roughly 400 words, Stefan?

    View full-size slide

  27. "It's great because it's fast! And
    it's still lighter than the rest of
    the internet..."

    View full-size slide

  28. "It's great because it's still lighter than the
    rest of the internet..."
    "I'm really digging
    the tech-stack!"

    View full-size slide

  29. That's a 340KB index file for
    roughly 400 words, Stefan?
    window.__DATA__=function(
    e,t,n,o,i,/* ... */
    ){ return /* ... */ )

    View full-size slide

  30. I decided to preload/inline
    22 articles ...
    (at an average session length of 1.17 pages)

    View full-size slide

  31. ... for "better
    performance".

    View full-size slide

  32. Making a very fast
    website is extremely hard!

    View full-size slide

  33. Making a very fast
    website is extremely hard!
    (But is it really?)

    View full-size slide

  34. twitter.com/philhawksworth/status/1038440732741259265

    View full-size slide

  35. www.11ty.dev/docs/performance-leaderboard/

    View full-size slide

  36. www.youtube.com/watch?v=88K8oO_dYbI

    View full-size slide

  37. www.youtube.com/watch?v=88K8oO_dYbI
    Today, I 100% disagree
    with "past me", ...

    View full-size slide

  38. www.youtube.com/watch?v=88K8oO_dYbI
    ... because where is the user's
    benefit from such overhead?

    View full-size slide

  39. A common "best practice"
    Universal JavaScript apps for
    content-sites

    View full-size slide














  40. Hello world!




    View full-size slide














  41. Hello world!



    window.__data__ = { greeting: "Hello world!" }


    View full-size slide














  42. Hello world!


    window.__data__ = { greeting: "Hello world!" }


    The same code runs on the
    server and on the client!

    View full-size slide

  43. Your content
    in HTML
    The same content
    in JavaScript

    View full-size slide

  44. Is this really
    the best way for the user?

    View full-size slide

  45. "This architecture o!ers doors
    to progressive enhancement!"

    View full-size slide

  46. Base functionality Enhanced experience
    If the enhancement fails, it still works!

    View full-size slide

  47. Updated
    search results
    Updated URL
    Submittable
    form

    View full-size slide

  48. Buzzfeed
    twitter.com/philhawksworth/status/990890920672456707

    View full-size slide

  49. "We don't have any non-JavaScript users"
    No, all your users are non-JS while
    they're downloading your JS.
    Jake Archibald

    View full-size slide

  50. github.com
    POST github.com/stefanjudis/test/issue_comments
    handles a form and AJAX submit
    Five "old school"
    HTML links

    View full-size slide

  51. I’m happy with GitHub's experience.
    A good site "just works".™

    View full-size slide

  52. What's the enhancement
    in the wild, though?

    View full-size slide

  53. reactjs.org with JavaScript reactjs.org without JavaScript
    433KB / 1.1MB 49KB / 175KB
    Initial weight
    547KB / 2.3MB 100KB / 1.0MB
    Weight after
    4 navigations

    View full-size slide

  54. I'm guilty of that, too!

    View full-size slide

  55. Does this architecture
    improve user experience?

    View full-size slide

  56. You get 6MB for 2Euros but
    you have only 24h to
    use them! Right...

    View full-size slide

  57. httparchive.org/reports/state-of-the-web

    View full-size slide

  58. whatdoesmysitecost.com

    View full-size slide

  59. httparchive.org/reports/state-of-the-web
    We ship more data for
    the same experience...

    View full-size slide

  60. Maybe app frameworks
    are for apps after all?

    View full-size slide

  61. 5.2MB / 17MB 25KB / 40KB

    View full-size slide

  62. The web is not as
    cutting-edge as it seems...

    View full-size slide

  63. ... boring is beautiful!
    (and fast)

    View full-size slide

  64. "Benefits" of
    client-side routing

    View full-size slide

  65. Developers are "allowed"
    to re-implement
    an accessible navigation

    View full-size slide

  66. www.gatsbyjs.org/blog/2020-02-10-accessible-client-side-routing-improvements/

    View full-size slide

  67. github.com/sdras/page-transitions-travelapp

    View full-size slide

  68. async function navigateToSettingsPage() {
    await document.documentTransition.prepare({
    rootTransition: 'cover-left',
    });
    updateDOMForSettingsPage();
    await document.documentTransition.start();
    }
    developer.chrome.com/blog/shared-element-transitions-for-spas/
    chrome://flags/#document-transition

    View full-size slide

  69. There’s a chance I believe
    client side routing on the web
    is usually not preferred.
    Which is ironic.
    Ryan Florence (co-author React-Router)
    twitter.com/ryanflorence/status/1186515553285857280

    View full-size slide

  70. vuejs.org/v2/guide/installation.html

    View full-size slide

  71. vuejs.org/v2/guide/installation.html

    View full-size slide

  72. We use too much
    JavaScript!

    View full-size slide

  73. kit.svelte.dev
    astro.build

    View full-size slide

  74. The modern web seems to focus
    an awful lot on JavaScript.
    We don’t think it has to [...].
    astro.build

    View full-size slide

  75. Your content
    in HTML
    Multi-page App
    (MPA)
    The same content
    in JavaScript
    Single-page App
    (SPA)

    View full-size slide

  76. Your content
    in HTML
    Multi-page App
    (MPA)
    The same content
    in JavaScript
    Single-page App
    (SPA)

    View full-size slide

  77. jasonformat.com/islands-architecture/

    View full-size slide

  78. /# Opt in to load client-side JavaScript *%

    View full-size slide

  79. vercel.com
    reacts.org

    View full-size slide

  80. Have Single-Page Apps Ruined the Web?
    #transitionalApps

    View full-size slide

  81. A great site just works.™

    View full-size slide

  82. HTML CSS JavaScript
    The foundation of the web

    View full-size slide

  83. A great site doesn't have to be
    built with React/Vue/Angular/...

    View full-size slide

  84. I need a new site what
    should I use?
    You should use Framework X
    with SSR, an offline strategy and
    it has to run "on the edge"!
    It depends...
    What's your use case?

    View full-size slide

  85. A great site can be built
    with React, Vue, Angular...

    View full-size slide

  86. A great site is
    accessible, fast, secure, ...

    View full-size slide

  87. It's "just" HTML...

    View full-size slide

  88. HTML defines
    over 100 elements

    View full-size slide

  89. HTML defines
    22 input types

    View full-size slide

  90. css-tricks.com/a-complete-guide-to-links-and-buttons/
    +4000 words!

    View full-size slide


  91. Twitter
    <(div>

    View full-size slide

  92. www.htmhell.dev

    View full-size slide

  93. ... it's not "easy".

    View full-size slide

  94. webaim.org/projects/million/

    View full-size slide

  95. webaim.org/projects/million/

    View full-size slide

  96. webaim.org/projects/million/

    View full-size slide

  97. thenextweb.com/contributors/2018/03/10/protect-website-cryptojacking-attacks/

    View full-size slide

  98. Content-Security-Policy: default-src 'self'; script-src 'self' just-
    comments.com www.google-analytics.com production-
    assets.codepen.io storage.googleapis.com; style-src 'self' 'unsafe-
    inline'; img-src 'self' data: images.contentful.com images.ctfassets.net
    www.gravatar.com www.google-analytics.com just-comments.com;
    font-src 'self' data:; connect-src 'self' cdn.contentful.com
    images.contentful.com videos.contentful.com images.ctfassets.net
    videos.ctfassets.net service.just-comments.com www.google-
    analytics.com; media-src 'self' videos.contentful.com
    videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame-
    ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src
    'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https://
    stefanjudis.report-uri.com/r/d/csp/reportOnly

    View full-size slide

  99. USE CSP DON'T USE CSP
    89%
    11%

    View full-size slide

  100. httparchive.org/reports/state-of-the-web

    View full-size slide

  101. The web lost quality...

    View full-size slide

  102. ... but at least Frontend
    developers got more productive!

    View full-size slide

  103. exports.sayHello = async (event) =" {
    return 'Hello from Lambda!';
    };

    View full-size slide

  104. exports.sayHello = async (event) =" {
    return {
    statusCode: 200,
    body: JSON.stringify({"msg": "Hello from Lambda!"})
    };
    };

    View full-size slide

  105. The options are limitless to build a product quickly!

    View full-size slide

  106. Hello world!
    2010
    10KB / 50KB
    Hello world!
    2020
    40KB / 130KB
    Complexity

    View full-size slide

  107. I just added two helpers
    to tiny-helpers.dev.
    The site is great, but that
    I had to download 700MB
    of Node.js stuff is
    brutal. :)

    View full-size slide

  108. A text editor
    A text editor, Node.js, npm, framework knowledge, …

    View full-size slide

  109. I’ve been building on the web for 15+
    years in some capacity,
    and it has never been
    so easy to build complex apps.
    Josh Comeau
    100% agree!
    How many sites need to be complex apps, though?

    View full-size slide

  110. Where are we going
    with this trend?

    View full-size slide

  111. HTML CSS JavaScript
    React Vue Angular Svelte
    webpack Rollup Parcel
    AWS GCloud Netlify Vercel Heroku
    *
    * a very incomplete list

    View full-size slide

  112. Complexity rocks!
    (but what for?)

    View full-size slide

  113. twitter.com/_developit/status/1214258470226190350

    View full-size slide

  114. (function() {
    const fakeButton = document.querySelector('[data-menu-button]');
    const menu = document.querySelector('[data-menu]');
    const toggleMenuButton = document.createElement('button');
    toggleMenuButton.textContent = fakeButton.textContent;
    toggleMenuButton.setAttribute('aria-expanded', false);
    toggleMenuButton.setAttribute('aria-controls', 'menu');
    toggleMenuButton.classList.add('nav__toggle');
    fakeButton.parentNode.replaceChild(toggleMenuButton, fakeButton);
    toggleMenuButton.addEventListener('click', function() {
    let expanded = this.getAttribute('aria-expanded') === 'true' || false;
    this.setAttribute('aria-expanded', !expanded);
    menu.hidden = !menu.hidden;
    });
    menu.hidden = true;
    })()
    justmarkup.com/articles/2019-12-04-hamburger-menu/
    16 lines of hand-written JavaScript

    View full-size slide

  115. Maybe we'll have good
    enough abstractions one
    day, but today…

    View full-size slide

  116. … you still have to know
    web fundamentals to create
    the best user experience.

    View full-size slide

  117. You're shaping tomorrow's job
    market based on the technology
    choices you make today.
    Henrik Joreteg

    View full-size slide

  118. Your job as a web developer
    is to build beautiful
    experiences!

    View full-size slide

  119. Your job as a web developer is to build beautiful experiences!
    Your job as a developer is to decide, to
    decide what tools to use, to decide what
    frameworks to use, to decide what to
    prioritize, to decide what is the best way
    to maintain a project.
    Michael Scharnagl

    View full-size slide

  120. Chatted with someone who’s been working at
    a company as a front-end developer for 3
    years. Their friend asked them to help build
    a website, but they had to decline.
    They didn’t know how.
    Chris Coyier
    (css-tricks.com)

    View full-size slide

  121. HTML CSS JavaScript
    React Vue Angular Svelte
    webpack Rollup Parcel
    AWS GCloud Netlify Vercel Heroku
    *
    * a very incomplete list

    View full-size slide

  122. css-tricks.com/the-great-divide/

    View full-size slide

  123. css-tricks.com/the-great-divide/

    View full-size slide

  124. css-tricks.com/the-great-divide/

    View full-size slide

  125. It's time for our industry to
    realize the title "frontend
    developer" is obsolete.
    Benjamin De Cock – @bdc

    View full-size slide

  126. Developers and software
    engineers put their job
    satisfaction above their
    users or customers.

    View full-size slide

  127. Your users don't care
    about your technical
    implementation.

    View full-size slide

  128. DX
    (developer experience)
    UX
    (user experience)

    View full-size slide

  129. DX
    (developer experience)
    UX
    (user experience)

    View full-size slide

  130. I love shiny tools and I
    love writing JavaScript...

    View full-size slide

  131. ... but maybe we should take a step back?
    And consider the right tools
    for the best user experience?

    View full-size slide

  132. 2020+
    2017 - 2020

    View full-size slide

  133. 2020+
    Reduction of overall
    page weight by 64%.

    View full-size slide

  134. 2020+
    Reduction of build time
    from 4min to 40s.

    View full-size slide

  135. 2020+
    No JavaScript build
    pipeline leading
    to reduced complexity.

    View full-size slide

  136. 2020+
    No JavaScript build
    pipeline leading
    to reduced complexity.

    View full-size slide

  137. 2020+
    A green
    lighthouse score.

    View full-size slide

  138. 2020+
    A site with a better
    user experience.

    View full-size slide

  139. Is a JavaScript-driven
    stack really that bad?

    View full-size slide

  140. Not at all,
    use whatever makes you happy!

    View full-size slide

  141. Every technology
    decision has tradeo!s.
    Kevlin Henney

    View full-size slide

  142. But maybe we should focus more
    on building sites that just work...
    (And worry less about the technology powering them)

    View full-size slide

  143. Slides
    my-links.online/did-we-lose-direction
    Yes! I own that domain! !

    View full-size slide

  144. @stefanjudis
    www.stefanjudis.com
    newsletter.stefanjudis.com
    Thanks.

    View full-size slide