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

Prisma Typescript Berlim 🇩🇪

Prisma Typescript Berlim 🇩🇪

Abstract

Module Federation is a game-changing feature in Webpack 5 that allows developers to dynamically load code from remote servers at runtime. This new approach to JavaScript architecture allows you to break your application into smaller, independent modules that can be easily shared and integrated into larger applications. In this talk, we will dive into the details of Module Federation and explore how it can be used to create scalable, maintainable micro-frontend applications. Join us to learn how to improve the performance and flexibility of your React apps with Module Federation.

Pitch

What excites me the most about this talk is the opportunity of showing how Module Federation can be used to create micro-frontends. I have been working with micro-frontends for a while now, and I have seen how it can be a game-changer in JavaScript architecture. I have also seen how it can be difficult to implement, and I think that Module Federation can be a great tool to make it easier.

Vitor Alencar

December 11, 2022
Tweet

More Decks by Vitor Alencar

Other Decks in Programming

Transcript

  1. @vitormalencar
    Hi 👋
    Hi 👋 TypeScript Berlin
    TypeScript Berlin 🇩🇪
    🇩🇪
    Great to be here with you all

    View full-size slide

  2. @vitormalencar
    Module-Federation
    Module-Federation
    A game-changer in JavaScript architecture

    View full-size slide

  3. MY "WHY" 🤔 💭
    WHY I DO WHAT I DO
    I believe it is possible to change
    the world through technology.....

    View full-size slide

  4. @vitormalencar

    View full-size slide

  5. @vitormalencar

    View full-size slide

  6. Hi 👋,
    I'm Vitor Alencar.
    I'm a software engineer!
    I helped improve Brazil education I helped
    people share their opinions online now I'm
    helping people get their money back!

    View full-size slide

  7. @vitormalencar
    150K+
    05
    COURSES
    200H
    CONTENT
    100+
    VIDEOS
    04
    PODCASTS
    PEOPLE
    IMPACTED

    View full-size slide

  8. @vitormalencar
    @vitormalencar
    @vitormalencar
    github, twitter, instagram,linkedin ....

    View full-size slide

  9. @vitormalencar
    Microfrontends are especially useful when we have
    projects with dozens of developers working together
    in a large business domain
    Why Micro
    front ends ?

    View full-size slide

  10. @vitormalencar
    Microsfot
    Google

    Airbnb
    Netflix

    You?
    Spotify

    View full-size slide

  11. @vitormalencar
    Monolith to Microservices

    View full-size slide

  12. @vitormalencar
    MFE similar methodology
    Be able to be managed from separate teams
    Deploy independently
    Small application set
    Better Domain separation

    View full-size slide

  13. @vitormalencar
    Is about scaling teams

    View full-size slide

  14. @vitormalencar
    Sharing code is Hard
    and it gets harder and harder on a large scale

    View full-size slide

  15. @vitormalencar
    Let's check the current state of tools out there for
    code sharing
    What are our
    options now?

    View full-size slide

  16. @vitormalencar

    View full-size slide

  17. @vitormalencar

    View full-size slide

  18. @vitormalencar

    View full-size slide

  19. @vitormalencar

    View full-size slide

  20. @vitormalencar
    Why is hard
    NPM is slow
    It grows in complexity
    Custom-made tools get dated fast
    Sharing is usually primitive

    View full-size slide

  21. @vitormalencar
    The Goal
    Performance


    Build Time Easy sharing

    View full-size slide

  22. @vitormalencar
    Module federation

    View full-size slide

  23. @vitormalencar
    What is module federation
    Share modules
    Share components
    Share Functions
    Share data
    Over the wire

    View full-size slide

  24. @vitormalencar
    The place that webpack is initialized during page
    load
    Host
    application

    View full-size slide

  25. @vitormalencar
    Another webpack build that will be consumed by
    other application
    Remote
    application

    View full-size slide

  26. @vitormalencar
    What is module federation
    Share modules / components / functions / data
    deploy independent SPA's
    Over the wire at runtime
    Redundancy and self-healing powers

    View full-size slide

  27. @vitormalencar
    Capabilities
    Dynamic updates over the wire
    Minimal overhead
    No dev env changes
    Can be handled by independent teams

    View full-size slide

  28. @vitormalencar

    View full-size slide

  29. @vitormalencar

    View full-size slide

  30. @vitormalencar
    Recap
    Fast updates
    Better control
    independent Deploys

    View full-size slide

  31. @vitormalencar

    View full-size slide

  32. @vitormalencar

    View full-size slide

  33. @vitormalencar
    Consistency and better updates
    Design system
    library

    View full-size slide

  34. @vitormalencar
    Error Handling
    How to catch Errors and prevent runtime white screen

    View full-size slide

  35. @vitormalencar
    Error
    boundary and
    similar

    View full-size slide

  36. @vitormalencar
    TS
    Support ?

    View full-size slide

  37. @vitormalencar
    Sharing State
    Handle state changes across MFE's

    View full-size slide

  38. @vitormalencar
    It works, just be reactive
    Redux
    Context
    RXjs
    Zustand
    .....

    View full-size slide

  39. @vitormalencar

    View full-size slide

  40. @vitormalencar
    Bidirectional Hosts

    View full-size slide

  41. @vitormalencar

    View full-size slide

  42. @vitormalencar

    View full-size slide

  43. @vitormalencar
    Self-Healing Capabilities


    Fallback to remote apps vendors if a dependency fails to load.

    View full-size slide

  44. @vitormalencar

    View full-size slide

  45. @vitormalencar

    View full-size slide

  46. @vitormalencar
    Dynamic Federation
    Handeling module injection at runtime

    View full-size slide

  47. @vitormalencar
    And much more..

    View full-size slide

  48. @vitormalencar

    View full-size slide

  49. Danke!
    @vitormalencar

    View full-size slide