Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Rainer Hahnekamp

November 09, 2023
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Programming

Transcript

  1. RainerHahnekamp
    Rainer Hahnekamp
    8. November 2023
    W-JAX München
    Server Components
    Signals
    Meta-Frameworks
    Resumability

    View full-size slide

  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

    View full-size slide

  3. RainerHahnekamp
    Original
    AI

    View full-size slide

  4. RainerHahnekamp
    Agenda
    1. Challenges
    2. Hydration Techniques
    a. Classic
    b. Delayed
    c. "No Hydration"
    3. Signals

    View full-size slide

  5. RainerHahnekamp
    Challenges

    View full-size slide

  6. RainerHahnekamp
    Challenges
    ● Performance
    ● SPAs & "Static Websites"
    ● Rendering Approaches

    View full-size slide

  7. RainerHahnekamp
    SEO

    View full-size slide

  8. RainerHahnekamp
    Faster

    View full-size slide

  9. RainerHahnekamp
    Performance Options
    ● Faster Execution

    View full-size slide

  10. RainerHahnekamp

    View full-size slide

  11. RainerHahnekamp
    Performance Options
    ● Faster Execution
    ● Smaller Bundle Sizes

    View full-size slide

  12. RainerHahnekamp

    View full-size slide

  13. RainerHahnekamp
    Performance Options
    ● Faster Execution
    ● Smaller Bundle Sizes
    ● SSR & Intelligent Hydration

    View full-size slide

  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

    View full-size slide

  15. RainerHahnekamp
    Meta-Framework
    SPA-specific Backend with Hydration support and further Features

    View full-size slide

  16. RainerHahnekamp
    Hydration
    Techniques

    View full-size slide

  17. RainerHahnekamp
    Overview Hydration Techniques
    ● Classic
    ● "No Hydration"
    ● On-Demand

    View full-size slide

  18. RainerHahnekamp
    Client
    Server
    Submit
    Cancel
    Database
    Component
    Load/Send Data to Server
    Dependencies
    User Interaction
    "No Hydration": Remix

    View full-size slide

  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

    View full-size slide

  20. RainerHahnekamp
    Resumability
    Server
    Client
    let a = 1;
    function status() {
    console.log(a++);
    }
    status() // 1
    status() // 2

    View full-size slide

  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

    View full-size slide

  22. RainerHahnekamp
    The Good Old Days

    View full-size slide

  23. RainerHahnekamp
    https://winworldpc.com/screenshot/c903c9ed-4dc0-11e9-8581-fa163e9
    022f0/7d47f94d-4dc1-11e9-8581-fa163e9022f0

    View full-size slide

  24. RainerHahnekamp
    https://regmedia.co.uk/2017/02/02/vb6.png

    View full-size slide

  25. RainerHahnekamp
    https://www.hardhats.org/cs/vis_interdev/images/data.gif

    View full-size slide

  26. RainerHahnekamp
    Thesis → Antithesis → Synthesis
    "Mit dem Alter wird
    man g'scheiter"
    Austrian Saying

    View full-size slide

  27. RainerHahnekamp
    Signals

    View full-size slide

  28. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA

    View full-size slide

  29. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA

    View full-size slide

  30. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA

    View full-size slide

  31. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA

    View full-size slide

  32. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA
    Signal Graph

    View full-size slide

  33. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA
    Signal Graph

    View full-size slide

  34. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA
    Signal Graph

    View full-size slide

  35. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA
    Signal Graph

    View full-size slide

  36. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA
    Signal Graph

    View full-size slide

  37. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA
    Signal Graph

    View full-size slide

  38. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA
    Signal Graph

    View full-size slide

  39. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA
    Signal Graph

    View full-size slide

  40. RainerHahnekamp
    Component Tree Web Application
    Submit
    Cancel
    Component-based Rendering Model
    SPA
    Signal Graph

    View full-size slide

  41. RainerHahnekamp
    Signals
    Reactive Graph representing application state
    Alternative to Component-based rendering model

    View full-size slide

  42. RainerHahnekamp
    SPAs with Signals

    View full-size slide

  43. RainerHahnekamp
    Thanks!!!

    View full-size slide

  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

    View full-size slide