Micro-frontends 101

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

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.