The Tractor Store 2.0: The TodoMVC for Micro Frontends

Starting a micro frontends project is fun. But there are plenty of technical decisions you and your team have to make upfront:

• How does frontend integration work?
• Reverse proxy, cloud functions or an existing framework?
• What in-browser communication patterns should we use?
• How do we bundle and deliver styles and scripts?
• Should we pick React, Vue.js, Svelte, Qwik or htmx?
• Should we try Deno instead of Node.js? What about Bun?
• Do we need to deduplicate framework code?
• Module Federation or plain Import Maps?
• How would a design system have tool look like based on these decisions?
• What about client-side routing?
• What about hydration?
• Ah, and we want to use islands, right?
• Do we need an app shell?

Answering all of these questions is a daunting task. And even if you've found answers to all of the above questions, you might want to build a proof-of-concept to validate that your aspired tech stack actually works.

I like to learn new things by looking at other people's code. TodoMVC was my favorite resource to understand the ins and outs of different JS frameworks back in the days. I created "The Tractor Store" to not only talk about the micro frontends' architecture. I wanted to create a real-world example you can run and modify and where you can see the level of decoupling we aim for when building micro frontends.

"The Tractor Store 2.0" is the next iteration of this idea. It aims to be a non-trivial, more real-world e-commerce application. One, where it's worth measuring performance characteristics and see how your technical decisions affect the code that's being shipped. Developers can use it as a reference implementation for their ideas, techniques and libraries. They can share their solutions and thereby help others with similar challenges learn from their own research.

Speakers

Michael Geers