Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/trungcaot/awesome-micro-frontends

🔥 A curated list of awesome things related to Micro-Frontends.
https://github.com/trungcaot/awesome-micro-frontends

List: awesome-micro-frontends

lerna micro-frontend micro-frontends microfrontends microservice microservices microservices-architecture single-spa

Last synced: 16 days ago
JSON representation

🔥 A curated list of awesome things related to Micro-Frontends.

Awesome Lists containing this project

README 

        
# 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



![alt text](/images/Microfrontends_v1.0.1.png)



#### 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](https://single-spa.js.org/) framework to trying implement with it



## Brief contents



- [Resources](#resources)

  - [Blog Posts](#blog-posts)

  - [Videos](#videos)

  - [Deploys](#deploys)

  - [Frameworks](#frameworks)

  - [Libraries](#libraries)

  - [Projects](#projects)

  - [Websites](#websites)

  - [Tools](#tools)



## Resources



### Blog Posts



**2021**



- [Micro-Frontends at scale - part 1](https://medium.com/xgeeks/micro-frontends-at-scale-part-1-a8ab67bfb773)

- [Micro-Frontends at scale - part 2](https://levelup.gitconnected.com/micro-frontends-at-scale-part-2-d10994f09f18)

- [Micro-frontend Architectures on AWS](https://aws.amazon.com/de/blogs/architecture/micro-frontend-architectures-on-aws/)

- [How To Convert a Huge Frontend Monolith to a Micro-frontend](https://blog.dream11engineering.com/how-to-convert-a-huge-frontend-monolith-to-a-micro-frontend-d37f47697235)

- [How to create React Micro Frontends from scratch using single-spa framework](https://medium.com/litslink/how-to-create-react-micro-frontends-from-scratch-using-single-spa-framework-in-examples-592c7f63bedf)

- [Building Micro Frontends Using Single-SPA Framework](https://blog.bitsrc.io/building-microfrontends-using-single-spa-framework-94019ca2fb4d)



**2020**



- [How to Develop Microfrontends Using React: Step by Step Guide](https://blog.bitsrc.io/how-to-develop-microfrontends-using-react-step-by-step-guide-47ebb479cacd)

- [How to build a micro-frontends architecture, with Angular and Webpack Module Federation](https://medium.com/agorapulse-stories/building-a-micro-frontends-architecture-in-2021-with-angular-and-webpack-module-federation-50d073617645)

- [Scaling Your Project with Micro-Frontends](https://www.infoq.com/presentations/dazn-microfrontend/)

- [Building Micro-Frontends With Single-spa, React, and Vue](https://dzone.com/articles/building-micro-frontends-with-single-spa-and-react)

- [Problems with Micro-frontends](https://medium.com/swlh/problems-with-micro-frontends-8a8fc32a7d58)

- [Micro frontends: my lessons learned](https://dev.to/this-is-learning/micro-frontends-my-lessons-learned-1pcp) by Natalia Venditto (\*)

- [Slide micro-frontends](https://slides.com/anfibiacreativa/micro-frontends)



**2019**



- [Micro-frontends, the future of Frontend architectures](https://medium.com/dazn-tech/micro-frontends-the-future-of-frontend-architectures-5867ceded39a) by Luca Mezzalira

- [Adopting a Micro-frontends architecture](https://medium.com/dazn-tech/adopting-a-micro-frontends-architecture-e283e6a3c4f3) by Luca Mezzalira

- [Orchestrating micro-frontends](https://medium.com/dazn-tech/orchestrating-micro-frontends-a5d2674cbf33) by Luca Mezzalira

- [Identifying micro-frontends in our applications](https://medium.com/dazn-tech/identifying-micro-frontends-in-our-applications-4b4995f39257) by Luca Mezzalira

- [I don’t understand micro-frontends](https://medium.com/@lucamezzalira/i-dont-understand-micro-frontends-88f7304799a9) by Luca Mezzalira

- [Micro-frontends decisions framework](https://medium.com/@lucamezzalira/micro-frontends-decisions-framework-ebcd22256513) by Luca Mezzalira

- [Micro-frontends in context](https://increment.com/frontend/micro-frontends-in-context/)

- [Micro-frontends resources](https://medium.com/@lucamezzalira/micro-frontends-resources-53b1ec7d512a)



### Videos



- [Micro Frontend Architecture](https://www.youtube.com/watch?v=BuRB3djraeM)

- [Scaling Your Project with Micro-Frontends](https://www.youtube.com/watch?v=tD1rcWSfYpo)



### Deploys



- [Serverless Micro-Frontends with the AWS CDK](https://dev.to/fllstck/serverless-micro-frontends-with-the-aws-cdk-3lf)

- [Micro-frontends with AWS Amplify (Part 1)](https://levelup.gitconnected.com/micro-frontends-with-aws-amplify-50c2e2dc4222)

- [Micro-frontends with AWS Amplify (Part 2)](https://alatech.medium.com/micro-frontends-with-aws-amplify-part-2-f69acf518287)



### Frameworks



- [Single-spa.js](https://single-spa.js.org/)

- [Frint.js](https://frint.js.org/)

- [Qiankun](https://qiankun.umijs.org/)

- [Ara Framework](https://ara-framework.github.io/website/)

- [Puzzle.js](https://github.com/puzzle-js/puzzle-js)

- [Luigi](https://luigi-project.io/)





  ↥ Back To Top




### Libraries



- [PubSubJS](https://github.com/mroderick/PubSubJS)





  ↥ Back To Top




### Projects



- [Mosaic](https://www.mosaic9.org/) A set of services, libraries together with a specification by Zalando





  ↥ Back To Top




### Websites



- [Micro Frontends](https://micro-frontends.org/)

- [Micro Frontends](https://micro-frontends.zeef.com/elisabeth.engel?ref=elisabeth.engel&share=ee53d51a914b4951ae5c94ece97642fc) by Elisabeth Engel

- [Micro Frontends](https://martinfowler.com/articles/micro-frontends.html) by Martin Fowler





  ↥ Back To Top




### Tools



- [Lerna](https://github.com/lerna/lerna) A tool for managing JavaScript projects with multiple packages.

- [npm-run-all/yarn-run-all](https://github.com/mysticatea/npm-run-all) A CLI tool to run multiple npm-scripts in parallel or sequential.

- [TypeScript ESLint](https://github.com/typescript-eslint/typescript-eslint) Monorepo for all the tooling which enables ESLint to support TypeScript





  ↥ Back To Top