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
   

   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