The Tractor Store is a template to experiment with micro frontend architectures. The idea is similar to TodoMVC or Movies. Build the same application, but with different technologies and integration techniques
List of existing implementations. Look at the source code, try them out, and maybe add your own.
Blueprint
no frameworks, server-only
Preact
MPA (three SPAs), universal
Piral & React
app shell (three SPAs), client-only
Picard.js & Preact
app shell (three SPAs), client-only
Webpack & React
app shell (three SPAs), client-only
Webpack, Vite & Rspack
app shell (three SPAs), client-only
Your Implementation ...
[rendering approach]
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 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.
View Tractor Store
The webshop is divided into three systems. Each owned by a dedicated team. The border placement is not important as long as the teams stay resposible for their features. Read more.
From an end-users perspective, all implementations should look and work the same.
Although it's common, that adjacent teams use the same technologies, they must be able to evolve or change their tech-stack independently.
Teams must be able to develop, test and deliver new features without consulting other teams or touching their code.
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.
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.
If you render your application on the server, the client or both has a huge impact on your architecture and the required integration techniques.
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.
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.
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.
The three teams and their missions and responsibilities inside the Tractor Store.
Mission
Help users explore the tractor portfolio and stores locations.
Responsibility
home, product lists, stores, recommendations
Mission
Help users decide what model tractor they should choose.
Responsibility
product page
Mission
Guide users through the checkout process.
Responsibility
cart, checkout, thanks
Boundaries can be toggled off and on. Use the application like an end-user or switch on boundaries to see feature-ownership.
Owned by Team Explore. The same across all pages. Except for the checkout page.
Color-matched tractor suggestions. Based on product selection and shopping cart contents.
Add and remove tractors. Minicart updates accordingly.
Checkout address form with embedded store picker owned by explore.
Celebration on success. External dependency powered.
Learn more about the ideas behind the Tractor Store 2.0 by watching Michael's presentation at the Micro Frontends Conference 2024. Slides are available on Speaker Deck.
