The presentation by Sergey Chernychev at the NY Web Performance Meetup discusses the need for flexible architectures in web development, highlighting the limitations of rigid systems and the challenges posed by new technologies. It emphasizes the importance of progressive enhancement, breaking applications into manageable parts, and making adaptable architectural choices. Notable developments such as edge computing, serverless functions, and advancements in JavaScript frameworks are also addressed.

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

2. Rover
(not to scale)
Interplanetary Computation

3. Satellite
Mars Base
(not to scale)
Rover
Interplanetary Computation

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

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

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

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

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

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

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

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

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

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

14. Flexible
Architectures

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

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

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

18. Slower without Re-Architecture

19. Slower without Re-Architecture
…based on my experience…

20. Today’s
Architectures
web-specific

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

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

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

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

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

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

27. Web Workers
● What’s your use case?

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

29. Borderless Code
you don’t care where it runs

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

31. No Framework
Necessary
you can do it without a framework

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

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

34. Thank You!
Sergey Chernyshev
@SergeyChe@WebPerf.social
https://www.sergeychernyshev.com/
Q&A