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.

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
5. Chris Ferdinandi GoMakeThings.com
7. https://vanillajsguides.com
8. Vanilla JS Academy https://vanillajsacademy.com
11. Started from the bottom, now we here
12. HTML CSS WordPress
14. =>
15. powerful native features ease of use the sweet spot
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
24. Modern Best Practice JavaScript Frameworks
27. var data = { todos: [ { item: 'Adopt a puppy', completed: true }, { item: 'Buy dog food and a dog bed', completed: false } ], username: 'Chris' };
30. if (data.todos.length > 0) { // create list items } else { return 'You don\'t have any todos yet. Please add one.' }
31. Fewer Bugs
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
45. Dependency Management
46. Tree Shaking
47. Modern Web Problem High Setup & Maintenance Cost
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)
69. A Vicious Circle
71. Modern Web Problem Fragility
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; };
84. How did we get here? 2
88. The Web Platform
91. ===
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
102. Lean Web Principle Embrace the Platform
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
110. CSS > JavaScript
111. https://daneden.github.io/animate.css/
112. https://github.com/cferdinandi/smooth-scroll
115. Homepage Login Dashboard Account
116. You still render HTML with JavaScript (but just the dynamic parts)
119. The JAM Stack JavaScript, APIs, & prerender Markup
123. What about subsequent page loads?
124. Service Workers
126. Lean Web Principle Small & Modular
129. https://api.jqueryui.com/tabs/
130. https://github.com/cferdinandi/tabby
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.
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
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