Slide 1

Slide 1 text

Angular Meetup Graz Rainer Hahnekamp 24.5.2022 Angular Meetup Graz Rainer Hahnekamp 24.5.2022 To New Frontiers To New Frontiers The Future of Frontend Development Rainer Hahnekamp 14.6.2022

Slide 2

Slide 2 text

About Me... ● Rainer Hahnekamp ANGULARarchitects.io ● Trainings and Consulting @RainerHahnekamp Professional NgRx https://www.ng-news.com https://www.youtube.com /c/RainerHahnekamp

Slide 3

Slide 3 text

A J A X Birth of JavaScript 2010 2005 1996 2015 2020

Slide 4

Slide 4 text

2010 2005 2015 2020

Slide 5

Slide 5 text

The Big 3 Source: https://www.standard.co.uk/sport/tennis/tennis-2021-djokovic-nadal-serena-federer-b424996.html

Slide 6

Slide 6 text

It's all about SPEED

Slide 7

Slide 7 text

How to improve SPEED? ● Run Faster ○ JavaScript ○ Rendering ● Run Less ○ Framework's Code ○ Our Code

Slide 8

Slide 8 text

Reducing framework's code

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Submit Cancel

Slide 11

Slide 11 text

Submit Cancel 1. Click

Slide 12

Slide 12 text

JavaScript Bundle Submit Cancel 2. DOM Event 1. Click

Slide 13

Slide 13 text

JavaScript Bundle Source Code Submit Cancel 2. DOM Event 3. Interpret 1. Click

Slide 14

Slide 14 text

JavaScript Bundle Source Code Submit Cancel 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM 1. Click

Slide 15

Slide 15 text

JavaScript Bundle Source Code Submit Cancel 1. Click 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM

Slide 16

Slide 16 text

JavaScript Bundle Source Code Submit Cancel 1. Click 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM

Slide 17

Slide 17 text

JavaScript Bundle Source Code Submit Cancel 1. Click 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM

Slide 18

Slide 18 text

Interpreter… Do we know that from somewhere else???

Slide 19

Slide 19 text

Pseudocode: compiled vs. interpreted Compiled const button = document.createElement("button"); button.addEventListener("click", clickHandler); document.append(button); Interpreted const otherButton = { type: "button", label: "More Info", click: clickHandler }; class Framework { elements = []; addElement(element) { this.elements.push(element); } render() { for (const element of this.elements) { if (isComponent(element)) { renderComponent(element); } } } } new Framework().addElement(button).render();

Slide 20

Slide 20 text

Source Build Source Code Bundler Source Code Framework Framework

Slide 21

Slide 21 text

Source Build Source Code Compilation Source Code Framework

Slide 22

Slide 22 text

JavaScript Bundle Source Code JavaScript Bundle Source Code 3. Interpret

Slide 23

Slide 23 text

Reducing our code

Slide 24

Slide 24 text

Client Server Browser Application Step 1: Server-Side Rendering Submit Cancel Only static Browser Application Application Interactive Step 2: Hydration Server Side Rendering Innovation Area

Slide 25

Slide 25 text

Possible Measures ● JIT Hydration ● Hydrate only interactive components ● Move non-interactive parts of components to the backend ● Code splitting

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Lifecycle: data-fetching component Load Data from Server Become Interactive Send Data to Server

Slide 28

Slide 28 text

Lots of dependencies for Server-communication ● GraphQL ● OpenAPI ● State Management ○ Redux ● Transformation & Validation ○ date-fns ○ lodash ○ zod ○ …

Slide 29

Slide 29 text

Component Load Data from Server Lifecycle: data-fetching component Dependencies User Interaction

Slide 30

Slide 30 text

Client Server Submit Cancel Database Component Load Data from Server Dependencies User Interaction

Slide 31

Slide 31 text

Client Server Submit Cancel Database Component Load/Send Data to Server Dependencies User Interaction

Slide 32

Slide 32 text

Example Code // server part export const loader: LoaderFunction = async () => { const workshops = await loadWorkshops(); return json({ workshops }); }; // client part export default function WorkshopsIndex() { const { workshops } = useLoaderData(); return (

Workshops

{workshops.map((workshop, ix) => (

{workshop.title}

))}
); }

Slide 33

Slide 33 text

Different Approaches

Slide 34

Slide 34 text

Future of Frontend Development ● Tools will be replaced by re-writes in Go, Rust, etc. ● JavaScript as "web language" stays untouched ● Zero-Size Frameworks??? ● Return of the Backend

Slide 35

Slide 35 text

What should we do now?

Slide 36

Slide 36 text

What should you do now? © https://keepcalms.com/

Slide 37

Slide 37 text

Reality & Perception

Slide 38

Slide 38 text

https://2021.stateofjs.com/en-US/

Slide 39

Slide 39 text

https://2021.stateofjs.com/en-US/

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

● Existing frameworks have baked-in solutions for a variety of use cases ● Newcomers only excel in a certain spot ● Frameworks adopt to new changes

Slide 43

Slide 43 text

● Is it really always about speed? ● Focus and become good in one thing, you recognize and can apply patterns easily

Slide 44

Slide 44 text

Further Reading 1/4 ● Experiences. Web. frameworks. future. Me. ○ Igor Minar ○ https://igor.dev/posts/experiences-web-frameworks-future-me/ ● How React server components work: an in-depth guide ○ Chung Wu ○ https://www.plasmic.app/blog/how-react-server-components-work ● Virtual DOM is pure overhead ○ Rich Harris ○ https://svelte.dev/blog/virtual-dom-is-pure-overhead

Slide 45

Slide 45 text

Further Reading 2/4 ● Conquering JavaScript Hydration ○ Ryan Carnatio ○ https://www.plasmic.app/blog/how-react-server-components-work ● Why efficient hydration in JavaScript frameworks is so challenging ○ Ryan Carniato ○ https://dev.to/this-is-learning/why-efficient-hydration-in-javascript-frameworks-is-so-challengi ng-1ca3 ● JavaScript innovation isn't slowing down ○ Interview with Ryan Carniato ○ https://www.infoworld.com/article/3626348/solidjs-creator-javascript-innovation-isnt-slowing- down.html

Slide 46

Slide 46 text

Further Reading 3/4 ● Hydration is Pure Overhead ○ Misko Hevery ○ https://www.builder.io/blog/hydration-is-pure-overhead ● Remix: The Yang to React's Yin ○ Kent C. Dodds ○ https://kentcdodds.com/blog/remix-the-yang-to-react-s-yin ● Island Architecture ○ Maina Wycliffe ○ https://dev.to/this-is-learning/island-architecture-5e87 ● Why efficient hydration in JavaScript frameworks is so challenging ○ Ryan Carniato

Slide 47

Slide 47 text

Further Reading ● Why efficient hydration in JavaScript frameworks is so challenging ○ Ryan Carniato ○ https://dev.to/this-is-learning/why-efficient-hydration-in-javascript-frameworks-is-so-challengi ng-1ca3 ● https://patterns.dev ○ Performance Patterns ○ Rendering Patterns