Getting to the glass — approaches to rendering views on the web

A presentation at JavaScript fwdays’24 in May 2024 in Kyiv, Ukraine, 02000 by Phil Hawksworth

Slide 1

Getting to the glass approaches to rendering views on the web Phil Hawksworth, Netlify

Slide 2

Getting to the glass

Slide 3

JavaScript dates + Daylight saving January 32th

Slide 4

Slide 5

Getting to the glass

Slide 6

Getting to the glass

Slide 7

Getting to the glass

Slide 8

“Time to glass”

Slide 9

Server Client

Slide 10

All the magic that does the things that gets the stuff to the place

Slide 11

oh, hello Phil Hawksworth According to my family, I work in computers

Slide 12

oh, hello Phil Hawksworth According to my family, I work in computers

Slide 13

oh, hello Phil Hawksworth Developer Education, Netlify

Slide 14

n I d e k n i L s d a h re T oh, hello Tw i t te r G i tH u @ PhilHawksworth Developer Education, Netlify Bl ueS k y n o d o M as t b

Slide 15

How do we do the best job of getting to the glass?

Slide 16

It depends
more on that later

Slide 17

Trends in web development are cyclical

Slide 18

Pendulum

Slide 19

Pendulum

Slide 20

Pendulum

Slide 21

Pendulum Extreme Extreme

Slide 22

Pendulum Extreme Extreme The sweet spot

Slide 23

It depends

Slide 24

G / ISR / ODB / SPA / MPA / ESR PA / MPA / SSR / CSR / SSG / D / SPA / MPA / SSR / CSR / SSG / SSR / CSR / SSG / DPR / DSG SSR / CSR / SSG / DPR / DSG / ESR / ISR / ODB / SPA / MPA /

Slide 25

It depends Requirements / Costs / Time / Skills / Sustainability…

Slide 26

But…

Slide 27

Simplicity is always something to strive for

Slide 28

The principle of least power https://www.w3.org/2001/tag/doc/leastPower.html

Slide 29

Computer Science […] spent a lot of effort making languages which were as powerful as possible. Nowadays we have to appreciate the reasons for picking not the most powerful solution but the least powerful — Tim Berners-Lee https://www.w3.org/DesignIssues/Principles.html#PLP

Slide 30

Simplify as much as possible But no more

Slide 31

Pendulum Complexity Simplicity

Slide 32

Pragmatic

Slide 33

How do we do the best job of getting to the glass?

Slide 34

G / ISR / ODB / SPA / MPA / ESR PA / MPA / SSR / CSR / SSG / D / SPA / MPA / SSR / CSR / SSG / SSR / CSR / SSG / DPR / DSG SSR / CSR / SSG / DPR / DSG / ESR / ISR / ODB / SPA / MPA /

Slide 35

Pendulum Client render Server render ?

Slide 36

All the magic that does the things that gets the stuff to the place

Slide 37

Server

Slide 38

Server

Slide 39

Server Client

Slide 40

Server-side Build Server Client-side Client

Slide 41

Server-side Build Server Client-side Client

Slide 42

! ? y l l re a Server-side Build Server Edge-side Edge Client-side Client

Slide 43

Generate our pages Enhance our pages Display our pages BUILD EDGE CLIENT POTENTIALLY

Slide 44

BORING

Slide 45

I’m excited about this pattern — Shameless display of feelings, Phil Hawksworth, Just now

Slide 46

Slide 47

What’s

Slide 48

What’s This website utilizes technologies such as cookies to enable essential site functionality, as well as for analytics, personalization, and targeted advertising purposes. You may change your settings at any time or accept the default settings. You may close this banner to continue with only essential cookies, but we’d prefer you to accidentally press the big Accept button Cookie Policy Accept Review

Slide 49

Slide 50

COOL? We use cookies because, well, we have to. Click “Accept” if you want to proceed - if not, tough luck. Manage your preferences if you dare by clicking What’s “Cookie Settings”. We gather data through cookies to tailor content, track our traﬃc, and for some social media stuff. By accepting, you’ve committed. Read about it in our Privacy Policy if you care. Click the link to enlighten yourself. Your privacy matters, but so does our need for cookies. Hit “Accept All” if you have no choice. Choices are limited here. Adjust your settings in our Cookie Settings - or risk the consequences. Cookies make our site snazzy. Click “Accept All Cookies” or face the consequences. No turning back. Tinker with your cookie settings, if you dare, and uncover our cookie schemes in the Cookie Policy link.am. We are here to assist you and ensure that your browsing experience is both enjoyable and secure. Accept Review

Slide 51

Display conditional Interface SO Control cookies Third-party client-side JavaScript Performance killers BUT Terrible interface

Slide 52

What’s

Slide 53

What’s

Slide 54

Server-side Server Edge-side Edge Client-side Client

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

No JavaScript

Slide 60

No client-side JavaScript

Slide 61

HTML arrives complete

Slide 62

Location aware Without needing permission

Slide 63

Sandboxed from other site code Yet under control of site owners

Slide 64

An edge function example netlify/edge-functions/hello.ts export default () =>” new Response(“Hello world”); export const config = { path: “/hello” }; `

Slide 65

An edge function example netlify/edge-functions/cookie-consent.ts import { Context } from “@netlify/edge-functions”; import myCookieBannerTemplate from ‘./utils/banner.js’; import cookiePolicyCountries from ‘./utils/territories.js’; ` export default async (request: Request, context: Context) =>” { const countryCode = context.geo?.country?.code;

Slide 66

import { Context } from “@netlify/edge-functions”; An import myCookieBannerTemplate from ‘./utils/banner.js’; edge function example import cookiePolicyCountries from ‘./utils/territories.js’; netlify/edge-functions/cookie-consent.ts export default async (request: Request, context: Context) =>” { const countryCode = context.geo?.country?.code; ` // Show the cookie banner to visitors from the correct countries if(cookiePolicyCountries.includes(countryCode)) { // Get the HTTP response content const response = await context.next();

Slide 67

export default async (request: Request, context: Context) =>” { An edge function example const countryCode = context.geo?.country?.code; netlify/edge-functions/cookie-consent.ts // Show the cookie banner to visitors from the correct countries if(cookiePolicyCountries.includes(countryCode)) { // Get the HTTP response content const response = await context.next(); ` const page = await response.text(); // Insert the UI just before the end of the body tag const ui = myCookieBannerTemplate(countryCode); const regex = /</body>/i;

Slide 68

if(cookiePolicyCountries.includes(countryCode)) { An edge function example // Get the HTTP response content netlify/edge-functions/cookie-consent.ts const response = await context.next(); const page = await response.text(); // Insert the UI just before the end of the body tag const ui = myCookieBannerTemplate(countryCode); const regex = /</body>/i; ` const updatedPage = page.replace(regex, ui); return new Response(updatedPage, response); } }

Slide 69

Slide 70

Generate our pages Enhance our pages Display our pages BUILD EDGE CLIENT POTENTIALLY

Slide 71

Framework free

Slide 72

Framework agnostic

Slide 73

Platform primitives

Slide 74

Generate our pages Enhance our pages Display our pages BUILD EDGE CLIENT POTENTIALLY

Slide 75

Localised times

Slide 76

Localized times

Slide 77

Pricing data and stock levels

Slide 78

E N DO T S A F E N DO Generate our pages Enhance our pages Display our pages BUILD EDGE CLIENT POTENTIALLY

Slide 79

But what about data that’s not close to the edge?

Slide 80

Slide 81

Making edge rendering fast Data API Source API Function SWR Edge Edge Function

Slide 82

Slide 83

Slide 84

A similar emerging pattern

Slide 85

PPR Partial Prerendering

Slide 86

Generate our pages Enhance our pages Display our pages BUILD EDGE CLIENT POTENTIALLY

Slide 87

Generate our pages Request and stream enhancements Update our pages BUILD / SSR EDGE CLIENT POTENTIALLY

Slide 88

Pendulum Monolithic Decoupled

Slide 89

Slide 90

Slide 91

Did we learn anything?

Slide 92

Rendering patterns are yours to control

Slide 93

Understand requirements. Make choices. Start simple.

Slide 94

Do as much as possible in advance

Slide 95

Don’t be hypnotised by the pendulum

Slide 96

It depends

Slide 97

Should I piss off Cookie Monster?

Slide 98

Slide 99

Attributions and resources Links https://twitter.com/philhawksworth https://hawksworx.com https://edge-functions-examples.netlify.app/ https://developers.netlify.com/guides/how-to-make-edge-rendering-fast/ https://developers.netlify.com/guides/partial-prerendering-without-a-framework/ Images https://unsplash.com/photos/clear-drinking-glass-with-orange-liquid-4aWCVJA2uSo https://unsplash.com/photos/a-tall-glass-sitting-on-top-of-a-table-fiN073Jt5L8 https://unsplash.com/photos/turned-on-flat-screen-monitor-6j_lmeycTrM https://unsplash.com/photos/brown-and-black-floral-wreath-6BMjuiB_IF0 https://www.flickr.com/photos/tangledcontrolpads/639854414/in/photostream/ https://unsplash.com/photos/bonfire—98jVaVuGv0

Slide 100

Thanks @philhawksworth