Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

An Awesome list of posts, videos and tutorials on Micro Frontends
https://github.com/rajasegar/awesome-micro-frontends

List: awesome-micro-frontends

awesome awesome-list hacktoberfest hacktoberfest-accepted lists microfrontend microfrontends microservices resources

Last synced: about 1 month ago
JSON representation

An Awesome list of posts, videos and tutorials on Micro Frontends

Awesome Lists containing this project

README 

        
# Awesome Micro-Frontends [![Awesome](https://awesome.re/badge.svg)](https://github.com/sindresorhus/awesome)



An awesome list of resources about **Micro-Frontends** architecture such as tools, books, posts, videos, talks and more.



Hoping to keep this list updated as much as possible, any new links through PRs are appreciated.



## Contents



- [Slack Workspaces](#slack-workspaces)

- [Websites](#websites)

- [Tools](#tools)

- [Books](#books)

- [Posts](#posts)

- [Videos](#videos)

- [Slides](#slides)

- [Experience Reports](#experience-reports)

- [Follow on Twitter](#follow-on-twitter)

- [Courses and Tutorials](#courses-and-tutorials)

- [Sample Projects](#sample-projects)

- [Podcasts](#podcasts)

- [Who Uses](#who-uses)



## Slack Workspaces



- [Micro-frontends](https://join.slack.com/t/micro-frontendsgroup/shared_invite/enQtNzA0NjM2NjA5NjU0LWQ5MjFiNjkxZTRhYTU3ZjQ3NWU1Njg3MWFjYzhjZjVhNjAxMzdkODJiZTMzNDZiYmYwZjUwZTk1ZmU3M2M2NDI)

- [Single-Spa](https://join.slack.com/t/single-spa/shared_invite/zt-j4c38g92-JmV7O~35dkN1CnaBkK7NTw)



## Websites



- [micro-frontends.org](http://micro-frontends.org)

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



## Tools



### Projects



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

- [Bit](https://github.com/teambit/bit) - A tool for developing and composing / integrating independently versioned components.



### Frameworks



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

- [Garfish](https://github.com/modern-js-dev/garfish) - A powerful micro front-end framework.

- [icestark, a micro frontends solution for large application](https://github.com/ice-lab/icestark)

- [Isomorphic Layout Composer](https://github.com/namecheap/ilc) - Complete solution for Micro Frontends composition into SPA with SSR support.

- [Misk Web: a Micro-Frontends React + Redux + Typescript Framework](https://cashapp.github.io/misk-web/)

- [NUT](https://github.com/nut-project/nut)

- [OpenComponents, a framework for developing and distributing html components](https://github.com/opencomponents/oc)

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

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

- [qiankun, probably the most complete micro-frontends solution you ever met](https://qiankun.umijs.org/)

- [One-app by American Express](https://github.com/americanexpress/one-app)

- [Scalecube-js: Toolkit for working in micro-services/micro-frontends architecture](https://github.com/scalecube/scalecube-js)

- [Berial - Simple micro-front end framework](https://github.com/berialjs/berial)

- [Podium](https://podium-lib.io) - Easy server side composition of microfrontends.

- [Nuz is an open-source project, the runtime package manager for web platform.](https://github.com/nuz-app/nuz) - Archived.

- [Luigi - technology agnostic, open-source micro-frontend framework](https://luigi-project.io/)

- [VoltranJS](https://github.com/hepsiburada/VoltranJS)



### Platforms



- [Mashroom Server](https://www.mashroom-server.com)

- [Piral](https://piral.io)



### Related



- [Angular_MicroApps_Different_Technologies](https://github.com/manfredsteyer/Angular_MicroApps_Different_Technologies)

- [A tiny, fast, zero-dependency event emitter](https://github.com/chrisdavies/eev)

- [Exercises for course "Integrating microservices on the frontend"](https://github.com/0xR/micro-frontend)

- [Extending the microservice paradigms to web development](https://github.com/neuland/micro-frontends)

- [Micromono](https://github.com/lsm/micromono)

- [Microservices in the frontend with BFFs providing their own bundles and API.](https://github.com/dactylographsy/browser-dactylographsy)

- [Proxy middleware for express that enables composition of microservices.](https://github.com/tes/compoxure)

- [Service Oriented Front-end](https://github.com/CanopyTax/sofe)

- [Simulate a micro frontend project using Node.js, React and NGinx Reverse Proxy in Alpine Docker images](https://github.com/willmendesneto/micro-frontend-pages)

- [Micro-Frontends architecture](https://github.com/nuz-app/nuz/tree/next/docs)



## Books



- [Micro Frontends in Action](https://www.manning.com/books/micro-frontends-in-action)

- [Building Micro-Frontends](https://www.buildingmicrofrontends.com/)

- [Micro Frontend & Micro Services - Build applications with Micro FE & Services](https://www.google.de/books/edition/Micro_Frontend_Micro_Services/pOvtDwAAQBAJ?hl=de&gbpv=0) - By Muralikrishna T.

- [The Art of Micro Frontends](https://www.packtpub.com/product/the-art-of-micro-frontends/9781800563568) - By Florian Rappl.

- [Practical Module Federation](https://module-federation.myshopify.com/products/practical-module-federation) - By Zack Jackson & Jack Herrington.

- [Enterprise Angular - DDD, Nx Monorepos and Micro Frontends](https://leanpub.com/enterprise-angular) - By Manfred Steyer.

- [Micro Frontends Architecture: Introduction, Design, Techniques & Technology](https://www.amazon.de/Micro-Frontends-Architecture-Introduction-Techniques/dp/1097927989/) - By Ajay Kumar.



## Posts



- [Everything You Need to Know About Micro Frontends](https://newsletter.systemdesign.one/p/micro-frontends)

- [The Future of Micro-Frontends](https://betterprogramming.pub/the-future-of-micro-frontends-2f527f97d506)

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

- [6 Patterns for Microfrontends](https://blog.bitsrc.io/6-patterns-for-microfrontends-347ae0017ec0)

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

- [Micro frontends - a microservice approach to front-end web development](https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16)

- [Cookie Cutter Scaling](https://paulhammant.com/categories.html#Cookie_Cutter_Scaling)

- [Microservice Websites](https://gustafnk.github.io/microservice-websites/)

- [What is a micro frontend](https://hub.packtpub.com/what-micro-frontend/)

- [ThoughtWorks Technology Radar](https://www.thoughtworks.com/de/radar/techniques/micro-frontends)

- [Dynamic vs. static ui composition](https://medium.com/@heartfor.it/dynamic-vs-static-ui-composition-4325282c760d)

- [Micro-libraries: The Future of front-end development](http://blog.wolksoftware.com/microlibraries-the-future-of-web-development)

- [The monolithic frontend in the microservices architecture](https://xebia.com/blog/the-monolithic-frontend-in-the-microservices-architecture/)

- [A Software Architect's Approach towards MicroFrontends](https://www.softwarearchitekt.at/post/2017/12/28/a-software-architect-s-approach-towards-using-angular-and-spas-in-general-for-microservices-aka-microfrontends.aspx)

- [An approach to building Scalable Web Apps](https://medium.com/@areai51/microfrontends-an-approach-to-building-scalable-web-apps-e8678e2acdd6)

- [A Take on Micro-Frontends](https://x-team.com/blog/micro-frontend/)

- [Building Microfrontends - Series](https://medium.com/@_rchaves_/building-microfrontends-part-i-creating-small-apps-710d709b48b7)

- [Including Front-End Web Components Into Microservices](https://technologyconversations.com/2015/08/09/including-front-end-web-components-into-microservices/)

- [Microservice Grid and Micro Frontends](https://dejanglozic.com/2017/02/22/microservice-grid-and-micro-frontends/)

- [Microservice Websites](http://microservice-websites.netlify.com/)

- [Microservices to Micro-Frontends by Sandeep Jain](http://www.agilechamps.com/microservices-to-micro-frontends/)

- [Front-end microservices with Web Components](https://hackernoon.com/front-end-microservices-with-web-components-597759313393)

- [Supporting Micro-frontends with ASP.NET Core MVC](https://blogs.msdn.microsoft.com/premier_developer/2018/03/09/supporting-micro-frontends-with-asp-net-core-mvc/)

- [Building micro frontends — angular elements](https://itnext.io/building-micro-frontend-applications-with-angular-elements-34483da08bcb)

- [Micro Front-Ends: Webpack Manifest](https://medium.embengineering.com/micro-front-ends-webpack-manifest-b05fc63a0d53)

- [My experience using micro frontends by David Den Toom](https://medium.com/@daviddentoom/my-experience-using-micro-frontends-e99a1ad6ed32)

- [Page Building using Micro-Frontends and Server-Side Include](https://medium.com/js-dojo/page-building-using-micro-frontends-c13c157958c8)

- [Strangling a Monolith to Micro-frontends with Laravel, Vue.js, and Hypernova](https://medium.com/js-dojo/strangling-a-monolith-to-micro-frontends-decoupling-presentation-layer-18a33ddf591b)

- [Serverless Micro-frontends using Vue.js, AWS Lambda, and Hypernova](https://medium.com/js-dojo/serverless-micro-frontends-using-vue-js-aws-lambda-and-hypernova-835d6f2b3bc9)

- [Using Micro-Frontends in WordPress with Gutenberg Blocks](https://itnext.io/using-micro-frontends-in-wordpress-with-gutenberg-blocks-882faad8cd62)

- [Taming the Frontend Monolith](https://blog.logrocket.com/taming-the-front-end-monolith-dbaede402c39/)

- [Micro-frontend Architecture: Replacing a Monolith from the Inside Out](https://levelup.gitconnected.com/micro-frontend-architecture-replacing-a-monolith-from-the-inside-out-61f60d2e14c1)

- [Breaking down the last Monolith - Micro Frontends](https://dev.to/aregee/breaking-down-the-last-monolith-micro-frontends-hd4)

- [Micro Frontends in Action](https://medium.com/swlh/micro-frontends-in-action-221d4ed81c35)

- [How to build your first Micro Frontend with SSR in minutes](https://levelup.gitconnected.com/how-to-build-your-first-micro-frontend-with-ssr-in-minutes-95cd57788529)

- [You probably don't need a micro-frontend](https://blog.scottlogic.com/2021/02/17/probably-dont-need-microfrontends.html)



## Videos

- [Micro-Frontends Antipatterns](https://www.youtube.com/watch?v=7qQQUcG9fqo) - Talk by Luca Mezzalira in CityJS conference 2022.

- [The Microfrontend Revolution: Using Webpack 5 Module Federation](https://www.youtube.com/watch?v=sJGADUuLk5Y) - A talk by Manfred Steyer in JS Poland 2022.

- [Micro-Frontends with Module Federation: Beyond the Basics](https://hasgeek.com/jsfoo/microfrontends-conf/schedule/micro-frontends-with-module-federation-beyond-the-basics-9ax2jaoaxMo2bNcbuuNXdo) - Talk by Manfred Steyer in Micro Frontends Conference in JSFoo 2022.

- [Micro Frontend - Web Rebels, Oslo 2018](https://www.youtube.com/watch?v=dTW7eJsIHDg)

- [Break Up With Your Frontend Monolith - JS Kongress 2017](https://www.youtube.com/watch?v=W3_8sxUurzA)

- [YouTube Playlist - Micro Frontend Talks](https://www.youtube.com/playlist?list=PLI1AtZo9B3YL_xpi19IuxFcTuCi2_thQT)

- [Micro­service Websites by Gustaf Nilsson Kotte](https://vimeo.com/242458365)

- [Breaking The Monolith](https://vimeo.com/97666093)

- [Microservice UI Composition](https://www.oio.de/m/konf/wjax2016/Microservice-UI_WJAX2016.pdf)

- [Introduction to Piral](https://www.youtube.com/watch?v=SkKvpBHy_5I)

- [Micro Frontend Architecture - Building an Extensible UI Platform](https://www.youtube.com/watch?v=9Xo-rGUq-6E) - A talk by Erik Grijzen on how New Relic implemented Micro Frontends.

- [Microfrontends and single spa](https://www.youtube.com/playlist?list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU) - Playlist by Joel Denning.

- [Micro-Frontends: Whay, why and how?](https://www.youtube.com/watch?v=w58aZjACETQ) - A Video by Jack Herrington.

- [Web Components for Micro Frontends](https://www.youtube.com/watch?v=XUtCnA9WEgQ) - Jack Herrington using Web Components for Micro Frontends.

- [Micro Frontends using single-spa](https://www.youtube.com/watch?v=wU06eTMQ6yI) - Jack Herrington using single-spa.

- [Micro Frontends using Open Components](https://www.youtube.com/watch?v=9CG0LeswOoM) - Jack Herrington on using Open Components.

- [DIY Micro FE Framework](https://www.youtube.com/watch?v=4U067O3_fYk) - Jack Herrington on building a Micro-FE Framework.

- [Micro-FEs in Zoid](https://www.youtube.com/watch?v=2jhTHjF-e2Y) - Jack Herrington on using Zoid.

- [Edge Side Includes for Micro-FEs](https://www.youtube.com/watch?v=4PoNBZl4t0Y) - Jack Herrington on using ESI.

- [The one right way to do microfrontends - two opinions](https://www.youtube.com/watch?v=u4SSOZhZ-3k) - A Talk by Mario Fernandez for Thoughtworks Presents.

## Slides

- [Micro Frontend - Web Rebels, Oslo 2018](https://noti.st/naltatis/HxcUfZ/micro-frontends-think-smaller-avoid-the-monolith-love-the-backend)

- [Migrating from Monolith to Microfrontends](http://slides.com/yaprakayazoglu/monolith-to-microfrontend)

- [Microservice Websites (microXchg 2017)](https://www.slideshare.net/GustafKotte/microservice-websites-microxchg-2017)

- [Microservice Websites Presentation](https://www.slideshare.net/GustafKotte/microservice-websites-redev-2017-81811987)

- [Avoid the Monolith by Michael Geers](https://noti.st/naltatis/HxcUfZ/slides)

- [Micro Frontends by Michael Geers](https://speakerdeck.com/naltatis/micro-frontends-yglf-tel-aviv)

- [Micro Frontends - The Nitty Gritty Details or Frontend, Backend, 🌈 Happyend](https://noti.st/naltatis/zQb2m5/micro-frontends-the-nitty-gritty-details-or-frontend-backend-happyend)

- [Micro Frontends by Assaf Gannon](https://de.slideshare.net/AssafGannon/micro-frontends)

- [Micro Frontends by Srikanth Jallapuram](https://de.slideshare.net/SrikanthJallapuram/micro-frontends-78813796)

- [Micro Frontends: Building a modern webapp with multiple teams by Michael Geers](https://speakerdeck.com/naltatis/micro-frontends-building-a-modern-webapp-with-multiple-teams)

- [Introduction to micro frontends by Kuba Holak](https://slides.com/kubaholak/introduction-to-micro-frontends)

- [Microfrontends architecture by Lucca Mezzalira](https://docs.google.com/presentation/d/1-SGjpuL6TibMlnawW42nFA9rDXclLrC_vQrn2cBJMo8/edit#slide=id.g35f391192_00)

- [Lets talk about Micro Frontends](https://microfrontend.deckset.net/)

- [Building micro-frontends by Luca Mezzalira](https://docs.google.com/presentation/d/1DgK2mjJ9IYbCmjgzJH5ru5YLv88zKpcCxKrMozqnT3A/edit#slide=id.g42f50ce565_0_651)

- [Micro Frontend Architecture - Building an Extensible UI Platform](https://speakerdeck.com/erikgrijzen/micro-frontend-architecture-building-an-extensible-ui-platform) - A talk by Erik Grijzen on how New Relic implemented Micro Frontends.



## Experience Reports



- [Upwork: Modernizing Upwork with Micro Frontends](https://www.upwork.com/blog/2017/05/modernizing-upwork-micro-frontends/)

- [allegro: Managing Frontend in the Microservices Architecture](https://allegro.tech/2016/03/Managing-Frontend-in-the-microservices-architecture.html)

- [Hello Fresh: Front-end Microservices](https://engineering.hellofresh.com/front-end-microservices-at-hellofresh-23978a611b87)

- [OpenTable: Microservices in the Frontend World](http://tech.opentable.co.uk/blog/2016/04/27/opencomponents-microservices-in-the-front-end-world/)

- [OpenTable: Dismantling the monolith](http://tech.opentable.co.uk/blog/2015/02/09/dismantling-the-monolith-microsites-at-opentable/)

- [5 years of OpenComponents](https://medium.com/@matteofigus/5-years-of-opencomponents-3114e6d6a35b)

- [AutoScout24: UI Composition](https://medium.com/scout24-engineering)

- [Klarna Checkout](https://news.ycombinator.com/item?id=13012916)

- [Spotify: Technology Stack](https://www.quora.com/What-is-the-technology-stack-behind-the-Spotify-web-client/answer/Andreas-Blixt)

- [Let's build a Webshop out of Micro Frontends](https://blog.senacor.com/microfrontends/)

- [Using Micro-Frontends to Permanently Solve the Legacy JavaScript Problem](https://medium.com/hacking-talent/using-micro-frontends-to-permanently-solve-the-legacy-javascript-problem-5fba18b0ceac)

- [Micro Frontends with Gustaf Nilsson Kotte](https://www.case-podcast.org/22-micro-frontends-with-gustaf-nilsson-kotte)

- [Experiences Using Micro Frontends at IKEA](https://www.infoq.com/news/2018/08/experiences-micro-frontends/)



## Follow on Twitter



### Hashtags



- [#microfrontend hashtag on Twitter](https://twitter.com/hashtag/microfrontend)

- [#microfrontends hashtag on Twitter](https://twitter.com/hashtag/microfrontends)



### People



- [Amanda Muñoz (@amandamunoz)](https://twitter.com/amandamunoz)

- [Assaf Gannon (@assafga1)](https://twitter.com/assafga1)

- [Cam Jackson (@thecamjackson)](https://twitter.com/thecamjackson)

- [David Leitner (@duffleit)](https://twitter.com/duffleit)

- [Elisabeth Engel (@\_lizzelo\_)](https://twitter.com/\_lizzelo\_)

- [Elmar 🐼 🇪🇺 (@elmarburke)](https://twitter.com/elmarburke)

- [Emanuel Indermühle (@inthemill)](https://twitter.com/inthemill)

- [Felipe Guizar Diaz (@felipeguizard)](https://twitter.com/felipeguizard)

- [Florian Rappl (@FlorianRappl)](https://twitter.com/FlorianRappl)

- [Gil Fink (@gilfink)](https://twitter.com/gilfink)

- [Gustaf Nilsson Kotte (@gustaf_nk)](https://twitter.com/gustaf_nk)

- [Hans-Christian Otto (@muhdiekuh)](https://twitter.com/muhdiekuh)

- [Ivan Jovanovic (@ivanjov96)](https://twitter.com/ivanjov96)

- [Joel Denning (@Joelbdenning)](https://twitter.com/Joelbdenning)

- [Kuba Holak (@kubaholak)](https://twitter.com/kubaholak)

- [Luca Mezzalira (@lucamezzalira)](https://twitter.com/lucamezzalira)

- [Lucas Dohmen (@moonbeamlabs)](https://twitter.com/moonbeamlabs)

- [Manfred Steyer (@ManfredSteyer)](https://twitter.com/ManfredSteyer)

- [Michael Geers (@naltatis)](https://twitter.com/naltatis)

- [Micro Frontend News on Twitter](https://twitter.com/_lizzelo_/lists/micro-frontend-news)

- [Matteo Figus (@matteofigus)](https://twitter.com/matteofigus)

- [Nils Röhrig (@drunknzombiecow)](https://twitter.com/drunknzombiecow)

- [Rui Marques (@ruimarques84)](https://twitter.com/ruimarques84)

- [Rustam Aliyev (@rstml)](https://twitter.com/rstml)

- [Will Mendes (@willmendesneto)](https://twitter.com/willmendesneto)

- [Yaprak Ayazoğlu (@yaprakaya)](https://twitter.com/yaprakaya)

- [Zack Jackson (@ScriptedAlchemy)](https://twitter.com/ScriptedAlchemy)

- [Rahul Gaur (@iamaregee)](https://twitter.com/iamaregee)

- [Lam Hieu (@lh0x00)](https://github.com/lh0x00)



## Courses and Tutorials



- [Micro Frontends Architecture](https://www.pluralsight.com/courses/micro-frontends-architecture)

- [Building micro-frontends](https://learning.oreilly.com/live-training/courses/building-micro-frontends/0636920358800/)

- [Micro-frontends Decisions Framework](https://www.pluralsight.com/courses/ng-conf-enterprise-session-10)

- [Microfrontends with React: A Complete Developer's Guide](https://www.udemy.com/course/microfrontend-course/)

- [Learn all about Micro-Frontends](https://www.freecodecamp.org/news/learn-all-about-micro-frontends/)



## Sample Projects



- [Module Federation](https://github.com/module-federation/module-federation-examples)

- [React Single SPA](https://github.com/react-microfrontends)

- [Vue Single SPA](https://github.com/vue-microfrontends)

- [Piral](https://github.com/piral-samples)



## Podcasts



- [Micro-Frontends with Luca Mezzalira on Software Engineering Daily](https://softwareengineeringdaily.com/2022/02/14/micro-frontends-with-luca-mezzalira/)

- [Michael Geers on Micro Frontends](https://www.se-radio.net/2020/08/episode-422-michael-geers-on-micro-frontends/) - Episode 422 in SE-Radio.

- [What even is a micro frontend?](https://changelog.com/jsparty/121) - Michael Geers in JS Party.

- [So You wanna use Monorepos and Micro Frontends](https://realtalkjavascript.simplecast.com/episodes/episode-99-so-you-wanna-use-monorepos-and-micro-frontends-in-your-enterprise-architecture-with-manfred-steyer) - Manfred Steyer in Real Talk JavaScript.

- [What's so cool about Micro frontends](https://www.thoughtworks.com/podcasts/micro-frontends) - Thoughtworks Technology Podcasts.

- [Micro-Front Ends with Natlia Venditto](https://webrush.io/episodes/episode-113-micro-front-ends-with-natlia-venditto) - Web Rush Podcast Episode 113 about Micro Front-ends.



## Who Uses



### Sendo



- [Sendo](https://sendo.vn).

- [Sendo Farm](https://sendo.vn/sendofarm).