Future of Frontend Development

Slides of my talk at the WeAreDevelopers Congress 2022 in Berlin.

Transcript

1. 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
2. About Me... • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consulting @RainerHahnekamp Professional NgRx https://www.ng-news.com https://www.youtube.com /c/RainerHahnekamp
3. A J A X Birth of JavaScript 2010 2005 1996 2015 2020
4. 2010 2005 2015 2020
5. The Big 3 Source: https://www.standard.co.uk/sport/tennis/tennis-2021-djokovic-nadal-serena-federer-b424996.html
6. It's all about SPEED
7. How to improve SPEED? • Run Faster ◦ JavaScript ◦ Rendering • Run Less ◦ Framework's Code ◦ Our Code
8. Reducing framework's code
10. Submit Cancel
11. Submit Cancel 1. Click
12. JavaScript Bundle Submit Cancel 2. DOM Event 1. Click
13. JavaScript Bundle Source Code Submit Cancel 2. DOM Event 3. Interpret 1. Click
14. JavaScript Bundle Source Code Submit Cancel 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM 1. Click
15. JavaScript Bundle Source Code Submit Cancel 1. Click 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM
16. JavaScript Bundle Source Code Submit Cancel 1. Click 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM
17. JavaScript Bundle Source Code Submit Cancel 1. Click 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM
18. Interpreter… Do we know that from somewhere else???
19. 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();
20. Source Build Source Code Bundler Source Code Framework Framework
21. Source Build Source Code Compilation Source Code Framework
22. JavaScript Bundle Source Code JavaScript Bundle Source Code 3. Interpret
23. Reducing our code
24. 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
25. Possible Measures • JIT Hydration • Hydrate only interactive components • Move non-interactive parts of components to the backend • Code splitting
27. Lifecycle: data-fetching component Load Data from Server Become Interactive Send Data to Server
28. Lots of dependencies for Server-communication • GraphQL • OpenAPI • State Management ◦ Redux • Transformation & Validation ◦ date-fns ◦ lodash ◦ zod ◦ …
29. Component Load Data from Server Lifecycle: data-fetching component Dependencies User Interaction
30. Client Server Submit Cancel Database Component Load Data from Server Dependencies User Interaction
31. Client Server Submit Cancel Database Component Load/Send Data to Server Dependencies User Interaction
32. Example Code // server part export const loader: LoaderFunction = async () => { const workshops = await loadWorkshops(); return json<LoaderData>({ workshops }); }; // client part export default function WorkshopsIndex() { const { workshops } = useLoaderData<LoaderData>(); return ( <div> <h2>Workshops</h2> <div> {workshops.map((workshop, ix) => ( <Link key={ix} to={workshop.id} className="link"> <p>{workshop.title}</p> </Link> ))} </div> </div> ); }
33. Different Approaches
34. 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
35. What should we do now?
36. What should you do now? © https://keepcalms.com/
37. Reality & Perception
38. https://2021.stateofjs.com/en-US/
39. https://2021.stateofjs.com/en-US/
42. • Existing frameworks have baked-in solutions for a variety of use cases • Newcomers only excel in a certain spot • Frameworks adopt to new changes
43. • Is it really always about speed? • Focus and become good in one thing, you recognize and can apply patterns easily
44. 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
45. 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
46. 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
47. 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