Microfrontends the right way

Summary

The video discusses the challenges and complexities of implementing microfrontends in web development. It highlights how buzzwords like independent deployments and team autonomy often lead to added complexity, mirroring the struggles seen in backend microservices. The video explores different technical approaches, such as using iframes, web components, and frameworks like Single SPA and module federation. The presenter shares their preference for Astro's island architecture, which simplifies microfrontend development. The video provides insights into technical details, leaving the human collaboration aspect aside, and concludes by inviting viewers to explore the topic further.

Takeaways

• 😀 Microrontrontends may sound ideal but often introduce more complexity than expected.
• 😀 Despite the promises of independent deployments and team autonomy, microrontrontends can lead to significant challenges in coordination and management.
• 😀 Backend developers are dealing with similar architectural debates around monoliths vs microservices, and front-end developers are now facing similar issues with microrontrontends.
• 😀 The primary issue with microrontrontends is that many developers focus too much on technical solutions and neglect human interaction, collaboration, and communication.
• 😀 Iframes offer a reliable, but old-fashioned method for isolating micro-apps, but come with drawbacks like poor styling and awkward communication via postMessage.
• 😀 Web components provide a cleaner, more modern alternative to iframes, offering sandboxing and communication via custom events but lack built-in state-sharing capabilities.
• 😀 Single SPA allows multi-framework support, lazy loading, and independent deployments, but it introduces complex coordination issues and routing orchestration.
• 😀 Module Federation (Webpack 5) enables apps to dynamically load code at runtime, simplifying the handling of shared components but also defers some dependencies, making builds more complex.
• 😀 Web components and module federation offer promising solutions for microrontrontends, especially with the potential of ES modules in browsers allowing for fewer bundlers.
• 😀 Astro, with its island architecture, presents a more efficient solution for microrontrontends by creating small, self-contained UI components that only load when needed.

Q & A

What are microrontrontends and why do developers find them challenging?

Microrontrontends are a way of splitting up front-end applications into smaller, independent units that can be developed and deployed separately. However, while the idea sounds good on paper, it often increases complexity due to issues like dependency management, cross-team coordination, and difficulty in maintaining consistency across multiple small applications.

How do microrontrontends relate to the debate over monolith vs. microservices in backend development?

Microrontrontends are a parallel to the monolith vs. microservices debate in backend development. While backend developers are trying to break down monolithic applications into smaller microservices, frontend developers are trying to break up large front-end applications into independent pieces, though it introduces its own set of challenges.

What is the real problem with microrontrontends from a technical perspective?

The real issue with microrontrontends is that they are often treated as a purely technical solution, while they should primarily focus on human interaction, collaboration, and communication between teams. However, many developers ignore these factors, leading to poor integration and inefficiencies.

What is the oldest and simplest method to implement microrontrontends?

The simplest and oldest method for implementing microrontrontends is using iframes. Although iframes were discouraged in the past, they offer hard isolation, preventing dependency clashes and providing a clear boundary between apps. However, they also come with styling and communication challenges.

What are web components, and why are they considered a better option than iframes?

Web components allow developers to create framework-agnostic custom elements that can be added to any front-end project. Thanks to the shadow DOM, they avoid CSS leaks, and custom events make communication between components easier. They are native to the browser, require no build tools, and are seen as a cleaner solution than iframes.

What are the limitations of web components when used in microrontrontends?

One of the main limitations of web components is the lack of built-in ways to share state across components. Additionally, the developer experience is often considered worse compared to more modern alternatives for microrontrontends.

What role does Single SPA play in building microrontrontends?

Single SPA is a framework designed for serious microrontrontends. It acts as a glue layer that manages the mounting, unmounting, and coordination of different apps within a single project. It allows for independent deployments, lazy loading, and supports multiple frameworks, though it introduces new challenges like managing distributed systems within the browser.

What are the problems associated with using Single SPA for microrontrontends?

While Single SPA offers benefits like multiple frameworks and lazy loading, it also creates coordination problems. With multiple build pipelines and routing orchestration, developers face increased complexity, including incidents involving different teams and frustrations related to managing distributed systems.

What is module federation in Webpack, and how does it help with microrontrontends?

Module federation in Webpack allows different applications to dynamically share code and components. By turning each app into both a host and a remote, it enables the loading of chunks of code from remote applications. This reduces the need to bundle everything together upfront, making applications more modular and scalable.

What makes Astro a good choice for microrontrontends?

Astro uses an island architecture that allows developers to build small, self-contained UI components that load only when needed. This makes it ideal for building microrontrontends, as it optimizes performance and reduces unnecessary resource usage. Astro also integrates easily with various UI components, providing flexibility.