Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Flexible Architectures for Web Performance

Flexible Architectures for Web Performance

Today in the web performance space we have a lot of technologies that were invented to speed up various parts of the applications. Many of them are successful when they can be just put in place without changing anything in the applications or at least with minimal changes, like network protocols or image formats.

However some more advanced features like progressive web apps, edge cache for HTML responses, edge workers and few other features like that are hard to implement in the regular web applications incrementally.

To successfully implement them today, applications have to be built with these technologies in mind from the beginning. This rigidity is something that blocks a lot of innovation from reaching the real world applications that desperately need to get faster.

In this talk, Sergey Chernyshev discusses several of these technologies, highlight the importance of Flexible Architectures and proposes a radical idea of Borderless Computation as a possible solution for the problem.

Sergey Chernyshev

May 21, 2024
Tweet

More Decks by Sergey Chernyshev

Other Decks in Technology

Transcript

  1. Orbit Station Moon Base Satellite Rover Mars Base “Cloud” Mission

    Control Center Satellites Latency (not to scale) Interplanetary Computation
  2. Close to Earth What plant is it? Check it! Scan

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

    Scan the plant with your camera and click the button to…
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. All or Nothing • Having many architectures is rarely possible

    • Search is usually an exception • “Everything is dynamic” is a usual excuse
  12. 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
  13. • PHP • Java • Python • NodeJS Web Pages

    CC BY atoach https://www.flickr.com/photos/atoach/25370605889
  14. 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?
  15. Edge Workers & CDNs • Cloudflare Edge workers • Fastly

    Edge Compute • Amazon Lambda at Edge
  16. 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
  17. New Architectures • Every few years • . • .

    • . • . • . • . • . • . • . • . • NEW!
  18. 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
  19. 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)