UKM - MFE

Transcript

1. 11 JUN 2025 3:50 (RABU ) PETANG Bangi Convention Centre BCC Micro-Frontends: Membina Aplikasi Modular dan Boleh Skala
 Micro-Frontends: Building Modular and Scalable Applications Oleh: En. Azizi Yazit
2. Azizi Yazit UI Architect /aziziyazit Micro-Frontends: Building Modular and Scalable Applications
3. Architectural Styles Monolith Modular Monolith Micro Frontends
4. To make the differences between monolith and micro frontends easier to grasp, I’ll use a lorry delivery analogy — it’s a practical way to show how each one organises and delivers features. /aziziyazit
5. All features are bundled into one codebase. Like loading every kind of item into one big truck. /aziziyazit Monolithic Lorry Electronics, groceries, furniture & documents
6. All features are bundled into one codebase. Like loading every kind of item into one big truck. /aziziyazit Monolithic Lorry Electronics, groceries, furniture & documents Technology Lock-In !
7. Scaling the delivery of just one item is impossible — you'd have to scale the whole lorry, which is wasteful. /aziziyazit Monolithic Lorry
8. Scaling the delivery of just one item is impossible — you'd have to scale the whole lorry, which is wasteful. /aziziyazit Monolithic Lorry Scale Limitations !
9. If one type of cargo causes a problem, the whole delivery is delayed — just like a bug in one feature can break the whole app. /aziziyazit Monolithic Lorry
10. If one type of cargo causes a problem, the whole delivery is delayed — just like a bug in one feature can break the whole app. /aziziyazit Monolithic Lorry Electronics, groceries, furniture & documents Harder Fault Isolation !
11. You can’t deliver just groceries or just documents — you always have to move the whole lorry, even for a small change. /aziziyazit Monolithic Lorry
12. You can’t deliver just groceries or just documents — you always have to move the whole lorry, even for a small change. /aziziyazit Monolithic Lorry Tight Coupling !
13. A n y r o u t e c h a n g e o r maintenance means the entire lorry is out of service — just like updating one feature means redeploying the whole app. /aziziyazit Monolithic Lorry
14. A n y r o u t e c h a n g e o r maintenance means the entire lorry is out of service — just like updating one feature means redeploying the whole app. /aziziyazit Monolithic Lorry Deployment Bottlenecks !
15. Micro Lorries
16. Each feature is a separate application with its own c o d e b a s e , t e a m , a n d deployment — like each lorry running independently. /aziziyazit Micro Lorries
17. Each feature is a separate application with its own c o d e b a s e , t e a m , a n d deployment — like each lorry running independently. /aziziyazit Micro Lorries Independent Codebases
18. You can deploy or update one lorry (micro frontend) without touching the others. /aziziyazit Micro Lorries
19. You can deploy or update one lorry (micro frontend) without touching the others. /aziziyazit Micro Lorries Independent Deployment
20. If the electronics lorry breaks down, the groceries and documents keep running — fault isolation is much better. /aziziyazit Micro Lorries
21. If the electronics lorry breaks down, the groceries and documents keep running — fault isolation is much better. /aziziyazit Micro Lorries Strong Fault Isolation
22. Each team can choose its own tools or framework if needed — like different lorries having different engines or GPS systems. /aziziyazit Micro Lorries
23. Each team can choose its own tools or framework if needed — like different lorries having different engines or GPS systems. /aziziyazit Micro Lorries Technology Flexibility
24. Scaling is flexible: if demand for groceries rises, you just add more grocery lorries, without affecting others. /aziziyazit Micro Lorries
25. Scaling is flexible: if demand for groceries rises, you just add more grocery lorries, without affecting others. /aziziyazit Micro Lorries Loose Coupling
26. Technology Lock-In /aziziyazit Monolithic Frontend Auth Products Product Details Cart Checkout Payment Application Modules Scale Limitations Harder Fault Isolation Tight Coupling Deployment Bottlenecks
27. Independent Codebases /aziziyazit Micro Frontends Independent Deployment Strong Fault Isolation Technology Flexibility Loose Coupling Auth Products Product Details Cart Checkout Payment Applications
28. Architectural Styles Source Control CI / CD Production UI Composition MFE-A MFE-B MFE-C App Shell http://mfe-a http://mfe-b http://mfe-c
29. Module Federation (WebPack) Remote:http://mfe-a App Shell Remote:http://mfe-b Remote:http://mfe-c Exposed: http://mfe-b Exposed: http://mfe-c Exposed: http://mfe-a remoteEntryJS remoteEntryJS remoteEntryJS
30. A WebPack feature that allows one app (host) to dynamically load code from another app (remote) at runtime. /aziziyazit Module Federation Host App Shell remote https://github.com/module-federation/module-federation-examples
31. Single SPA - Routing-based root-config mfe-a mfe-b mfe-c Registered app as router Registered app as router Registered app as router
32. Modular framework that streamlines micro frontend development using Single- SPA, with first-class support for routing, distribution, and reuse /aziziyazit Single SPA https://github.com/polyglot-microfrontends root-config app Loads all apps and handles routing Micro frontend
33. I’m ready to begin implementing the MFE Wait—before implementing it, let's first ensure that your organizational design aligns with the architecture you’re aiming for. As Conway famously observed, ‘Any organisation that designs a system will produce a design whose structure is a copy of the organisation's communication structure.’.
34. A deliberate restructuring of t e a m b o u n d a r i e s o r communication pathways to influence the shape and modularity of the software architecture. /aziziyazit Conway’s Law maneuver Architecture Restructure Organisation To
35. Real world case study In their desktop application, Spotify utilises iframes to integrate various micro frontends. Each feature, such as music playback or search, is developed and deployed independently. Communication between these micro frontends is managed through an event bus, facilitating seamless interaction without tight coupling.
36. /aziziyazit Real world case study MFE-1 MFE-3 MFE-2 Tribe Tribe Squad Squad Squad Squad Squad Squad Chapter Chapter Chapter Chapter Guild Guild Spotify Model
37. Micro frontends: Key Takeaways: • Decouples the frontend into independent, self-contained apps. • Enables parallel development across teams with clear ownership boundaries. • Supports independent deployment of features, reducing coordination overhead. • Allow the use of different tech stacks. • Autonomous Teams at Scale. • Ideal for large-scale platforms with multiple product domains and distributed teams