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

Micro Frontends - A microservice approach to th...

Micro Frontends - A microservice approach to the modern web - Oredev 2019

Ivan Jovanovic

November 08, 2019
Tweet

More Decks by Ivan Jovanovic

Other Decks in Technology

Transcript

  1. Microservice principles • Lightweight protocol between services • Small services,

    one job per service • Service independence • Easier to understand, develop and test • Speeds up development • Enables continues delivery and deployment
  2. + +

  3. Root app App 3 App 2 App 1 Microservice 3

    Microservice 2 Microservice 1
  4. How did we get here? • Monolith full stack apps

    • Frontend and backend apps • Microservices in the backend • Components on the UI • Micro frontends
  5. What problem does it solve? • Use new frontend framework

    on the old architecture • No more shared codebases and conflicts • Independent deployments • Each team can pick their own stack • You can easily scale your frontend app
  6. External app bootstrapping • Code lives on different server •

    Independent deployment • Communication is done through: • Window object • Event bus
  7. Event bus - Eev • https://github.com/chrisdavies/eev • Less than 500

    bytes minified + zipped • Really fast • Zero dependencies • Simple
  8. IFrames • Code lives on different server • Independent deployment

    • Communication is done through browser “Event bus”
  9. Single-spa library • https://github.com/CanopyTax/single-spa • Use multiple frameworks on the

    same page without refreshing the page • Write code using a new framework, without rewriting your existing app • Lazy load code for improved initial load time
  10. Single-spa library • Code lives on the same server •

    Everything is bundled and deployed at the same time • Communication is done through: • Window object • Event bus • Shared state (Redux etc.) • Whatever works for you…
  11. Micro Frontends Cons • More code and dependencies to maintain

    • Big bundles • Performance, a lot of code in the browser
  12. Conclusion • Don’t use this if you have a simple

    app • Use micro frontends to make things easier, not complicated • Micro frontends architecture doesn’t mean to use every framework in the world • Don’t forget to make standards across micro apps