[DevoxxGR2025] Angular Micro-Frontends
Dimitris Kaklamanis, a lead software engineer at CodeHub, delivered an 11-minute talk at Devoxx Greece 2025, exploring how Angular micro-frontends revolutionize scalable web development.
Micro-Frontends Unveiled
Kaklamanis opened with a relatable scenario: a growing front-end monolith turning into a dependency nightmare. Micro-frontends, inspired by microservices, break the UI into smaller, independent pieces, each owned by a team. This enables parallel development, reduces risks, and enhances scalability. He outlined four principles: decentralization (team-owned UI parts), technology agnosticism (mixing frameworks like Angular, React, or Vue), resilience (isolated bugs don’t crash the app), and scalability (independent team scaling). A diagram showed teams building features in different frameworks, integrated at runtime via a shell app.
Pros and Cons
Micro-frontends offer scalability, tech flexibility, faster parallel development, resilience, and easier maintenance due to focused codebases. However, challenges include increased complexity (more coordination), performance overhead (multiple apps loading), communication issues (state sharing), and CI/CD complexity (separate pipelines). Kaklamanis highlighted Angular’s strengths: its component-based structure aligns with modularity, CLI tools manage multiple projects, and features like lazy loading and Webpack 5 module federation simplify implementation. Tools like NX streamline monorepo management, making Angular a robust choice.
Implementation in Action
Kaklamanis demonstrated a live Angular store app with independent modules (orders, products, inventory). A change in the product component didn’t affect others, showcasing isolation. He recommended clear module ownership, careful intermodule communication, performance monitoring, and minimal shared libraries. For large, multi-team projects, he urged prototyping micro-frontends, starting small and iterating for scalability.