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

Micro-frontends 101

861e71f9f52486eb8bba75261a923004?s=47 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

861e71f9f52486eb8bba75261a923004?s=128

Azizi Yazit

November 01, 2020
Tweet

Transcript

  1. Micro-frontends @aziziyazit /aziziyazit /ngdesignsystem 101

  2. 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.
  3. 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.
  4. 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
  5. App Modules Components Silicon Valley Product Based Company Kuala Lumpur

    Dubai Business Scale
  6. App Modules Components Silicon Valley Silicon Valley Kuala Lumpur Dubai

    zzz Monolith 8:00 am 11:00 pm 7:00 pm After Before
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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.