Flexible Architectures Sergey Chernyshev NY Web Performance Meetup May 21, 2024

Rover (not to scale) Interplanetary Computation

Satellite Mars Base (not to scale) Rover Interplanetary Computation

Orbit Station Moon Base Satellite Rover Mars Base “Cloud” Mission Control Center Satellites Latency (not to scale) Interplanetary Computation

Close to Earth What plant is it? Check it! Scan the plant with your camera and click the button to…

Close to Earth Server What plant is it? Check it! Scan the plant with your camera and click the button to…

Close to Earth Main Thread Server Service Worker Web Worker Rendering What plant is it? Check it! Scan the plant with your camera and click the button to… JS

Main Thread Close to Earth Main Thread Server Service Worker Web Worker Rendering What plant is it? Check it! Scan the plant with your camera and click the button to… JS

More Layers: CDN Main Thread Server Service Worker Web Worker Rendering What plant is it? Check it! Scan the plant with your camera and click the button to… JS

Serverless Main Thread Server Service Worker Web Worker Rendering What plant is it? Check it! Scan the plant with your camera and click the button to… JS

Services Main Thread Server Service Worker Web Worker Rendering What plant is it? Check it! Scan the plant with your camera and click the button to… JS

Edge Compute Main Thread Server Service Worker Web Worker Rendering What plant is it? Check it! Scan the plant with your camera and click the button to… JS

Interconnected Main Thread Server Service Worker Web Worker Rendering What plant is it? Check it! Scan the plant with your camera and click the button to… JS

Flexible Architectures

Why do we need it? today’s architectures are rigid

All or Nothing ● Having many architectures is rarely possible ● Search is usually an exception ● “Everything is dynamic” is a usual excuse

New Technologies are Hard ● Introducing new workflows is hard ● SPAs were a decade in the making ● Static Generators are often perceived as “Static is NOT Dynamic” ● PWAs, Edge Compute and etc are still a mystery to most developers

Slower without Re-Architecture

Slower without Re-Architecture …based on my experience…

Today’s Architectures web-specific

● PHP ● Java ● Python ● NodeJS Web Pages CC BY atoach https://www.flickr.com/photos/atoach/25370605889

Single Page Applications (SPA) ● CSR - Browser ● SSR - Server ● Hydration CC BY Studio Iloinen Liftari https://commons.wikimedia.org/wiki/File:Flamingo_Spa_%26_Wellness.jpg Where?

Static Generators Where? When? CC BY JonahPtak https://www.deviantart.com/jonahptak/art/MCU-T imeline-Thing-v1-1b-2020-05-14-864229532

Cloud Functions & Services ● Amazon Lambda ● Google Cloud Functions ● + cloud services

Edge Workers & CDNs ● Cloudflare Edge workers ● Fastly Edge Compute ● Amazon Lambda at Edge

Service Workers and PWAs ● Frameworks? ● Who manually rolled Service Worker code? CC BY Diego González-Zúñiga https://github.com/webmaxru/progressive-web-apps-logo

Web Workers ● What’s your use case?

New Architectures ● Every few years ● . ● . ● . ● . ● . ● . ● . ● . ● . ● . ● NEW!

Borderless Code you don’t care where it runs

DEMO https://github.com/BorderlessFramework not much to demo

No Framework Necessary you can do it without a framework

What should I do today? ● Use progressive enhancement ● Breakdown apps into parts / layers with different requirements ● Make architecture choices appropriate to those requirements ● Don’t make rigid choices that are hard to change ● Use more declarative configurations outside of core logic

Notable Developments ● Universal Javascript (already old) ● Event-driven data (also old) ● WASM execution environments (Fastly) ● Edge services - distributed by default, scalable, etc ● Cross-compatible frameworks like Hono ● Framework-defined Infrastructure (Vercel) ● Edge RPC abstractions (Cloudflare) ● RUM and distributed tracing ● AI (everyone)

Thank You! Sergey Chernyshev @[email protected] https://www.sergeychernyshev.com/ Q&A