Micro Frontends Tractor Store
GitHub

a non-trivial
micro frontends
example project

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

illustration of a micro frontend setup consisting of three vertical boxes on one horiziontal box
React logo Vue logo Angular logo Preact logo React logo Solid logo HTMX logo
React logo Vue logo Angular logo Preact logo Solid logo Solid logo JavaScript logo
React logo Vue logo Angular logo Preact logo React logo React logo Qwik logo

Implementations

List of existing implementations. Look at the source code, try them out, and maybe add your own.

Blueprint
vanilla, no frameworks

lib1
lib1
lib1
Modular Monolith

Preact
universal rendering

lib1
lib1
lib1
ESI, Web Components

Piral & React
SPA, app shell

lib1
lib1
lib1
Piral

Picard.js & Preact
SPA, Native Federation

lib1
lib1
lib1
Picard.js

Your Implementation ...
[description]

lib1
lib1
lib1
[integration techniques]
screen1 screen2 screen3

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 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

What do all implementations have in common?

Detailpage
Team boundaries

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.

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.

Technological challenges

Team Boundaries

The three teams and their missions and responsibilities inside the Tractor Store.

Team Explore

Mission
Help users explore the tractor portfolio and stores locations.

Responsibility
home, product lists, stores, recommendations

Team Decide

Mission
Help users decide what model tractor they should choose.

Responsibility
product page

Team Checkout

Mission
Guide users through the checkout process.

Responsibility
cart, checkout, thanks

Features

boundary toggle

Boundary Toggle

Boundaries can be toggled off and on. Use the application like an end-user or switch on boundaries to see feature-ownership.

walkthrough

Complete Online Shop

Homepage, category, stores, product detail, cart, checkout and thank you page are included.
header and footer

Header & Footer

Owned by Team Explore. The same across all pages. Except for the checkout page.

recommendations

Recommendations

Color-matched tractor suggestions. Based on product selection and shopping cart contents.

cart

Shopping Cart

Add and remove tractors. Minicart updates accordingly.

store picker

Forms example

Checkout address form with embedded store picker owned by explore.

thank you confetti

Confirmation Confetti

Celebration on success. External dependency powered.

Contribute

How to Contribute

  1. Create a new repository
    Pick an existing Tractor Store repository (e.g. blueprint or preact) and create your own repository based on it.
  2. Choose framework, technique and implement
    Use your desired frameworks and techniques to implement the Tractor Store. Make sure you catch all the features described above.
  3. Describe your implementation
    Explain your implementation in the README.md file. Fill out the specs table. Describe what may be different or special about your take on the Tractor Store.
  4. Submit your implementation
    Write us an email with a link to your repository and we'll add it to the list. Bonus points if you can provide a live demo.

Watch the Presentation

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.