Micro Frontends with Angular a... Note

Micro Frontends with Angular and Native Federation

Enterprise-scale software systems are often implemented by multiple cross-functional teams, and to enable these teams to provide new features efficiently, it is desirable to minimize the need for coordination between them. This calls for a modularization that verticalizes the system into low-coupled areas individual teams can take care of. Micro Frontends is an architectural style that promises several advantages, such as a high amount of team autonomy, but it also comes with numerous challenges. Micro Frontends result in separate build processes, which can be combined with incremental builds to improve build-time. This feature can also be used without applying other aspects such as aligning teams with individual applications or separate deployments. However, individually developed Micro Frontends can diverge in UI/UX, leading to an inconsistent appearance, and loading several applications increases the number of bundles that need to be downloaded, adversely affecting loading times and increasing the memory pressure.Splitting an application into low-coupled parts might be a best practice in general, but it is often hard to define the boundaries between verticals clearly enough to implement them as individual applications. Integrating them into an overarching solution brings additional complexity, and moving away from a compile-time integration towards a runtime integration has severe consequences.The Angular team recommends checking if alternatives, like implementing the individual verticals in Monorepos, are suitable. However, there are also ways to compensate for the disadvantages of Micro Frontends, such as establishing a design system to help with a consistent UI/UX or lazy loading individual system parts.Native Federation is a community project that provides close integration with the Angular CLI and allows for the implementation of Micro Frontends with Angular. It enables an application to load parts of other separately built and deployed applications lazily and can share dependencies like Angular or RxJS between the host and remotes.To set up Native Federation, a schematic is provided, which configures the Native Federation builder delegation to the ApplicationBuilder and creates a configuration file federation.config.js. The configuration assigns a unique name to the remote or host and defines which dependencies to share. Remotes also define exposed EcmaScript modules that can be loaded into the shell.The schematic also adds code to initialize Native Federation to the main.ts, and to load a component or routing configuration exposed by a remote, traditional lazy loading is combined with Native Federation’s loadRemoteModule function.
CdXz5zHNQW_NpT7gwgsMy.png