Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 months ago
JSON representation
🔥 A curated list of awesome things related to Micro-Frontends.
- Host: GitHub
- URL: https://github.com/trungcaot/awesome-micro-frontends
- Owner: trungcaot
- License: mit
- Created: 2021-05-02T08:04:49.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-06-13T02:47:19.000Z (over 3 years ago)
- Last Synced: 2024-08-04T04:03:52.551Z (3 months ago)
- Topics: lerna, micro-frontend, micro-frontends, microfrontends, microservice, microservices, microservices-architecture, single-spa
- Language: EJS
- Homepage:
- Size: 417 KB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- ultimate-awesome - awesome-micro-frontends - 🔥 A curated list of awesome things related to Micro-Frontends. (Other Lists / PowerShell Lists)
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
#### 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/)
### Libraries
- [PubSubJS](https://github.com/mroderick/PubSubJS)
### Projects
- [Mosaic](https://www.mosaic9.org/) A set of services, libraries together with a specification by Zalando
### 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
### 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