Skip to content

ChristianUlbrich/awesome-microfrontends

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Awesome Micro Frontends Awesome

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

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

Components

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

Other Lists

Books

Contribute

Contributions welcome! Read the contribution guidelines first.

License

CC0

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

About

A curated list of resources about everything Micro Frontends

Resources

Code of conduct

Stars

Watchers

Forks

Packages

No packages published