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

Micro-frontends 101

Azizi Yazit
November 01, 2020

Micro-frontends 101

Key Benefits of Micro-Frontends
- Technologies agnostic
- Autonomous teams
- Scalable organisations with decoupled
- High cohesive modular codebases

Azizi Yazit

November 01, 2020
Tweet

More Decks by Azizi Yazit

Other Decks in Technology

Transcript

  1. Micro-Frontends Should Assess Trial Adopt Huh? Why not? Let’s try!

    In the November 2016 issue of the Thoughtworks Technology Radar, we listed micro frontends as a technique that organisations should Assess. We later promoted it into Trial, and finally into Adopt.
  2. What is Micro-Services? Micro-services is an approach to developing a

    single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms. These services are built around business capabilities and independently deployable by fully automated deployment machinery.
  3. What is Micro-Services? Micro-Frontends is an approach to developing a

    single application as a suite of small apps, each running in its own process and communicating with lightweight mechanisms. These apps are built around business capabilities and independently deployable by fully automated deployment machinery. Frontends
  4. App Modules Components Silicon Valley Silicon Valley Kuala Lumpur Dubai

    zzz Monolith 8:00 am 11:00 pm 7:00 pm After Before
  5. Silicon Valley Kuala Lumpur Dubai zzz Monolith 8:00 am 11:00

    pm 7:00 pm Daily Standup Code Review Release & Deployment Dependencies Organisations which design system are constrained to produce designs which copies of the communication structures of these organisations Mel Conway Gaps
  6. Silicon Valley 8:00 am Kuala Lumpur zzz 11:00 pm Dubai

    7:00 pm Inverse Conway Maneuver Re-organise structure Build & Test Pipeline Production Composed into one Desired Architecture
  7. Silicon Valley 8:00 am Kuala Lumpur zzz 11:00 pm Dubai

    7:00 pm Inverse Conway Maneuver Key Benefits Autonomous Cognitive Load Cohesive structure Loose Coupled Micro-services reinforce modular structure, which is particularly important for larger teams Martin Fowler
  8. Architectural Style abc a b c Monolith Modular Monolith Micro-frontends

    a b c v project v app v moduleA > components > moduleB > moduleC v project v workspace v apps v appA v module > components > appB > appC v projectA > projectB > projectC v app v moduleA > moduleB > components
  9. Monolith Architectural Style abc 1 All the code is packed

    into single process All the code deployed as a single process Challenges tightly coupled ownership reliability Advantages simplicity cross cutting concerns perfomance App
  10. Modular Monolith Architectural Style 2 A subset of the single

    process A single process consists of separated modules Challenges deployment coupling reliability Advantages modular scalable ownership-boundaries a b c App
  11. Micro Frontends Architectural Style 3 Independent deployable apps modelled around

    a business domain Challenges complex performance Advantages highly scalable autonomous technology agnostic App App B App C Module Federation Webpack config P P nginx proxy port:3001 port:3002 port:3003 libs port:3000
  12. Architectural Style Unfortunately, people have come to view the monolith

    as something to be avoided --as something that is inherently problematic. I've met multiple people for whom the term monolith is synonymous with legacy. This is a problem. A monolithic architecture is a CHOICE, and a valid one at that.