Did we(b development) lose the right direction?

Transcript

1. @stefanjudis
   Did we(b development)
   lose the right direction?
   

   View Slide

2. This is a talk about
   general "best practices"...
   

   View Slide

3. This is a rant about
   general "best practices"...
   

   View Slide

4. @stefanjudis
   news.stefanjudis.com
   Heyo,
   I'm Stefan!
   

   View Slide

5. The state of web development
   ten years ago...
   

   View Slide

6. View Slide

7. View Slide

8. yslow.org
   

   View Slide

9. 4waisenkinder.de
   

   View Slide

10. View Slide

11. View Slide

12. I love technology and I
    love writing JavaScript!
    

    View Slide

13. stefanjudis.com
    2017 - 2020
    

    View Slide

14. Chrome – Cable iPhone 6 – 3G
    

    View Slide

15. Usually, any score above a 90
    gets you in the top ~5% of
    performant websites.
    Lighthouse documentation
    

    View Slide

16. HTTP/2
    Everything's compressed and minified!
    

    View Slide

17. github.com/webpack-contrib/webpack-bundle-analyzer
    Code
    splitting
    

    View Slide

18. www.fmboschetto.it
    

    View Slide

19. View Slide

20. View Slide

21. webpagetest.org/video/
    

    View Slide

22. webpagetest.org/video/view.php?id=200302_2df0157ba9ea8586f5d987f7a1c3d52ed5e2a874
    Chrome – Cable
    

    View Slide

23. Stefan, you just
    messed it up!
    

    View Slide

24. Maybe, but how can it
    be so easy to mess up?
    

    View Slide

25. stefanjudis.com
    fmboschetto.it 4waisenkinder.de
    Overall page weight 340KB / 940KB
    265KB / 284KB 159KB / 300KB
    index.html 108KB / 340KB
    8KB / 32KB 6KB / 18KB
    CSS resources 1
    0 1
    Images resources 0*
    32
    (246KB / 254KB)
    0*
    Speed Index (LTE) 1.4s / 0.8s 2.1s / 0.7s 2.3s / 1.5s
    JS resources 22
    (183KB / 512KB)
    6
    (68KB / 177KB)
    2
    (2KB / 6KB)
    *ignoring tracking pixel
    Lighthouse Perf Score 100 97 90
    

    View Slide

26. View Slide

27. 10% - First contentful paint
    10% - Time to interactive
    10% - Speed Index
    25% - Largest contentful paint
    30% - Total blocking time
    15% - Cumulative layout shift
    JavaScript blocks
    the main-thread!
    

    View Slide

28. paulirish.github.io/lh-scorecalc/
    calibreapp.com/blog/lighthouse-changes-scoring-algorithm
    

    View Slide

29. www.youtube.com/watch?v=Lx1cYJAVnzA
    

    View Slide

30. timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/
    Scripting related CPU time (in milliseconds) for mobile devices in percentiles
    Median
    

    View Slide

31. medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
    

    View Slide

32. A 150KB image is not
    comparable to 150KB of
    gzipped JavaScript!
    

    View Slide

33. Page weight is not
    equal page weight!
    

    View Slide

34. That's a 340KB index file for
    roughly 400 words, Stefan?
    

    View Slide

35. View Slide

36. "It's great because it's fast! And
    it's still lighter than the rest of
    the internet..."
    

    View Slide

37. "It's great because it's still lighter than the
    rest of the internet..."
    "I'm really digging
    the tech-stack!"
    

    View Slide

38. That's a 340KB index file for
    roughly 400 words, Stefan?
    window.__DATA__=function(
    e,t,n,o,i,/* ... */
    ){ return /* ... */ )
    

    View Slide

39. I decided to preload/inline
    22 articles ...
    (at an average session length of 1.17 pages)
    

    View Slide

40. ... for "better
    performance".
    

    View Slide

41. Making a very fast
    website is extremely hard!
    

    View Slide

42. Making a very fast
    website is extremely hard!
    (But is it really?)
    

    View Slide

43. twitter.com/philhawksworth/status/1038440732741259265
    

    View Slide

44. View Slide

45. www.11ty.dev/docs/performance-leaderboard/
    

    View Slide

46. www.youtube.com/watch?v=88K8oO_dYbI
    

    View Slide

47. www.youtube.com/watch?v=88K8oO_dYbI
    Today, I 100% disagree
    with "past me", ...
    

    View Slide

48. www.youtube.com/watch?v=88K8oO_dYbI
    ... because where is the user's
    benefit from such overhead?
    

    View Slide

49. A common "best practice"
    Universal JavaScript apps for
    content-sites
    

    View Slide

50. 
    
    
    
    
    
    
    
    
    
    
    
    
    Hello world!
    
    
    
    
    

    View Slide

51. 
    
    
    
    
    
    
    
    
    
    
    
    
    Hello world!
    
    
    
    window.__data__ = { greeting: "Hello world!" }
    
    
    

    View Slide

52. 
    
    
    
    
    
    
    
    
    
    
    
    
    Hello world!
    
    
    window.__data__ = { greeting: "Hello world!" }
    
    
    The same code runs on the
    server and on the client!
    

    View Slide

53. Your content
    in HTML
    The same content
    in JavaScript
    

    View Slide

54. Is this really
    the best way for the user?
    

    View Slide

55. "This architecture o!ers doors
    to progressive enhancement!"
    

    View Slide

56. Base functionality Enhanced experience
    If the enhancement fails, it still works!
    

    View Slide

57. View Slide

58. View Slide

59. Updated
    search results
    Updated URL
    Submittable
    form
    

    View Slide

60. Buzzfeed
    twitter.com/philhawksworth/status/990890920672456707
    

    View Slide

61. "We don't have any non-JavaScript users"
    No, all your users are non-JS while
    they're downloading your JS.
    Jake Archibald
    

    View Slide

62. github.com
    POST github.com/stefanjudis/test/issue_comments
    handles a form and AJAX submit
    Five "old school"
    HTML links
    

    View Slide

63. I’m happy with GitHub's experience.
    A good site "just works".™
    

    View Slide

64. What's the enhancement
    in the wild, though?
    

    View Slide

65. reactjs.org with JavaScript reactjs.org without JavaScript
    433KB / 1.1MB 49KB / 175KB
    Initial weight
    547KB / 2.3MB 100KB / 1.0MB
    Weight after
    4 navigations
    

    View Slide

66. I'm guilty of that, too!
    

    View Slide

67. Does this architecture
    improve user experience?
    

    View Slide

68. View Slide

69. You get 6MB for 2Euros but
    you have only 24h to
    use them! Right...
    

    View Slide

70. httparchive.org/reports/state-of-the-web
    

    View Slide

71. whatdoesmysitecost.com
    

    View Slide

72. httparchive.org/reports/state-of-the-web
    We ship more data for
    the same experience...
    

    View Slide

73. Maybe app frameworks
    are for apps after all?
    

    View Slide

74. View Slide

75. 5.2MB / 17MB 25KB / 40KB
    

    View Slide

76. View Slide

77. The web is not as
    cutting-edge as it seems...
    

    View Slide

78. ... boring is beautiful!
    (and fast)
    

    View Slide

79. "Benefits" of
    client-side routing
    

    View Slide

80. Developers are "allowed"
    to re-implement
    an accessible navigation
    

    View Slide

81. twitter.com
    

    View Slide

82. www.gatsbyjs.org/blog/2020-02-10-accessible-client-side-routing-improvements/
    

    View Slide

83. View Slide

84. github.com/sdras/page-transitions-travelapp
    

    View Slide

85. async function navigateToSettingsPage() {
    await document.documentTransition.prepare({
    rootTransition: 'cover-left',
    });
    updateDOMForSettingsPage();
    await document.documentTransition.start();
    }
    developer.chrome.com/blog/shared-element-transitions-for-spas/
    chrome://flags/#document-transition
    

    View Slide

86. There’s a chance I believe
    client side routing on the web
    is usually not preferred.
    Which is ironic.
    Ryan Florence (co-author React-Router)
    twitter.com/ryanflorence/status/1186515553285857280
    

    View Slide

87. vuejs.org/v2/guide/installation.html
    

    View Slide

88. vuejs.org/v2/guide/installation.html
    

    View Slide

89. We use too much
    JavaScript!
    

    View Slide

90. kit.svelte.dev
    astro.build
    

    View Slide

91. The modern web seems to focus
    an awful lot on JavaScript.
    We don’t think it has to [...].
    astro.build
    

    View Slide

92. Your content
    in HTML
    Multi-page App
    (MPA)
    The same content
    in JavaScript
    Single-page App
    (SPA)
    

    View Slide

93. Your content
    in HTML
    Multi-page App
    (MPA)
    The same content
    in JavaScript
    Single-page App
    (SPA)
    

    View Slide

94. jasonformat.com/islands-architecture/
    

    View Slide

95. /# Opt in to load client-side JavaScript *%
    

    View Slide

96. works with
    

    View Slide

97. vercel.com
    reacts.org
    

    View Slide

98. Have Single-Page Apps Ruined the Web?
    #transitionalApps
    

    View Slide

99. A great site just works.™
    

    View Slide

100. HTML CSS JavaScript
     The foundation of the web
     

     View Slide

101. A great site doesn't have to be
     built with React/Vue/Angular/...
     

     View Slide

102. I need a new site what
     should I use?
     You should use Framework X
     with SSR, an offline strategy and
     it has to run "on the edge"!
     It depends...
     What's your use case?
     

     View Slide

103. A great site can be built
     with React, Vue, Angular...
     

     View Slide

104. A great site is
     accessible, fast, secure, ...
     

     View Slide

105. It's "just" HTML...
     

     View Slide

106. HTML defines
     over 100 elements
     

     View Slide

107. HTML defines
     22 input types
     

     View Slide

108. View Slide

109. css-tricks.com/a-complete-guide-to-links-and-buttons/
     +4000 words!
     

     View Slide

110. 
     Twitter
     <(div>
     

     View Slide

111. www.htmhell.dev
     

     View Slide

112. ... it's not "easy".
     

     View Slide

113. webaim.org/projects/million/
     

     View Slide

114. webaim.org/projects/million/
     

     View Slide

115. webaim.org/projects/million/
     

     View Slide

116. thenextweb.com/contributors/2018/03/10/protect-website-cryptojacking-attacks/
     

     View Slide

117. Content-Security-Policy: default-src 'self'; script-src 'self' just-
     comments.com www.google-analytics.com production-
     assets.codepen.io storage.googleapis.com; style-src 'self' 'unsafe-
     inline'; img-src 'self' data: images.contentful.com images.ctfassets.net
     www.gravatar.com www.google-analytics.com just-comments.com;
     font-src 'self' data:; connect-src 'self' cdn.contentful.com
     images.contentful.com videos.contentful.com images.ctfassets.net
     videos.ctfassets.net service.just-comments.com www.google-
     analytics.com; media-src 'self' videos.contentful.com
     videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame-
     ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src
     'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https://
     stefanjudis.report-uri.com/r/d/csp/reportOnly
     

     View Slide

118. USE CSP DON'T USE CSP
     89%
     11%
     

     View Slide

119. httparchive.org/reports/state-of-the-web
     

     View Slide

120. The web lost quality...
     

     View Slide

121. ... but at least Frontend
     developers got more productive!
     

     View Slide

122. View Slide

123. View Slide

124. exports.sayHello = async (event) =" {
     return 'Hello from Lambda!';
     };
     

     View Slide

125. exports.sayHello = async (event) =" {
     return {
     statusCode: 200,
     body: JSON.stringify({"msg": "Hello from Lambda!"})
     };
     };
     

     View Slide

126. The options are limitless to build a product quickly!
     

     View Slide

127. Hello world!
     2010
     10KB / 50KB
     Hello world!
     2020
     40KB / 130KB
     Complexity
     

     View Slide

128. I just added two helpers
     to tiny-helpers.dev.
     The site is great, but that
     I had to download 700MB
     of Node.js stuff is
     brutal. :)
     

     View Slide

129. A text editor
     A text editor, Node.js, npm, framework knowledge, …
     

     View Slide

130. I’ve been building on the web for 15+
     years in some capacity,
     and it has never been
     so easy to build complex apps.
     Josh Comeau
     100% agree!
     How many sites need to be complex apps, though?
     

     View Slide

131. Where are we going
     with this trend?
     

     View Slide

132. View Slide

133. HTML CSS JavaScript
     React Vue Angular Svelte
     webpack Rollup Parcel
     AWS GCloud Netlify Vercel Heroku
     *
     * a very incomplete list
     

     View Slide

134. Complexity rocks!
     (but what for?)
     

     View Slide

135. View Slide

136. twitter.com/_developit/status/1214258470226190350
     

     View Slide

137. (function() {
     const fakeButton = document.querySelector('[data-menu-button]');
     const menu = document.querySelector('[data-menu]');
     const toggleMenuButton = document.createElement('button');
     toggleMenuButton.textContent = fakeButton.textContent;
     toggleMenuButton.setAttribute('aria-expanded', false);
     toggleMenuButton.setAttribute('aria-controls', 'menu');
     toggleMenuButton.classList.add('nav__toggle');
     fakeButton.parentNode.replaceChild(toggleMenuButton, fakeButton);
     toggleMenuButton.addEventListener('click', function() {
     let expanded = this.getAttribute('aria-expanded') === 'true' || false;
     this.setAttribute('aria-expanded', !expanded);
     menu.hidden = !menu.hidden;
     });
     menu.hidden = true;
     })()
     justmarkup.com/articles/2019-12-04-hamburger-menu/
     16 lines of hand-written JavaScript
     

     View Slide

138. Maybe we'll have good
     enough abstractions one
     day, but today…
     

     View Slide

139. … you still have to know
     web fundamentals to create
     the best user experience.
     

     View Slide

140. You're shaping tomorrow's job
     market based on the technology
     choices you make today.
     Henrik Joreteg
     

     View Slide

141. Your job as a web developer
     is to build beautiful
     experiences!
     

     View Slide

142. Your job as a web developer is to build beautiful experiences!
     Your job as a developer is to decide, to
     decide what tools to use, to decide what
     frameworks to use, to decide what to
     prioritize, to decide what is the best way
     to maintain a project.
     Michael Scharnagl
     

     View Slide

143. Chatted with someone who’s been working at
     a company as a front-end developer for 3
     years. Their friend asked them to help build
     a website, but they had to decline.
     They didn’t know how.
     Chris Coyier
     (css-tricks.com)
     

     View Slide

144. HTML CSS JavaScript
     React Vue Angular Svelte
     webpack Rollup Parcel
     AWS GCloud Netlify Vercel Heroku
     *
     * a very incomplete list
     

     View Slide

145. css-tricks.com/the-great-divide/
     

     View Slide

146. css-tricks.com/the-great-divide/
     

     View Slide

147. css-tricks.com/the-great-divide/
     

     View Slide

148. It's time for our industry to
     realize the title "frontend
     developer" is obsolete.
     Benjamin De Cock – @bdc
     

     View Slide

149. Developers and software
     engineers put their job
     satisfaction above their
     users or customers.
     

     View Slide

150. Your users don't care
     about your technical
     implementation.
     

     View Slide

151. DX
     (developer experience)
     UX
     (user experience)
     

     View Slide

152. DX
     (developer experience)
     UX
     (user experience)
     

     View Slide

153. I love shiny tools and I
     love writing JavaScript...
     

     View Slide

154. ... but maybe we should take a step back?
     And consider the right tools
     for the best user experience?
     

     View Slide

155. 2020+
     2017 - 2020
     

     View Slide

156. 2020+
     Reduction of overall
     page weight by 64%.
     

     View Slide

157. 2020+
     Reduction of build time
     from 4min to 40s.
     

     View Slide

158. 2020+
     No JavaScript build
     pipeline leading
     to reduced complexity.
     

     View Slide

159. 2020+
     No JavaScript build
     pipeline leading
     to reduced complexity.
     

     View Slide

160. 2020+
     A green
     lighthouse score.
     

     View Slide

161. 2020+
     A site with a better
     user experience.
     

     View Slide

162. Is a JavaScript-driven
     stack really that bad?
     

     View Slide

163. Not at all,
     use whatever makes you happy!
     

     View Slide

164. Every technology
     decision has tradeo!s.
     Kevlin Henney
     

     View Slide

165. But maybe we should focus more
     on building sites that just work...
     (And worry less about the technology powering them)
     

     View Slide

166. Slides
     my-links.online/did-we-lose-direction
     Yes! I own that domain! !
     

     View Slide

167. @stefanjudis
     www.stefanjudis.com
     newsletter.stefanjudis.com
     Thanks.
     

     View Slide