Future of Frontend Development

For the last couple of years, React, Vue & Angular have positioned themselves as the "Big 3" frameworks for frontend development. They still add new features, but not at that rate compared to the early days. Did we already reach the peak?

On the contrary! Svelte's compiler approach, React's Server Components, or Qwik's resumeability are groundbreaking changes that will shape the next generation. If the "Big 3" will adopt or vanish, is another topic...

Join my talk and see how these new approaches are expanding the frontiers even more.

Transcript

1. The Future of Frontend Development Back to the Future Rainer Hahnekamp 12.10.2022 Devoxx Belgium
2. About Me... • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consulting @RainerHahnekamp Spring for Angular Devs https://www.ng-news.com https://www.youtube.com /c/RainerHahnekamp
3. Agenda 1. Past & Present 2. Run Faster a. JavaScript b. Rendering 3. Run Less a. Framework's Code b. Our Code 4. (Personal) Assessment 5. Summary 6. Q&A
4. Past & Present
5. A J A X Birth of JavaScript 2010 2005 1996 2015 2020
6. 2010 2005 2015 2020
7. The Big 3 Source: https://www.standard.co.uk/sport/tennis/tennis-2021-djokovic-nadal-serena-federer-b424996.html
8. It's all about SPEED
9. Run Faster • Replace JavaScript with another language? ◦ WebAssembly ◦ Go/Rust • Improve the Engine ◦ V8: Chromium, Node, Deno ◦ JavaScriptCore: Safari, Bun • Improve the Rendering
10. Run Less: Framework's Code
12. Submit Cancel
13. Submit Cancel 1. Click
14. JavaScript Bundle Submit Cancel 2. DOM Event 1. Click
15. JavaScript Bundle Source Code Submit Cancel 2. DOM Event 3. Interpret 1. Click
16. JavaScript Bundle Source Code Submit Cancel 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM 1. Click
17. JavaScript Bundle Source Code Submit Cancel 1. Click 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM
18. JavaScript Bundle Source Code Submit Cancel 1. Click 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM
19. JavaScript Bundle Source Code Submit Cancel 1. Click 2. DOM Event Submit Cancel 3. Interpret 4. Update DOM
20. Interpreter… Do we know that from somewhere else???
21. 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();
22. Source Build Source Code Bundler Source Code Framework Framework
23. Source Build Source Code Compilation Source Code Framework
24. JavaScript Bundle Compiled Source Code JavaScript Bundle Source Code 3. Interpret
25. Run Less: Our Code
26. Client Server Submit Cancel Only static Server Side Rendering Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration Innovation Area
27. Possible Approaches 1. Code splitting a. via a Router b. Common Technique 2. Data Fetching on the Server 3. Non-interactive Components on the Server 4. On-Demand Hydration
28. Different Technologies
29. First Request Static HTML Classic Hydration App Interactive User Action 1 User Action 2 Server Client
30. First Request Static HTML Data Fetching on the Server User Action 1 User Action 2 Server Client Next.js, Remix,... Data Fetching Logic Data Fetching Logic Data Fetching Logic App Interactive
31. Lots of dependencies for Server-communication • GraphQL • OpenAPI • State Management ◦ Redux • Transformation & Validation ◦ date-fns ◦ lodash ◦ zod ◦ markdown
32. First Request App Interactive Static HTML Non-Interactive Components on the Server User Action 1 User Action 2 Server Client React Server Component, Astro,... Non-Interactive Components Data Fetching Logic Non-Interactive Components Data Fetching Logic Non-Interactive Components Data Fetching Logic
33. Island Architecture with Astro
34. First Request App Interactive On-Demand Hydration User Action 1 User Action 2 Server Client Qwik, Astro,... Static HTML Action-specific Code Action-specific Code Static HTML
35. Personal Assessment
36. Reality & Perception
37. https://2021.stateofjs.com/en-US/
43. • Existing frameworks have baked-in solutions for a variety of use cases • Newcomers only excel in a certain spot • Frameworks can adopt to new changes
44. Is speed everything?
45. Summary • Tools will be replaced by re-writes in Go, Rust, etc. • JavaScript as "web language" stays untouched • Zero-Size Frameworks??? • Return of the Backend
46. Thanks!!!