Awesome Micro Frontends

A curated and hopefully awe-some list about Micro Frontends.

Intro

Micro Frontends are an architectural pattern, just as Microservices are. There are many ways to achieve a Micro Frontend architecture. This list presents the essential and required material to come up with your very own Micro Frontend approach.

In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team. This ensures that every feature is developed, tested and deployed independently from other features. Multiple techniques exist to recombine the features — sometimes as pages, sometimes as components — into a cohesive user experience. Source

Contents

• Concepts
  • Components
• Tooling
  • Building Blocks
  • Frameworks
• Talks
• Meta
  • Other lists
  • Books

Concepts

Blog posts and web sites that are talking about the general concepts for a Micro Frontend architecture.

• micro-frontends.org - framework agnostic introduction to Micro Frontends.
• Micro frontends—a microservice approach to front-end web development - a motivation for Micro Frontends.

Components

• Bringing componentization to the web - must read that holds true in many aspects even today

Tooling

Building Blocks

Web Components

• Custom Element V1 - The Custom Elements V1 API is the most important API you need for building Web Components
• StencilJS - StencilJS is a specific framework for building Web Components declaratively with modern TypeScript.
• LitElement - super-recent small library from Google to bootstrap Web Components

Event Bus

• Postal.js "loosely AMQP inspired EventBus for the browser"

Distribution

• unpkg.com - allows for deep-linking into the npm registry and thus to consume components off npm

Frameworks

• Mosaic - Project Mosaic is Zalando's take on micro frontends and is a complete framework for it.
• single-spa - Canopy's approach on micro frontends is about composing multiple SPAs.
• OpenComponents - "an open-source, "batteries included" micro frontends framework"
• Polymer Project - Google's take on building Web Components that still has some nice tooling
• NUT - A framework born for micro frontends, which is used internally in Netease, currently it supports Vue, React and more
• Podium - Easy server side composition of microfrontends
• Piral - an open-source framework for next generation portal applications using micro frontends built on React.

Graveyard

• Polymer Project - Google's take on building Web Components won't be used for its upcoming Material Web Components and that says it all

Meta

• A Software Architect's Approach... - decision tree, whether you need Micro Frontends (with Web Components)

Other Lists

• Micro Frontends by Elisabeth Engel - closed curated list with tracking links for micro frontends

Books

• Micro Frontends in Action - An early-access book introduction to micro frontend based applications.

Contribute

Contributions welcome! Read the contribution guidelines first.

License

To the extent possible under law, Christian Ulbrich has waived all copyright and related or neighboring rights to this work.