4Developers 2021: From Microfrontends and back

### Overview In this talk, Greg presents "From Microfrontends and Back: A Journey of a Naive Architect," recounting the architectural decisions made at Kubiro. The presentation analyzes how adopting microfrontends based on industry hype revealed severe trade-offs, leading the team to step back and adopt an alternative architectural approach using an Nx monorepo and Event-Driven Architecture (EDA).

### Key Topics - **Microfrontends & Purported Benefits**: Understanding microfrontends as hosting multiple independent frontends (often using different frameworks like Angular, React, or Vue) inside a single application. Key promised benefits include independent deployability, polyglot development, modularized and cohesive codebases, faster isolated local development/testing, and autonomous teams. - **Consequences and Hidden Costs**: In practice, microfrontends introduced complex integration and end-to-end testing challenges, heavy infrastructure overhead across repositories, degraded frontend performance and large bundle sizes from loading multiple frameworks, inconsistent coding styles, difficulties sharing UI libraries and CSS, and fragile inter-module communication (e.g., using `postMessage` or iframes). - **Root Cause Analysis**: The team realized that their architectural friction was not primarily a tooling limitation, but a team understanding issue regarding how to design well-defined, modular codebases. If a team cannot build a clean modular monolith, microfrontends will not inherently solve their structural problems. - **Alternative Solution at Kubiro**: Rather than continuing with microfrontends, Kubiro consolidated around a single framework (Angular) within an Nx monorepo, paired with an asynchronous Event-Driven Architecture (EDA) on the frontend.

### Technical Details - **Nx Monorepo Architecture**: Applications and libraries are split into distinct, isolated units. Apps remain lightweight containers that are buildable, testable, and deployable independently. Libraries are structured into shared libraries (presentational UI components), core libraries (framework-level concerns such as authentication, authorization, and security), feature libraries (smart/container components and domain business logic in clean, framework-agnostic TypeScript), and event libraries. - **Architectural Guardrails**: The team enforces architectural layering (application, domain, infrastructure, UI) via custom ESLint import rules evaluated during CI, as well as Nx dependency graphs to identify circular dependencies and excessive connection points during weekly architecture reviews. - **Frontend Event-Driven Architecture (EDA)**: Implemented using RxJS, communication across decoupled modules relies on an asynchronous event bus rather than direct module imports or tightly coupled calls. The EDA architecture consists of four primary components: 1. **Events**: Plain TypeScript interfaces or JavaScript Data Transfer Objects (DTOs) carrying payloads without embedded business logic. 2. **Event Bus**: An asynchronous communication channel built with RxJS mechanisms (such as `BehaviorSubject` or `ReplaySubject`). 3. **Event Dispatchers**: Service classes used by domain components, state managers, or command handlers to publish events onto the bus. 4. **Event Handlers**: Subscribers that listen for specific event types on the bus and execute relevant handling logic without knowing the event origin. - **Testing and Consistency**: Teams use consumer-driven contracts to ensure providers and subscribers remain aligned on event payloads. Unit and integration testing leverages Jest rather than Karma to avoid building full browser environments for single-component runs, while ephemeral PR environments facilitate pre-merge testing in trunk-based development.

### Takeaways Microfrontends shine primarily at large organizational scales (e.g., hundreds of developers across dozens of teams) or when navigating rigid corporate release pipelines. For smaller or medium-sized teams, teams should first master modular monolith principles, enforce boundary rules through tooling like Nx and lint rules, and consider event-driven messaging before incurring the operational and performance overhead of microfrontends.