- Domain-driven design at Kazoo for vertical slicing.
- Challenges in implementing consistent headers and footers across microfrontends.
- Introduction of TinyFrontend for runtime component fetching.
- Guiding principles of TinyFrontend for seamless integration.
- Demo showcasing TinyFrontend's real-time updates and server-side rendering capabilities.
Microfrontends represent a new frontier in frontend architecture, offering a way to manage complex web applications by breaking them down into smaller, more manageable pieces. By focusing on domain-driven design, Kazoo, a company revolutionizing used car sales in the UK, implemented a vertical slicing approach. This meant each team owned a specific vertical slice, managing everything from frontend to deployment. Examples included search and browse functionalities, user account management, and consumer finance applications, each independently responsible for their domain.
However, Kazoo faced challenges with this approach. The need for consistent elements like headers and footers across different applications highlighted the limitations of vertical slicing. The rigidity of build-time dependencies, where any change required updates and redeployment across all dependent applications, hindered the ability for rapid, independent deployment. This was particularly problematic for shared UI components, which needed to be consistent throughout the site.
Enter TinyFrontend, a solution designed to address these specific challenges. TinyFrontend is a library that allows components to be fetched at runtime, eliminating the need for build-time dependencies. This innovative approach enables teams to deploy changes independently, reducing the overhead of coordination between teams for every update. It provides a mechanism where a React component, like a header, can be fetched dynamically, ensuring that the latest version is always served without requiring a full application redeployment.
One of the guiding principles of TinyFrontend is using the existing framework as a runtime glue. It leverages the power of React, ensuring that only one framework runs on the page, thereby enhancing performance. The library is designed to be simple for the host application, akin to using a standard npm package, which minimizes the complexity involved in consuming these runtime components.
Type safety is another key aspect, making use of TypeScript to ensure compatibility and correctness of the components. TinyFrontend also checks for shared dependency compatibility at build time, ensuring that the host application and the component can work together seamlessly. This approach facilitates automatic updates for non-breaking changes, allowing for smooth integration of updates without manual intervention.
A practical demonstration of TinyFrontend reveals its capability to handle real-time updates without affecting the host application. By deploying a new version of a component, the changes are reflected immediately on the site without redeploying the entire application. This is achieved through server-side rendering, which ensures that components are loaded and rendered on the server, providing a seamless user experience even when JavaScript is disabled on the client-side.
The architecture of TinyFrontend involves a host application that integrates the runtime component using a client library. The component is then fetched from a Cloudflare-hosted API, enabling the dynamic delivery of the latest bundle. This approach abstracts away the complexity of handling runtime components, allowing developers to focus on building robust applications rather than managing deployment dependencies.
While TinyFrontend excels in managing horizontal slicing challenges, vertical slicing still requires careful consideration. The potential to integrate solutions like Webpack Module Federation into Remix could further simplify the deployment of federated applications. Although this feature is not yet natively supported, it hints at the future capabilities of frameworks like Remix in handling microfrontend architectures.
Ultimately, the decision to adopt microfrontends should be driven by the specific needs of a company. For organizations experiencing bottlenecks in deployment and coordination among teams, microfrontends offer a viable solution to improve scalability and flexibility. However, for smaller teams or projects where a single codebase is manageable, the overhead of microfrontends might not be justified.
In summary, microfrontends, when implemented thoughtfully, can significantly enhance the agility and maintainability of large-scale applications. With tools like TinyFrontend, teams can achieve a balance between independent deployments and consistent user experiences, paving the way for more efficient and scalable web applications.
