Slide 1

Slide 1 text

@stefanjudis Back to boring

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

This is how we do it!

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Sometimes I even dream about this...

Slide 7

Slide 7 text

Did we(b development) lose the right direction?

Slide 8

Slide 8 text

my-links.online/wrong-direction

Slide 9

Slide 9 text

httparchive.org

Slide 10

Slide 10 text

Page weight

Slide 11

Slide 11 text

Transferred JS Bytes

Slide 12

Slide 12 text

Time to interactive

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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?

Slide 16

Slide 16 text

Whoops!

Slide 17

Slide 17 text

Should really everything be an app, today?

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Website Web App Grey zone

Slide 20

Slide 20 text

MPA vs. SPA Multi Page App Single Page App

Slide 21

Slide 21 text

MPA vs. SPA Multi Page App Single Page App

Slide 22

Slide 22 text

I need a new site what should I use? You should use Framework X with SSR, an oﬄine strategy! It depends... What's your use case?

Slide 23

Slide 23 text

Every technology choice has tradeo!s

Slide 24

Slide 24 text

...

Hello world!

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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!

Slide 29

Slide 29 text

Browsers are freaking good at rendering websites!

Slide 30

Slide 30 text

...

Hello world!

Slide 31

Slide 31 text

... Loading...

Slide 32

Slide 32 text

<$App>

Slide 33

Slide 33 text

<$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")

Slide 34

Slide 34 text

<$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?

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

This is not fast enough!

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

... Loading...

Slide 50

Slide 50 text

...

Hello world!

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

Slide 51

Slide 51 text

Your content in HTML The same content in JavaScript

Slide 52

Slide 52 text

And then you have to hydrate everything, too!

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

HTML, CSS, JavaScript, Images coming from a CDN

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

open-ui.org

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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...

Slide 67

Slide 67 text

microsoftedge.github.io/Demos/selectmenu/

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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> ); } } Isn't it weird that we're preventing the browser default behavior for years now?

Slide 73

Slide 73 text

GET /?flavor=grapefruit

Slide 74

Slide 74 text

Buzzfeed twitter.com/philhawksworth/status/990890920672456707

Slide 75

Slide 75 text

kryogenix.org/code/browser/everyonehasjs.html

Slide 76

Slide 76 text

I want to create delightful experiences!

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Shared Element Transitions SPA MPA

Slide 79

Slide 79 text

github.com/WICG/shared-element-transitions

Slide 80

Slide 80 text

I want to ship only necessary code.

Slide 81

Slide 81 text

11ty.dev

Slide 82

Slide 82 text

astro.build

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

HTML, CSS, JavaScript, Images coming from a CDN

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

JavaScript pushes the boundaries of the web!

Slide 88

Slide 88 text

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