awesome-microfrontends

A curated list of awesome things related to Micro-frontends. If you appreciate the content 📖, support projects visibility, give 👍| ⭐| 👏, or buy me a coffee!

Mind map of Micro-Frontends

Some main ideas once you choose Micro-Frontends

• You can ask a question yourself. What do I actually need Micro-Frontend?
• If you had made a decision to micro-frontends, then you probably look over the following items.
• Defining for a split monolith app by a vertical split
• Should use only a main library or framework to all micro-frontends(Ex: only use React library not include Angular or Vue)
• Keep minimizing communication between micro-frontends (Ex. share JWT token)
• Keep in mind for autonomous team develop, so it will help you to independent development and deployment
• You can use the Single-SPA framework to trying implement with it

Brief contents

• Resources
  • Blog Posts
  • Videos
  • Deploys
  • Frameworks
  • Libraries
  • Projects
  • Websites
  • Tools

Resources

Blog Posts

2021

• Micro-Frontends at scale - part 1
• Micro-Frontends at scale - part 2
• Micro-frontend Architectures on AWS
• How To Convert a Huge Frontend Monolith to a Micro-frontend
• How to create React Micro Frontends from scratch using single-spa framework
• Building Micro Frontends Using Single-SPA Framework

2020

• How to Develop Microfrontends Using React: Step by Step Guide
• How to build a micro-frontends architecture, with Angular and Webpack Module Federation
• Scaling Your Project with Micro-Frontends
• Building Micro-Frontends With Single-spa, React, and Vue
• Problems with Micro-frontends
• Micro frontends: my lessons learned by Natalia Venditto (*)
• Slide micro-frontends

2019

• Micro-frontends, the future of Frontend architectures by Luca Mezzalira
• Adopting a Micro-frontends architecture by Luca Mezzalira
• Orchestrating micro-frontends by Luca Mezzalira
• Identifying micro-frontends in our applications by Luca Mezzalira
• I don’t understand micro-frontends by Luca Mezzalira
• Micro-frontends decisions framework by Luca Mezzalira
• Micro-frontends in context
• Micro-frontends resources

Videos

• Micro Frontend Architecture
• Scaling Your Project with Micro-Frontends

Deploys

• Serverless Micro-Frontends with the AWS CDK
• Micro-frontends with AWS Amplify (Part 1)
• Micro-frontends with AWS Amplify (Part 2)

Frameworks

• Single-spa.js
• Frint.js
• Qiankun
• Ara Framework
• Puzzle.js
• Luigi

↥ Back To Top

Libraries

• PubSubJS

↥ Back To Top

Projects

• Mosaic A set of services, libraries together with a specification by Zalando

↥ Back To Top

Websites

• Micro Frontends
• Micro Frontends by Elisabeth Engel
• Micro Frontends by Martin Fowler

↥ Back To Top

Tools

• Lerna A tool for managing JavaScript projects with multiple packages.
• npm-run-all/yarn-run-all A CLI tool to run multiple npm-scripts in parallel or sequential.
• TypeScript ESLint Monorepo for all the tooling which enables ESLint to support TypeScript

↥ Back To Top