$30 off During Our Annual Pro Sale. View Details »

Back to Boring

Back to Boring

stefan judis

June 09, 2022
Tweet

More Decks by stefan judis

Other Decks in Technology

Transcript

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

    for a standard website... My CTO
  2. HTML CSS JavaScript React Vue Angular Svelte Remix webpack Rollup

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

    / 300KB* Complexity * powered by 200MB+ of text files #node_modules
  4. 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?
  5. Video platforms Blogs Shops Image & Illustration software Marketing sites

    Games Productivity Apps PWAs Streaming sites Social Networks
  6. 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?
  7. <!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>
  8. 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!
  9. <!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>
  10. <!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>
  11. <App> <Sidebar> <Nav /" <$Sidebar> <Main> <TweetBox /" <Tweets /"

    <$Main> <SideBar> <Trends /" <OtherNonSense /" <$SideBar> <$App>
  12. <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")
  13. <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?
  14. <!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>
  15. <!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>
  16. SSR Server Side Rendering CSR Client Side Rendering SSG Static

    Site Rendering DPR Incremental Static Regeneration Distributed Persistent Rendering ISR
  17. 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
  18. 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
  19. 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
  20. <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...
  21. I want to bet on web standards and build things

    that just work! (Yes, I'm talking about progressive enhancement)
  22. 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?
  23. async function navigate(data) { if (!document.createDocumentTransition) { await updateTheDOMSomehow(data); return;

    } const transition = document.createDocumentTransition(); await transition.start(async () =* { await updateTheDOMSomehow(); }); }