Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Back to Boring

Back to Boring

22725c2d3eb331146549bf0d5d3c050c?s=128

stefan judis

June 09, 2022
Tweet

More Decks by stefan judis

Other Decks in Technology

Transcript

  1. @stefanjudis Back to boring

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

  3. This is all way too complicated and too much code

    for a standard website... My CTO
  4. This is how we do it!

  5. I love building websites! (But secretly, I'm super overwhelmed*) *

    don't tell anyone
  6. Sometimes I even dream about this...

  7. Did we(b development) lose the right direction?

  8. my-links.online/wrong-direction

  9. httparchive.org

  10. Page weight

  11. Transferred JS Bytes

  12. Time to interactive

  13. HTML CSS JavaScript React Vue Angular Svelte Remix webpack Rollup

    Parcel AWS GCloud Netlify Vercel Deno * * a very incomplete list
  14. Hello world! 2012 10KB / 50KB Hello world! 2022 100KB

    / 300KB* Complexity * powered by 200MB+ of text files #node_modules
  15. 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?
  16. Whoops!

  17. Should really everything be an app, today?

  18. Video platforms Blogs Shops Image & Illustration software Marketing sites

    Games Productivity Apps PWAs Streaming sites Social Networks
  19. Website Web App Grey zone

  20. MPA vs. SPA Multi Page App Single Page App

  21. MPA vs. SPA Multi Page App Single Page App

  22. I need a new site what should I use? You

    should use Framework X with SSR, an offline strategy! It depends... What's your use case?
  23. Every technology choice has tradeo!s

  24. <!doctype html> <html lang="en"> <head>...</head> <body> <h1>Hello world!</h1> <!-- ...

    --> <!-- A beautiful website --> <!-- ... --> <script src="js/some-jquery-sugar.js"></script> </body> </html>
  25. Server dynamically delivering HTML CSS, JavaScript, Images coming from a

    CDN
  26. Server dynamically delivering HTML CSS, JavaScript, Images coming from a

    CDN
  27. Server dynamically delivering HTML CSS, JavaScript, Images coming from a

    CDN
  28. First render (All of it!) index.html main.css jQuery.js A Fetch-Render

    Waterfall some-spaghetti.js DB Calls API Calls API Calls API Calls Server Browser index.html DB Calls API Calls API Calls API Calls All done!
  29. Browsers are freaking good at rendering websites!

  30. <!doctype html> <html lang="en"> <head>...</head> <body> <h1>Hello world!</h1> <!-- ...

    --> <!-- A beautiful website --> <!-- ... --> <script src="js/some-jquery-sugar.js"></script> </body> </html>
  31. <!doctype html> <html lang="en"> <head>...</head> <body> <span>Loading...</span> <script src=“js/app-bundle-hash1.js”></script> <script

    src=“js/app-bundle-hash2.js”></script> <script src=“js/app-bundle-hash3.js”></script> </body> </html>
  32. <App> <Sidebar> <Nav /" <$Sidebar> <Main> <TweetBox /" <Tweets /"

    <$Main> <SideBar> <Trends /" <OtherNonSense /" <$SideBar> <$App>
  33. <App> <Sidebar> <Nav /" <$Sidebar> <Main> <TweetBox /" <Tweets /"

    <$Main> <SideBar> <Trends /" <OtherNonSense /" <$SideBar> <$App> App Sidebar Nav Main TweetBox Tweets SideBar Trends OtherNonSense Data for OtherNonSense Data for Trends Data for Tweets A Render-Fetch Waterfall (aka "fetch as you render")
  34. <App> <Sidebar> <Nav /" <$Sidebar> <Main> <TweetBox /" <Tweets /"

    <$Main> <SideBar> <Trends /" <OtherNonSense /" <$SideBar> <$App> App Sidebar Nav Main TweetBox Tweets SideBar Trends OtherNonSense Data for OtherNonSense Data for Trends Data for Tweets A Render-Fetch Waterfall (aka "fetch as you render") Network? CPU? Memory?
  35. You can make your server fast, but you can't control

    the user's network. Remix docs
  36. developer.mozilla.org/en-US/docs/Web/API/History_API

  37. We shifted all the work to the client, but at

    least...
  38. ... we're in full control and can build beautiful experiences!

  39. None
  40. None
  41. With client-side routing you might break Focus handling Scroll handling

    Assistive technology
  42. Next.js route announcer /% next.config.js module.exports = { reactStrictMode: true,

    experimental: { scrollRestoration: true, }, };
  43. Just because you can, doesn't mean you should.

  44. None
  45. With client-side routing you can Persist state Partially render routes

    Keep UI elements alive
  46. None
  47. This is not fast enough!

  48. None
  49. <!doctype html> <html lang=""> <head>...</head> <body> <span>Loading...</span> <script src=“js/app-bundle-hash1.js”></script> <script

    src=“js/app-bundle-hash2.js”></script> <script src=“js/app-bundle-hash3.js”></script> </body> </html>
  50. <!doctype html> <html lang="en"> <head>...</head> <body> <h1>Hello world!</h1> <!-- ...

    --> <!-- A beautiful website --> <!-- ... --> <script src=“js/app-bundle-hash1.js”></script> <script src=“js/app-bundle-hash2.js”></script> <script src=“js/app-bundle-hash3.js”></script> <script>window.__data__ = { greeting: "Hello world!" }</script> </body> </html>
  51. Your content in HTML The same content in JavaScript

  52. And then you have to hydrate everything, too!

  53. Server delivering HTML CSS, JavaScript, Images coming from a CDN

  54. HTML, CSS, JavaScript, Images coming from a CDN

  55. None
  56. SSR Server Side Rendering CSR Client Side Rendering SSG Static

    Site Rendering DPR Incremental Static Regeneration Distributed Persistent Rendering ISR
  57. Do we deliver the same user experience with more code

    and complexity?
  58. 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
  59. None
  60. If your site feels like a "boring" Multi Page App,

    maybe it should be one?
  61. I'd love to write less code with easy-to-use technology.

  62. Let's not reinvent (or install) accessible UI controls.

  63. open-ui.org

  64. Alert Avatar Badge Breadcrumb Button Card Checkbox Datepicker Dialog File

    Flex Focusgroup Icon Image Menu Popup Radio Button Select Skeleton Slider Switch Table Tabs Text Toast Tooltip
  65. Alert Avatar Badge Breadcrumb Button Card Checkbox Datepicker Dialog File

    Flex Focusgroup Icon Image Menu Popup Radio Button Select Skeleton Slider Switch Table Tabs Text Toast Tooltip
  66. <selectmenu id="ambassadors" class="ambassador"> <div slot="button"> <button behavior="button">Pick one<$button> <span behavior="selected-value"><$span>

    <$div> <div popup slot="listbox" behavior="listbox"> <div class="grid"> <option value="benedek" checked>Benedek<$option> <option value="carmen">Carmen<$option> <option value="jeremias">Jeremias<$option> <$div> <$div> <$selectmenu> selectmenu and popup open-ui.org/prototypes/selectmenu Not ready yet...
  67. microsoftedge.github.io/Demos/selectmenu/

  68. const dialog = document.querySelector('dialog'); dialog.showModal(); // to close the dialog

    use `close` dialog.close(); A new Dialog API
  69. web.dev/building-a-dialog-component/

  70. If the web platform provides more high-level components we have

    to ship less code.
  71. I want to bet on web standards and build things

    that just work! (Yes, I'm talking about progressive enhancement)
  72. class FlavorForm extends React.Component { constructor(props) { super(props); this.state =

    {value: 'coconut'}; this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event) { alert('Your favorite flavor is: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Pick your favorite flavor: <select name="flavor" value={this.state.value} <option value="grapefruit">Grapefruit<$option> <option value="coconut">Coconut<$option> <$select> <$label> <input type="submit" value="Submit" /" <$form> ); } } Isn't it weird that we're preventing the browser default behavior for years now?
  73. <form onSubmit={this.handleSubmit}> GET /?flavor=grapefruit

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

  75. kryogenix.org/code/browser/everyonehasjs.html

  76. I want to create delightful experiences!

  77. async function navigate(data) { if (!document.createDocumentTransition) { await updateTheDOMSomehow(data); return;

    } const transition = document.createDocumentTransition(); await transition.start(async () =* { await updateTheDOMSomehow(); }); }
  78. Shared Element Transitions SPA MPA

  79. github.com/WICG/shared-element-transitions

  80. I want to ship only necessary code.

  81. 11ty.dev

  82. astro.build

  83. I want to push code and see things live in

    seconds.
  84. HTML, CSS, JavaScript, Images coming from a CDN

  85. HTML, CSS, JavaScript, Images coming from a CDN Edge compute

  86. None
  87. JavaScript pushes the boundaries of the web!

  88. If browsers provide more components, navigation transitions are easy to

    build and servers are around the world...
  89. Let the server do its job Ship less JavaScript Build

    more beautiful experiences
  90. Use whatever works for you, but consider the trade o!s.

  91. Keep pushing and have fun! (Because this is how we

    do it)
  92. @stefanjudis www.stefanjudis.com news.stefanjudis.com Thanks.