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

Future of Frontend Development

Future of Frontend Development

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

A2f690169d04f341ed1847080fe49194?s=128

Rainer Hahnekamp

June 15, 2022
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

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

  9. None
  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
  26. None
  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/

  40. None
  41. None
  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