Awesome Micro-Frontends

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
• Websites
• Tools
• Books
• Posts
• Videos
• Slides
• Experience Reports
• Follow on Twitter
• Courses and Tutorials
• Sample Projects
• Podcasts
• Who Uses

Slack Workspaces

• Micro-frontends
• Single-Spa

Websites

• micro-frontends.org
• Micro Frontends by Elisabeth Engel

Tools

Projects

• Project Mosaic - A set of services, libraries together with a specification by Zalando.
• Bit - A tool for developing and composing / integrating independently versioned components.

Frameworks

• Ara Framework
• Garfish - A powerful micro front-end framework.
• icestark, a micro frontends solution for large application
• Isomorphic Layout Composer - Complete solution for Micro Frontends composition into SPA with SSR support.
• Misk Web: a Micro-Frontends React + Redux + Typescript Framework
• NUT
• OpenComponents, a framework for developing and distributing html components
• PuzzleJs
• Single-Spa
• qiankun, probably the most complete micro-frontends solution you ever met
• One-app by American Express
• Scalecube-js: Toolkit for working in micro-services/micro-frontends architecture
• Berial - Simple micro-front end framework
• Podium - Easy server side composition of microfrontends.
• Nuz is an open-source project, the runtime package manager for web platform. - Archived.
• Luigi - technology agnostic, open-source micro-frontend framework
• VoltranJS

Platforms

• Mashroom Server
• Piral

Related

• Angular_MicroApps_Different_Technologies
• A tiny, fast, zero-dependency event emitter
• Exercises for course "Integrating microservices on the frontend"
• Extending the microservice paradigms to web development
• Micromono
• Microservices in the frontend with BFFs providing their own bundles and API.
• Proxy middleware for express that enables composition of microservices.
• Service Oriented Front-end
• Simulate a micro frontend project using Node.js, React and NGinx Reverse Proxy in Alpine Docker images
• Micro-Frontends architecture

Books

• Micro Frontends in Action
• Building Micro-Frontends
• Micro Frontend & Micro Services - Build applications with Micro FE & Services - By Muralikrishna T.
• The Art of Micro Frontends - By Florian Rappl.
• Practical Module Federation - By Zack Jackson & Jack Herrington.
• Enterprise Angular - DDD, Nx Monorepos and Micro Frontends - By Manfred Steyer.
• Micro Frontends Architecture: Introduction, Design, Techniques & Technology - By Ajay Kumar.

Posts

• Everything You Need to Know About Micro Frontends
• The Future of Micro-Frontends
• Building Micro-Frontends With Single-spa, React, and Vue
• 6 Patterns for Microfrontends
• Micro Frontends by Cam Jackson
• Micro frontends - a microservice approach to front-end web development
• Cookie Cutter Scaling
• Microservice Websites
• What is a micro frontend
• ThoughtWorks Technology Radar
• Dynamic vs. static ui composition
• Micro-libraries: The Future of front-end development
• The monolithic frontend in the microservices architecture
• A Software Architect's Approach towards MicroFrontends
• An approach to building Scalable Web Apps
• A Take on Micro-Frontends
• Building Microfrontends - Series
• Including Front-End Web Components Into Microservices
• Microservice Grid and Micro Frontends
• Microservice Websites
• Microservices to Micro-Frontends by Sandeep Jain
• Front-end microservices with Web Components
• Supporting Micro-frontends with ASP.NET Core MVC
• Building micro frontends — angular elements
• Micro Front-Ends: Webpack Manifest
• My experience using micro frontends by David Den Toom
• Page Building using Micro-Frontends and Server-Side Include
• Strangling a Monolith to Micro-frontends with Laravel, Vue.js, and Hypernova
• Serverless Micro-frontends using Vue.js, AWS Lambda, and Hypernova
• Using Micro-Frontends in WordPress with Gutenberg Blocks
• Taming the Frontend Monolith
• Micro-frontend Architecture: Replacing a Monolith from the Inside Out
• Breaking down the last Monolith - Micro Frontends
• Micro Frontends in Action
• How to build your first Micro Frontend with SSR in minutes
• You probably don't need a micro-frontend

Videos

• Micro-Frontends Antipatterns - Talk by Luca Mezzalira in CityJS conference 2022.
• The Microfrontend Revolution: Using Webpack 5 Module Federation - A talk by Manfred Steyer in JS Poland 2022.
• Micro-Frontends with Module Federation: Beyond the Basics - Talk by Manfred Steyer in Micro Frontends Conference in JSFoo 2022.
• Micro Frontend - Web Rebels, Oslo 2018
• Break Up With Your Frontend Monolith - JS Kongress 2017
• YouTube Playlist - Micro Frontend Talks
• Micro­service Websites by Gustaf Nilsson Kotte
• Breaking The Monolith
• Microservice UI Composition
• Introduction to Piral
• Micro Frontend Architecture - Building an Extensible UI Platform - A talk by Erik Grijzen on how New Relic implemented Micro Frontends.
• Microfrontends and single spa - Playlist by Joel Denning.
• Micro-Frontends: Whay, why and how? - A Video by Jack Herrington.
• Web Components for Micro Frontends - Jack Herrington using Web Components for Micro Frontends.
• Micro Frontends using single-spa - Jack Herrington using single-spa.
• Micro Frontends using Open Components - Jack Herrington on using Open Components.
• DIY Micro FE Framework - Jack Herrington on building a Micro-FE Framework.
• Micro-FEs in Zoid - Jack Herrington on using Zoid.
• Edge Side Includes for Micro-FEs - Jack Herrington on using ESI.
• The one right way to do microfrontends - two opinions - A Talk by Mario Fernandez for Thoughtworks Presents.

Slides

• Micro Frontend - Web Rebels, Oslo 2018
• Migrating from Monolith to Microfrontends
• Microservice Websites (microXchg 2017)
• Microservice Websites Presentation
• Avoid the Monolith by Michael Geers
• Micro Frontends by Michael Geers
• Micro Frontends - The Nitty Gritty Details or Frontend, Backend, 🌈 Happyend
• Micro Frontends by Assaf Gannon
• Micro Frontends by Srikanth Jallapuram
• Micro Frontends: Building a modern webapp with multiple teams by Michael Geers
• Introduction to micro frontends by Kuba Holak
• Microfrontends architecture by Lucca Mezzalira
• Lets talk about Micro Frontends
• Building micro-frontends by Luca Mezzalira
• 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
• allegro: Managing Frontend in the Microservices Architecture
• Hello Fresh: Front-end Microservices
• OpenTable: Microservices in the Frontend World
• OpenTable: Dismantling the monolith
• 5 years of OpenComponents
• AutoScout24: UI Composition
• Klarna Checkout
• Spotify: Technology Stack
• Let's build a Webshop out of Micro Frontends
• Using Micro-Frontends to Permanently Solve the Legacy JavaScript Problem
• Micro Frontends with Gustaf Nilsson Kotte
• Experiences Using Micro Frontends at IKEA

Follow on Twitter

Hashtags

• #microfrontend hashtag on Twitter
• #microfrontends hashtag on Twitter

People

• Amanda Muñoz (@amandamunoz)
• Assaf Gannon (@assafga1)
• Cam Jackson (@thecamjackson)
• David Leitner (@duffleit)
• Elisabeth Engel (@_lizzelo_)
• Elmar 🐼 🇪🇺 (@elmarburke)
• Emanuel Indermühle (@inthemill)
• Felipe Guizar Diaz (@felipeguizard)
• Florian Rappl (@FlorianRappl)
• Gil Fink (@gilfink)
• Gustaf Nilsson Kotte (@gustaf_nk)
• Hans-Christian Otto (@muhdiekuh)
• Ivan Jovanovic (@ivanjov96)
• Joel Denning (@Joelbdenning)
• Kuba Holak (@kubaholak)
• Luca Mezzalira (@lucamezzalira)
• Lucas Dohmen (@moonbeamlabs)
• Manfred Steyer (@ManfredSteyer)
• Michael Geers (@naltatis)
• Micro Frontend News on Twitter
• Matteo Figus (@matteofigus)
• Nils Röhrig (@drunknzombiecow)
• Rui Marques (@ruimarques84)
• Rustam Aliyev (@rstml)
• Will Mendes (@willmendesneto)
• Yaprak Ayazoğlu (@yaprakaya)
• Zack Jackson (@ScriptedAlchemy)
• Rahul Gaur (@iamaregee)
• Lam Hieu (@lh0x00)

Courses and Tutorials

• Micro Frontends Architecture
• Building micro-frontends
• Micro-frontends Decisions Framework
• Microfrontends with React: A Complete Developer's Guide
• Learn all about Micro-Frontends

Sample Projects

• Module Federation
• React Single SPA
• Vue Single SPA
• Piral

Podcasts

• Micro-Frontends with Luca Mezzalira on Software Engineering Daily
• Michael Geers on Micro Frontends - Episode 422 in SE-Radio.
• What even is a micro frontend? - Michael Geers in JS Party.
• So You wanna use Monorepos and Micro Frontends - Manfred Steyer in Real Talk JavaScript.
• What's so cool about Micro frontends - Thoughtworks Technology Podcasts.
• Micro-Front Ends with Natlia Venditto - Web Rush Podcast Episode 113 about Micro Front-ends.

Who Uses

Sendo

• Sendo.
• Sendo Farm.