Server Components, Meta-Frameworks, Signals, Resumability: What the heck?

The statement "Milk lasts longer than some JavaScript frameworks" perfectly captures the fast-paced nature of the frontend world.

However, certain underlying concepts are emerging as standard practices in modern frameworks. These concepts include Resumability, Server Components, Meta-Frameworks, and Signals.

In my talk, I will delve into these concepts and provide practical examples to illustrate their significance. This talk is especially valuable for those who are not full-time front-end developers, as it offers insights into the latest trends and updates in the field.

One thing is for sure. The milk that lasts longer than these new trends hasn’t been innovated yet.

Transcript

1. RainerHahnekamp Rainer Hahnekamp 8. November 2023 W-JAX München Server Components Signals Meta-Frameworks Resumability
2. RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp
3. RainerHahnekamp Original AI
4. RainerHahnekamp Agenda 1. Challenges 2. Hydration Techniques a. Classic b. Delayed c. "No Hydration" 3. Signals
5. RainerHahnekamp Challenges
6. RainerHahnekamp Challenges • Performance • SPAs & "Static Websites" • Rendering Approaches
7. RainerHahnekamp SEO
8. RainerHahnekamp Faster
9. RainerHahnekamp Performance Options • Faster Execution
10. RainerHahnekamp
11. RainerHahnekamp Performance Options • Faster Execution • Smaller Bundle Sizes
12. RainerHahnekamp
13. RainerHahnekamp Performance Options • Faster Execution • Smaller Bundle Sizes • SSR & Intelligent Hydration
14. RainerHahnekamp Performance Options • Faster Execution • Smaller Bundle Sizes • Hydration Client Server Submit Cancel Only static Server Side Rendering & Hydration Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration Innovation Area
15. RainerHahnekamp Meta-Framework SPA-specific Backend with Hydration support and further Features
16. RainerHahnekamp Hydration Techniques
17. RainerHahnekamp Overview Hydration Techniques • Classic • "No Hydration" • On-Demand
18. RainerHahnekamp Client Server Submit Cancel Database Component Load/Send Data to Server Dependencies User Interaction "No Hydration": Remix
19. RainerHahnekamp First Request App Interactive Static HTML User Action 1 User Action 2 Server Client Non-Interactive Components Data Fetching Logic Non-Interactive Components Data Fetching Logic Non-Interactive Components Data Fetching Logic "No Hydration": Server Components
20. RainerHahnekamp Resumability Server Client let a = 1; function status() { console.log(a++); } status() // 1 status() // 2
21. RainerHahnekamp First Request App Interactive User Action 1 User Action 2 Server Client Static HTML Action-specific Code Action-specific Code Static HTML "On Demand": Qwik
22. RainerHahnekamp The Good Old Days
23. RainerHahnekamp https://winworldpc.com/screenshot/c903c9ed-4dc0-11e9-8581-fa163e9 022f0/7d47f94d-4dc1-11e9-8581-fa163e9022f0
24. RainerHahnekamp https://regmedia.co.uk/2017/02/02/vb6.png
25. RainerHahnekamp https://www.hardhats.org/cs/vis_interdev/images/data.gif
26. RainerHahnekamp Thesis → Antithesis → Synthesis "Mit dem Alter wird man g'scheiter" Austrian Saying
27. RainerHahnekamp Signals
28. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA
29. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA
30. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA
31. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA
32. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA Signal Graph
33. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA Signal Graph
34. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA Signal Graph
35. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA Signal Graph
36. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA Signal Graph
37. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA Signal Graph
38. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA Signal Graph
39. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA Signal Graph
40. RainerHahnekamp Component Tree Web Application Submit Cancel Component-based Rendering Model SPA Signal Graph
41. RainerHahnekamp Signals Reactive Graph representing application state Alternative to Component-based rendering model
42. RainerHahnekamp SPAs with Signals
43. RainerHahnekamp Thanks!!!
44. RainerHahnekamp Contact Data @Rainer Hahnekamp https://www.youtube.com/@RainerHahnekamp https://www.youtube.com/@ng-news https://www.angulararchitects.io https://www.rainerhahnekamp.com https://github.com/softarc-consulting/sheriff