Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

RainerHahnekamp Original AI

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

RainerHahnekamp Challenges

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

RainerHahnekamp SEO

Slide 8

Slide 8 text

RainerHahnekamp Faster

Slide 9

Slide 9 text

RainerHahnekamp Performance Options ● Faster Execution

Slide 10

Slide 10 text

RainerHahnekamp

Slide 11

Slide 11 text

RainerHahnekamp Performance Options ● Faster Execution ● Smaller Bundle Sizes

Slide 12

Slide 12 text

RainerHahnekamp

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

RainerHahnekamp Hydration Techniques

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

RainerHahnekamp The Good Old Days

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

RainerHahnekamp Signals

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

RainerHahnekamp SPAs with Signals

Slide 43

Slide 43 text

RainerHahnekamp Thanks!!!

Slide 44

Slide 44 text

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