The Tractor Store

a non-trivial micro frontends example project

The Tractor Store is a template to experiment with micro frontend architecture. Goal is to create a real world application where developers can experiment with different integration techniques. The idea is similar to TodoMVC or Movies, but with a focus on micro frontends.

Placeholder

Module Federation with ...

Single SPA

Svelte Example

SSI

React & Vue Example

Tailor

Same verticalized micro frontends application with different tech stacks and integration techniques.

Team Explore

Team Decide

Team Checkout

E-Commerce project with boundaries for three teams and use-cases for routing, integration and communication.

TodoMVC for Micro Frontends

A micro frontends architecture can be built in many ways. Custom crafted and tailored to your organization's specific needs or by following the rules of a specific micro frontends meta-framework. The final result is also affected by the technologies you choose and whether you want to render your application on the server and/or client. Making good choices is not always easy. Being able to look at real-world code and examples helps everyone involved to get a good understanding of your decisions and their implications. The Tractor Store aims to be to micro frontends what TodoMVC was to the advent of JavaScript Frameworks in the late 2000s: An awesome collection of different implementations for the same application. A valuable learning resource for people new to this topic and also a good basis for advanced discussions.

What do all implementations have in common?

Team boundaries
The webshop is divided into three systems. Each owned by a dedicated team.
Features & content
From an end-users perspective, all implementations should look and work the same.
Framework-agnostic integration
Although it's common, that adjacent teams use the same technologies, they must be able to evolve or change their tech-stack independently.
Independent deployment
Teams must be able to develop, test and deliver new features without consulting other teams or touching their code.

How do the implementations differ?

Technology stack combinations
Seeing the same app implemented with different JavaScript frameworks was the fascinating core of TodoMVC. Here we zoom out one level and compare how micro frontends built with different tech-stacks can be integrated.
Shell or no shell
Having a central application shell is a popular pattern, but it's not a requirement for building a micro frontends applications. Building a decentralized setup of self-contained systems that adhere to a set of rules is as valid as a meta-framework based solution.
Server or client rendered
If you render your application on the server, the client or both has a huge impact on your architecture and the required integration techniques.
Communication patterns
Browser events, event-bus, URL parameter, shared state, via server or through your application shell? There are many ways to implement inter-team communication across micro frontends.
Deployment technique
The tractor store example is designed in a way that it can be deployed in a containerized, serverless or static way. There are also specialized micro frontend hosting platforms that solve specific architecture-related problems. Being able to compare different deployment variants for the same application is a valuable resource.
Bonus: Shared UI components
The tractor store example can also be used to verify how a common design system can be implemented. In many projects, this is a core challenge when migrating to a micro frontends architecture. The "button" component is a suitable first candidate to unify.

Micro Frontend Use-Cases

Mini Cart Micro Frontend Lives in the header and updates when the cart content changes ...

Mini Cart Micro Frontend Lives in the header and updates when the cart content changes ...