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

Micro frontend and web components

Yas
June 19, 2019

Micro frontend and web components

Yas

June 19, 2019
Tweet

More Decks by Yas

Other Decks in Programming

Transcript

  1. yashints Agenda ▪ Intro ▪ Core ideas ▪ Meet Ali

    and her team ▪ The issue ▪ Trials ▪ Final solution
  2. Lead consultant @Readify Yaser Adel Mehraban @yashints Almond croissant addict

    cleverly disguised as a web developer yashints.dev dev.to/yashints
  3. yashints “ Don’t even consider microservices unless you have a

    system that’s too complex to manage as a monolith. Martin Fowler
  4. yashints “ Don’t even consider micro frontend unless you can

    vertically slice your system to enable your teams to act independently. Me
  5. yashints Technology agnostic Independent deployment Team ownership Develop independently Fast

    loading Smooth user interaction Sharing state Corporate identity Run independently Modular Native support
  6. yashints Technology agnostic Independent deployment Team ownership Develop independently Fast

    loading Smooth user interaction Sharing state Corporate identity Run independently Modular Native support
  7. yashints If you want to go fast, go alone. If

    you want to go far, go together.
  8. yashints Fast loading Native support Team ownership Develop independently Run

    independently Technology agnostic Independent deployment Corporate identity Sharing state Modular Smooth user interaction
  9. yashints Integration vis composition ▪ Build time ▪ Run time

    on client side ▪ Run time on server side
  10. yashints Build time { Search } { Insight } {

    Test Drive } { Order } { Payment } { Inventory } Build Bundle
  11. yashints Fast loading Native support Team ownership Develop independently Technology

    agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
  12. yashints Fast loading Native support Team ownership Develop independently Technology

    agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
  13. yashints Fast loading Native support Team ownership Develop independently Technology

    agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
  14. yashints Fast loading Native support Team ownership Develop independently Technology

    agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
  15. yashints Real use cases ▪ Migrate a large app to

    another framework ▪ Fix a bug in one app and deploy independently ▪ Reuse an entire app ▪ And more…
  16. yashints References ▪ The demo is on my GitHub repo

    yas.fyi/2FeIrI3 ▪ Slides yas.fyi/2Kspzt8 ▪ https://micro-frontends.org/ ▪ A good reference list yas.fyi/2KXHaZD