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.

Df5f3b6aeb1caacc0acabf2cb45264da?s=128

Chris Ferdinandi

September 17, 2019
Tweet

Transcript

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

  2. MESS The web is a

  3. fix it How to

  4. None
  5. Chris Ferdinandi GoMakeThings.com

  6. None
  7. https://vanillajsguides.com

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

  9. None
  10. None
  11. Started from the bottom, now we here

  12. HTML CSS WordPress

  13. None
  14. =>

  15. powerful native features ease of use the sweet spot

  16. None
  17. None
  18. “My biggest challenge is keeping up.

  19. A push for simplicity

  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
  21. Start End 1 Modern best practices (and why they’re bad)

    New best practices 3 How we got here 2
  22. Modern Best Practices (and why they’re bad) 1

  23. None
  24. Modern Best Practice JavaScript Frameworks

  25. None
  26. None
  27. var data = { todos: [ { item: 'Adopt a

    puppy', completed: true }, { item: 'Buy dog food and a dog bed', completed: false } ], username: 'Chris' };
  28. None
  29. None
  30. if (data.todos.length > 0) { // create list items }

    else { return 'You don\'t have any todos yet. Please add one.' }
  31. Fewer Bugs

  32. None
  33. Modern Web Problem Performance

  34. JavaScript at Scale

  35. Fewer Bugs

  36. Loading…

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

  38. JavaScript blocks rendering

  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
  40. https://twitter.com/zachleat/status/1169998370041208832 (Spoiler: @____lighthouse reports 8.5MB of HTML wins by about

    200ms) — Zach Leatherman
  41. Frameworks are really bad for performance

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

  43. Modern Best Practice Package Managers & Module Bundlers

  44. None
  45. Dependency Management

  46. Tree Shaking

  47. Modern Web Problem High Setup & Maintenance Cost

  48. None
  49. None
  50. npm install | npm run

  51. https://twitter.com/sodevious/status/1126300690530357253 ah webpack, javascript –– turning a 1 hour project

    setup into an 8 hour affair — Nicole Dominguez
  52. Modern Best Practice Everything-in-JS

  53. JSS Team-Based Code

  54. .callout { background-color: slategray; font-size: 2em; }; <div class="callout"> Hi

    there! </div>
  55. var callout = { backgroundColor: 'slategray', fontSize: '2em' }; <div

    class={callout}> Hi there! </div>
  56. <div class="jzrps nibae lupp mihax"> Hi there! </div>

  57. import React, { Component } from 'react'; import Button from

    ‘./Button'; class DangerButton extends Component { render() { return <Button color="red" />; } } export default DangerButton;
  58. <button class="jzrps nibae lupp mihax"> Click Me </button> <button class="btn

    btn-red”> Click Me </button>
  59. Modern Web Problem Gatekeeping

  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/
  61. Complex tools create barriers to entry

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

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

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

  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/
  66. Modern Best Practice Single Page Apps (SPAs)

  67. None
  68. None
  69. A Vicious Circle

  70. None
  71. Modern Web Problem Fragility

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

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

  75. Firewalls & Ad Blockers

  76. Files Timeout

  77. 13 million requests for JavaScript timeout on Buzzfeed per month

    Ian Feather via https://twitter.com/philhawksworth/status/990890920672456707
  78. Lost Connectivity

  79. Bugs

  80. <dvi></dvi> <div></div>

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

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

    };
  83. None
  84. How did we get here? 2

  85. None
  86. None
  87. None
  88. The Web Platform

  89. None
  90. None
  91. ===

  92. None
  93. “I build apps, not websites.

  94. “Vanilla JS doesn’t scale.

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

  96. !==

  97. Source: www.lukew.com

  98. =*(

  99. Lean Web Principles 3

  100. Become a developer dinosaur

  101. None
  102. Lean Web Principle Embrace the Platform

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

  105. // JSX var name = 'Josh Perez'; var element =

    <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById('root') );
  106. // Vanilla JS var name = 'Josh Perez'; var element

    = `<h1>Hello, ${name}</h1>`; document.getElementById('root') .innerHTML = element;
  107. HTML > JavaScript

  108. None
  109. None
  110. CSS > JavaScript

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

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

  113. None
  114. None
  115. Homepage Login Dashboard Account

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

    parts)
  117. None
  118. None
  119. The JAM Stack JavaScript, APIs, & prerender Markup

  120. None
  121. None
  122. None
  123. What about subsequent page loads?

  124. Service Workers

  125. None
  126. Lean Web Principle Small & Modular

  127. None
  128. None
  129. https://api.jqueryui.com/tabs/

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

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

  133. https://preactjs.com/

  134. https://svelte.dev/

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

    class={callout}> Hi there! </div>
  136. <div class="jzrps nibae lupp mihax"> Hi there! </div>

  137. Object-Oriented CSS Legos for front end developers

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

    <div class="bg-gray text-large"> Hi there! </div>
  139. https://www.slideshare.net/stubbornella/object-oriented-css

  140. Lean Web Principle The Web is for Everyone

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

  142. None
  143. Polyfills

  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); } }; }
  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); } }; }
  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); } }; }
  147. https://polyfill.io

  148. Build in layers (Progressive Enhancement)

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

    • AtomicJS • Bouncer
  150. View my projects on GitHub

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

    • AtomicJS • Bouncer
  152. View my projects on GitHub

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

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

  156. https://a11yproject.com/

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

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

  159. Build websites like its 2005. — Keith Cirkel

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

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

  162. Wrapping Up 4

  163. 1. Embrace the Platform 2. Small & Modular 3. The

    Web is for Everyone Lean Web Principles
  164. Become a developer dinosaur

  165. None
  166. None