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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. Past & Present
   

   View Slide

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

   View Slide

6. 2010
   2005 2015 2020
   

   View Slide

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

   View Slide

8. It's all about SPEED
   

   View Slide

9. Run Faster
   ● Replace JavaScript with another language?
   ○ WebAssembly
   ○ Go/Rust
   ● Improve the Engine
   ○ V8: Chromium, Node, Deno
   ○ JavaScriptCore: Safari, Bun
   ● Improve the Rendering
   

   View Slide

10. Run Less:
    Framework's Code
    

    View Slide

11. View Slide

12. Submit
    Cancel
    

    View Slide

13. Submit
    Cancel
    1. Click
    

    View Slide

14. JavaScript Bundle
    Submit
    Cancel
    2. DOM
    Event
    1. Click
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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();
    

    View Slide

22. Source
    Build
    Source Code Bundler
    Source
    Code
    Framework
    Framework
    

    View Slide

23. Source
    Build
    Source Code
    Compilation
    Source
    Code
    Framework
    

    View Slide

24. JavaScript Bundle
    Compiled
    Source Code
    JavaScript Bundle
    Source Code
    3. Interpret
    

    View Slide

25. Run Less:
    Our Code
    

    View Slide

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
    

    View Slide

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
    

    View Slide

28. Different Technologies
    

    View Slide

29. First Request
    Static HTML
    Classic Hydration
    App Interactive User Action 1 User Action 2
    Server
    Client
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

33. Island Architecture with Astro
    

    View Slide

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
    

    View Slide

35. Personal
    Assessment
    

    View Slide

36. Reality & Perception
    

    View Slide

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

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

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
    

    View Slide

44. Is speed everything?
    

    View Slide

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
    

    View Slide

46. Thanks!!!
    

    View Slide