Back to Boring

Transcript

1. @stefanjudis
   Back to boring
   

   View Slide

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

   View Slide

3. This is all way too complicated
   and too much code for a
   standard website...
   My CTO
   

   View Slide

4. This is how
   we do it!
   

   View Slide

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

   View Slide

6. Sometimes I even
   dream about this...
   

   View Slide

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

   View Slide

8. my-links.online/wrong-direction
   

   View Slide

9. httparchive.org
   

   View Slide

10. Page weight
    

    View Slide

11. Transferred JS Bytes
    

    View Slide

12. Time to interactive
    

    View Slide

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

    View Slide

14. Hello world!
    2012
    10KB / 50KB
    Hello world!
    2022
    100KB / 300KB*
    Complexity
    * powered by 200MB+ of text files #node_modules
    

    View Slide

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?
    

    View Slide

16. Whoops!
    

    View Slide

17. Should really everything
    be an app, today?
    

    View Slide

18. Video platforms Blogs Shops
    Image & Illustration software
    Marketing sites Games
    Productivity Apps PWAs
    Streaming sites Social Networks
    

    View Slide

19. Website Web App
    Grey zone
    

    View Slide

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

    View Slide

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

    View Slide

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?
    

    View Slide

23. Every technology choice
    has tradeo!s
    

    View Slide

24. 
    
    ...
    
    Hello world!
    
    
    
    
    
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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!
    

    View Slide

29. Browsers are freaking good
    at rendering websites!
    

    View Slide

30. 
    
    ...
    
    Hello world!
    
    
    
    
    
    
    

    View Slide

31. 
    
    ...
    
    Loading...
    
    
    
    
    
    

    View Slide

32. 
    
    <$Sidebar>
    
    <$Main>
    
    <$SideBar>
    <$App>
    

    View Slide

33. 
    
    <$Sidebar>
    
    <$Main>
    
    <$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")
    

    View Slide

34. 
    
    <$Sidebar>
    
    <$Main>
    
    <$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?
    

    View Slide

35. You can make your server fast,
    but you can't control
    the user's network.
    Remix docs
    

    View Slide

36. developer.mozilla.org/en-US/docs/Web/API/History_API
    

    View Slide

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

    View Slide

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

    View Slide

39. View Slide

40. View Slide

41. With client-side routing you might break
    Focus handling
    Scroll handling
    Assistive technology
    

    View Slide

42. Next.js route announcer
    /% next.config.js
    module.exports = {
    reactStrictMode: true,
    experimental: {
    scrollRestoration: true,
    },
    };
    

    View Slide

43. Just because you can,
    doesn't mean you should.
    

    View Slide

44. View Slide

45. With client-side routing you can
    Persist state
    Partially render routes
    Keep UI elements alive
    

    View Slide

46. View Slide

47. This is not fast enough!
    

    View Slide

48. View Slide

49. 
    
    ...
    
    Loading...
    
    
    
    
    
    

    View Slide

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

    View Slide

51. Your content
    in HTML
    The same content
    in JavaScript
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. View Slide

56. SSR
    Server Side
    Rendering
    CSR
    Client Side
    Rendering
    SSG
    Static Site
    Rendering
    DPR
    Incremental Static
    Regeneration
    Distributed Persistent
    Rendering
    ISR
    

    View Slide

57. Do we deliver the same
    user experience with more
    code and complexity?
    

    View Slide

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
    

    View Slide

59. View Slide

60. If your site feels like
    a "boring" Multi Page App,
    maybe it should be one?
    

    View Slide

61. I'd love to write less code
    with easy-to-use technology.
    

    View Slide

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

    View Slide

63. open-ui.org
    

    View Slide

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
    

    View Slide

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
    

    View Slide

66. 
    
    Pick one<$button>
    <$span>
    <$div>
    
    
    Benedek<$option>
    Carmen<$option>
    Jeremias<$option>
    <$div>
    <$div>
    <$selectmenu>
    selectmenu and popup
    open-ui.org/prototypes/selectmenu Not ready yet...
    

    View Slide

67. microsoftedge.github.io/Demos/selectmenu/
    

    View Slide

68. const dialog = document.querySelector('dialog');
    dialog.showModal();
    // to close the dialog use `close`
    dialog.close();
    A new Dialog API
    

    View Slide

69. web.dev/building-a-dialog-component/
    

    View Slide

70. If the web platform provides
    more high-level components
    we have to ship less code.
    

    View Slide

71. I want to bet on web standards
    and build things that just work!
    (Yes, I'm talking about progressive enhancement)
    

    View Slide

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 (
    
    
    Pick your favorite flavor:
    Grapefruit<$option>
    Coconut<$option>
    <$select>
    <$label>
    <$form>
    );
    }
    }
    Isn't it weird that we're preventing
    the browser default behavior
    for years now?
    

    View Slide

73. 
    GET /?flavor=grapefruit
    

    View Slide

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

    View Slide

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

    View Slide

76. I want to create
    delightful experiences!
    

    View Slide

77. async function navigate(data) {
    if (!document.createDocumentTransition) {
    await updateTheDOMSomehow(data);
    return;
    }
    const transition = document.createDocumentTransition();
    await transition.start(async () =* {
    await updateTheDOMSomehow();
    });
    }
    

    View Slide

78. Shared Element Transitions
    SPA
    MPA
    

    View Slide

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

    View Slide

80. I want to ship only
    necessary code.
    

    View Slide

81. 11ty.dev
    

    View Slide

82. astro.build
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

86. View Slide

87. JavaScript pushes the
    boundaries of the web!
    

    View Slide

88. If browsers provide more components,
    navigation transitions are easy to build
    and servers are around the world...
    

    View Slide

89. Let the server do its job
    Ship less JavaScript
    Build more beautiful experiences
    

    View Slide

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

    View Slide

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

    View Slide

92. @stefanjudis
    www.stefanjudis.com
    news.stefanjudis.com
    Thanks.
    

    View Slide