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
   

   View Slide

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

   View Slide

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

   View Slide

4. 2010
   2005 2015 2020
   

   View Slide

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

   View Slide

6. It's all about SPEED
   

   View Slide

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

   View Slide

8. Reducing framework's code
   

   View Slide

9. View Slide

10. Submit
    Cancel
    

    View Slide

11. Submit
    Cancel
    1. Click
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. Source
    Build
    Source Code Bundler
    Source
    Code
    Framework
    Framework
    

    View Slide

21. Source
    Build
    Source Code
    Compilation
    Source
    Code
    Framework
    

    View Slide

22. JavaScript Bundle
    Source Code
    JavaScript Bundle
    Source Code
    3. Interpret
    

    View Slide

23. Reducing our code
    

    View Slide

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
    

    View Slide

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

    View Slide

26. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. 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}
    
    ))}
    
    
    );
    }
    

    View Slide

33. Different Approaches
    

    View Slide

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
    

    View Slide

35. What should we do now?
    

    View Slide

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

    View Slide

37. Reality & Perception
    

    View Slide

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

    View Slide

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

    View Slide

40. View Slide

41. View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide