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. Modern web development is too complicated.

  6. Chris Ferdinandi GoMakeThings.com

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

  9. https://vanillajsprojects.com

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

  11. None
  12. None
  13. Started from the bottom, now we here

  14. HTML CSS WordPress

  15. None
  16. =>

  17. powerful native features ease of use the sweet spot

  18. None
  19. None
  20. “My biggest challenge is keeping up.

  21. A push for simplicity

  22. Is there a conference for web developers that specifically caters

    to “lean web” (don’t use JS if not necessary etc.)? — @ThomasFuchs https://twitter.com/thomasfuchs/status/925341886944038914
  23. Start End 1 Modern best practices (and why they’re bad)

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

  25. None
  26. None
  27. Modern Best Practice JavaScript Frameworks

  28. None
  29. var data = { todos: [ { item: 'Adopt a

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

    else { return 'You don\'t have any todos yet. Please add one.' }
  33. JavaScript at Scale

  34. Fewer Bugs

  35. None
  36. Modern Web Problem Performance

  37. JavaScript at Scale

  38. Fewer Bugs

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

  41. Byte-for-byte, JavaScript is still the most expensive resource we send

    to mobile phones, because it can delay interactivity in large ways. — Addy Osmani https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
  42. One Less JPG

  43. JavaScript blocks rendering

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

    200ms) — @zachleat
  46. Modern Best Practice Package Managers & Module Bundlers

  47. None
  48. Dependency Management

  49. Tree Shaking

  50. Modern Web Problem High Setup & Maintenance Cost

  51. None
  52. None
  53. npm install | npm run

  54. My workflow today: 15 minutes of writing code that works

    and does what I want. 2 hours of trying to appease the static type gods. — @KyleShevlin https://twitter.com/kyleshevlin/status/1095093908038549505
  55. That depressing realization that the thing you're slogging through in

    a modern JS framework could have taken you 10 minutes in jQuery. — @brad_frost https://twitter.com/brad_frost/status/1097908466935652352
  56. https://twitter.com/sodevious/status/1126300690530357253 ah webpack, javascript –– turning a 1 hour project

    setup into an 8 hour affair — @sodevious
  57. I made the mistake last year on my team to

    push one of the apps we were developing from just using JQuery/ Vanilla JS to use Angular because I assumed it would make our lives easier. It did not, it just added complexity. — @Eldorian https://twitter.com/Eldorian/status/1139555399160303616
  58. Modern Best Practice CSS-in-JS

  59. JSS Team-Based CSS

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

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

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

  63. “Legacy site downloads ~630 KB CSS… PWA incrementally generates ~30

    KB CSS…”
 — @necolas https://twitter.com/necolas/status/1058949372837122048
  64. <div class="jzrps nibae lupp mihax"> Hi there! </div>

  65. Modern Web Problem Gatekeeping

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

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

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

  70. 34 page executive summary https://wpcampus.org/2019/05/gutenberg-audit-results/

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

  72. 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/
  73. https://github.com/adam-golab/react-developer-roadmap

  74. Modern Best Practice Single Page Apps (SPAs)

  75. None
  76. None
  77. A Vicious Circle

  78. None
  79. Modern Web Problem Fragility

  80. None
  81. None
  82. People don’t (usually) browse the web with JS disabled

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

  84. Firewalls & Ad Blockers

  85. Files Timeout

  86. 13 million requests for JavaScript timeout on Buzzfeed https://twitter.com/philhawksworth/status/990890920672456707

  87. Lost Connectivity

  88. Bugs

  89. <dvi></dvi> <div></div>

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

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

    };
  92. How did we get here? 2

  93. None
  94. None
  95. None
  96. None
  97. None
  98. None
  99. The Web Platform

  100. None
  101. None
  102. ===

  103. None
  104. “I build apps, not websites.

  105. “Vanilla JS doesn’t scale.

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

  107. !==

  108. Source: www.lukew.com

  109. =*(

  110. Lean Web Principles 3

  111. Become a dev dinosaur

  112. None
  113. None
  114. Lean Web Principle Embrace the Platform

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

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

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

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

  120. None
  121. None
  122. CSS > JavaScript

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

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

  125. None
  126. JavaScript routing is complicated

  127. Homepage Login Dashboard Account

  128. None
  129. None
  130. None
  131. None
  132. What about persistent data?

  133. var saveData = function (data) { sessionStorage.setItem( 'myData', JSON.stringify(data) );

    }; var getData = function () { var saved = sessionStorage.getItem('myData'); if (saved) { return JSON.parse(saved); } return {}; };
  134. Lean Web Principle Small & Modular

  135. None
  136. None
  137. https://lodash.com/docs/4.17.14#groupBy

  138. var groupBy = function (arr, criteria) { return arr.reduce(function (obj,

    item) { // Check if the criteria is a function to // run on the item or a property of it var key = typeof criteria === 'function' ? criteria(item) : item[criteria]; // If the key doesn't exist yet, create it if (!obj.hasOwnProperty(key)) { obj[key] = []; } // Push the value to the object obj[key].push(item); // Return the object to the next item in the loop return obj; }, {}); };
  139. https://api.jqueryui.com/tabs/

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

  141. None
  142. https://viperhtml.js.org/hyperhtml/documentation/

  143. https://preactjs.com/

  144. https://svelte.dev/

  145. https://svelte.dev/

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

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

  148. Object-Oriented CSS Legos for front end developers

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

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

  151. Lean Web Principle The Web is for Everyone

  152. The Web Platform

  153. 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); } }; }
  154. 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); } }; }
  155. 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); } }; }
  156. https://polyfill.io

  157. Build in layers (Progressive Enhancement)

  158. View my projects on GitHub

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

    • AtomicJS • Bouncer
  160. A B C D

  161. A B C D

  162. Inclusive Design

  163. https://a11yproject.com/

  164. https://davatron5000.github.io/a11y-nutrition-cards/

  165. None
  166. Do any companies actually use Lean Web principles? (yes they

    do!)
  167. https://vanillajslist.com

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

  169. Build websites like its 2005. — Keith Cirkel

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

  171. MeetSpace https://www.smashingmagazine.com/2017/05/why-no-framework/

  172. Wrapping Up 4

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

    Web is for Everyone Lean Web Principles
  174. Become a dev dinosaur

  175. None
  176. A simpler, faster world wide web

  177. None
  178. None