$30 off During Our Annual Pro Sale. View Details »

The Lean Web

The Lean Web

The web is a bloated, over-engineered mess. The Lean Web is a set of principles for a simpler, faster world-wide web.

Chris Ferdinandi

September 17, 2019
Tweet

More Decks by Chris Ferdinandi

Other Decks in Technology

Transcript

  1. @ChrisFerdinandi GoMakeThings.com
    A simpler, faster world-wide web
    THE LEAN WEB

    View Slide

  2. MESS
    The web is a

    View Slide

  3. fix it
    How to

    View Slide

  4. View Slide

  5. Chris Ferdinandi
    GoMakeThings.com

    View Slide

  6. View Slide

  7. https://vanillajsguides.com

    View Slide

  8. Vanilla JS Academy
    https://vanillajsacademy.com

    View Slide

  9. View Slide

  10. View Slide

  11. Started from the bottom,
    now we here

    View Slide

  12. HTML CSS WordPress

    View Slide

  13. View Slide

  14. =>

    View Slide

  15. powerful
    native features
    ease of use
    the sweet spot

    View Slide

  16. View Slide

  17. View Slide

  18. “My biggest challenge
    is keeping up.

    View Slide

  19. A push for simplicity

    View Slide

  20. Is there a conference for web
    developers that specifically
    caters to “lean web” (don’t use
    JS if not necessary etc.)?
    — Thomas Fuchs
    https://twitter.com/thomasfuchs/status/925341886944038914

    View Slide

  21. Start End
    1
    Modern best practices
    (and why they’re bad)
    New best practices
    3
    How we got here
    2

    View Slide

  22. Modern Best Practices
    (and why they’re bad)
    1

    View Slide

  23. View Slide

  24. Modern Best Practice
    JavaScript Frameworks

    View Slide

  25. View Slide

  26. View Slide

  27. var data = {
    todos: [
    {
    item: 'Adopt a puppy',
    completed: true
    },
    {
    item: 'Buy dog food and a dog bed',
    completed: false
    }
    ],
    username: 'Chris'
    };

    View Slide

  28. View Slide

  29. View Slide

  30. if (data.todos.length > 0) {
    // create list items
    } else {
    return 'You don\'t have any todos yet.
    Please add one.'
    }

    View Slide

  31. Fewer Bugs

    View Slide

  32. View Slide

  33. Modern Web Problem
    Performance

    View Slide

  34. JavaScript at Scale

    View Slide

  35. Fewer Bugs

    View Slide

  36. Loading…

    View Slide

  37. https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

    View Slide

  38. JavaScript blocks rendering

    View Slide

  39. Which has a better 

    First Meaningful Paint time?
    ① a raw 8.5MB HTML file with the
    full text of every single one of my
    27,506 tweets
    ② a client rendered React site with
    exactly one tweet on it
    https://twitter.com/zachleat/status/1169998370041208832

    View Slide

  40. https://twitter.com/zachleat/status/1169998370041208832
    (Spoiler: @____lighthouse
    reports 8.5MB of HTML wins
    by about 200ms)
    — Zach Leatherman

    View Slide

  41. Frameworks are
    really bad
    for performance

    View Slide

  42. https://css-tricks.com/radeventlistener-a-tale-of-client-side-framework-performance/

    View Slide

  43. Modern Best Practice
    Package Managers & Module Bundlers

    View Slide

  44. View Slide

  45. Dependency Management

    View Slide

  46. Tree Shaking

    View Slide

  47. Modern Web Problem
    High Setup & Maintenance Cost

    View Slide

  48. View Slide

  49. View Slide

  50. npm install | npm run

    View Slide

  51. https://twitter.com/sodevious/status/1126300690530357253
    ah webpack, javascript ––
    turning a 1 hour project setup
    into an 8 hour affair
    — Nicole Dominguez

    View Slide

  52. Modern Best Practice
    Everything-in-JS

    View Slide

  53. JSS
    Team-Based Code

    View Slide

  54. .callout {
    background-color: slategray;
    font-size: 2em;
    };

    Hi there!

    View Slide

  55. var callout = {
    backgroundColor: 'slategray',
    fontSize: '2em'
    };

    Hi there!

    View Slide


  56. Hi there!

    View Slide

  57. import React, { Component } from 'react';
    import Button from ‘./Button';
    class DangerButton extends Component {
    render() {
    return ;
    }
    }
    export default DangerButton;

    View Slide


  58. Click Me

    View Slide

  59. Modern Web Problem
    Gatekeeping

    View Slide

  60. Here’s a straw-man composite from
    several recent conversations: These
    tools let us move faster. Because we
    can iterate faster we’re delivering
    better experiences.
    — Alex Russell
    https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/

    View Slide

  61. Complex tools create
    barriers to entry

    View Slide

  62. https://rianrietveld.com/2018/10/09/i-have-resigned-the-wordpress-accessibility-team/

    View Slide

  63. 329
    page accessibility audit
    https://wpcampus.org/2019/05/gutenberg-audit-results/

    View Slide

  64. 91
    accessibility-related bugs
    https://wpcampus.org/2019/05/gutenberg-audit-results/

    View Slide

  65. Here’s a straw-man composite from
    several recent conversations: These
    tools let us move faster. Because we
    can iterate faster we’re delivering
    better experiences.
    — Alex Russell
    https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/

    View Slide

  66. Modern Best Practice
    Single Page Apps (SPAs)

    View Slide

  67. View Slide

  68. View Slide

  69. A Vicious Circle

    View Slide

  70. View Slide

  71. Modern Web Problem
    Fragility

    View Slide

  72. View Slide

  73. People don’t (usually) browse the web
    with JS disabled

    View Slide

  74. https://www.inc.com/jason-aten/cloudflare-outage-takes-down-internet-for-second-time-in-a-week-heres-how-companys-ceo-responded.html

    View Slide

  75. Firewalls &
    Ad Blockers

    View Slide

  76. Files
    Timeout

    View Slide

  77. 13 million
    requests for JavaScript timeout
    on Buzzfeed per month
    Ian Feather via https://twitter.com/philhawksworth/status/990890920672456707

    View Slide

  78. Lost Connectivity

    View Slide

  79. Bugs

    View Slide



  80. View Slide

  81. .hero {
    bg-color: #f7f7f7;
    width: 100%;
    }

    View Slide

  82. var doubleIt = function (num) {
    return nmu * 2;
    };

    View Slide

  83. View Slide

  84. How did we get here?
    2

    View Slide

  85. View Slide

  86. View Slide

  87. View Slide

  88. The Web Platform

    View Slide

  89. View Slide

  90. View Slide

  91. ===

    View Slide

  92. View Slide

  93. “I build apps, not websites.

    View Slide

  94. “Vanilla JS doesn’t scale.

    View Slide

  95. “CSS isn’t a real
    programming language.

    View Slide

  96. !==

    View Slide

  97. Source: www.lukew.com

    View Slide

  98. =*(

    View Slide

  99. Lean Web Principles
    3

    View Slide

  100. Become a
    developer dinosaur

    View Slide

  101. View Slide

  102. Lean Web Principle
    Embrace the Platform

    View Slide

  103. View Slide

  104. // jQuery
    $('#app').addClass('awesome');
    // Vanilla JS
    document.querySelector('#app')
    .classList.add('awesome');

    View Slide

  105. // JSX
    var name = 'Josh Perez';
    var element = Hello, {name};
    ReactDOM.render(
    element,
    document.getElementById('root')
    );

    View Slide

  106. // Vanilla JS
    var name = 'Josh Perez';
    var element = `Hello, ${name}`;
    document.getElementById('root')
    .innerHTML = element;

    View Slide

  107. HTML > JavaScript

    View Slide

  108. View Slide

  109. View Slide

  110. CSS > JavaScript

    View Slide

  111. https://daneden.github.io/animate.css/

    View Slide

  112. https://github.com/cferdinandi/smooth-scroll

    View Slide

  113. View Slide

  114. View Slide

  115. Homepage
    Login Dashboard Account

    View Slide

  116. You still render
    HTML with JavaScript
    (but just the dynamic parts)

    View Slide

  117. View Slide

  118. View Slide

  119. The JAM Stack
    JavaScript, APIs, & prerender Markup

    View Slide

  120. View Slide

  121. View Slide

  122. View Slide

  123. What about
    subsequent page loads?

    View Slide

  124. Service Workers

    View Slide

  125. View Slide

  126. Lean Web Principle
    Small & Modular

    View Slide

  127. View Slide

  128. View Slide

  129. https://api.jqueryui.com/tabs/

    View Slide

  130. https://github.com/cferdinandi/tabby

    View Slide

  131. View Slide

  132. https://viperhtml.js.org/hyperhtml/documentation/

    View Slide

  133. https://preactjs.com/

    View Slide

  134. https://svelte.dev/

    View Slide

  135. var callout = {
    backgroundColor: 'slategray',
    fontSize: '2em'
    };

    Hi there!

    View Slide


  136. Hi there!

    View Slide

  137. Object-Oriented CSS
    Legos for front end developers

    View Slide

  138. .bg-gray {
    background-color: slategray;
    };
    .text-large {
    font-size: 2em;
    }

    Hi there!

    View Slide

  139. https://www.slideshare.net/stubbornella/object-oriented-css

    View Slide

  140. Lean Web Principle
    The Web is for Everyone

    View Slide

  141. The modern web
    is doesn’t work
    for everyone.

    View Slide

  142. View Slide

  143. Polyfills

    View Slide

  144. if (!Array.prototype.forEach) {
    Array.prototype.forEach =
    function (callback, thisArg) {
    thisArg = thisArg || window;
    for (var i = 0; i < this.length; i++) {
    callback.call(thisArg, this[i], i, this);
    }
    };
    }

    View Slide

  145. if (!Array.prototype.forEach) {
    Array.prototype.forEach =
    function (callback, thisArg) {
    thisArg = thisArg || window;
    for (var i = 0; i < this.length; i++) {
    callback.call(thisArg, this[i], i, this);
    }
    };
    }

    View Slide

  146. if (!Array.prototype.forEach) {
    Array.prototype.forEach =
    function (callback, thisArg) {
    thisArg = thisArg || window;
    for (var i = 0; i < this.length; i++) {
    callback.call(thisArg, this[i], i, this);
    }
    };
    }

    View Slide

  147. https://polyfill.io

    View Slide

  148. Build in layers
    (Progressive Enhancement)

    View Slide

  149. My Latest Projects on GitHub
    • Smooth Scroll
    • Reef
    • AtomicJS
    • Bouncer

    View Slide

  150. View my projects on GitHub

    View Slide

  151. My Latest Projects on GitHub
    • Smooth Scroll
    • Reef
    • AtomicJS
    • Bouncer

    View Slide

  152. View my projects on GitHub

    View Slide

  153. View Slide

  154. The web is
    inclusive
    out-of-the-box

    View Slide

  155. https://webaim.org/projects/million/

    View Slide

  156. https://a11yproject.com/

    View Slide

  157. Do any companies actually
    use Lean Web principles?
    (yes they do!)

    View Slide

  158. GitHub
    https://githubengineering.com/removing-jquery-from-github-frontend/

    View Slide

  159. Build websites like its 2005.
    — Keith Cirkel

    View Slide

  160. Netflix
    https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

    View Slide

  161. Basecamp & Hey
    https://twitter.com/sstephenson/status/1272608117604397063

    View Slide

  162. Wrapping Up
    4

    View Slide

  163. 1. Embrace the Platform
    2. Small & Modular
    3. The Web is for Everyone
    Lean Web Principles

    View Slide

  164. Become a
    developer dinosaur

    View Slide

  165. View Slide

  166. View Slide