🎨 Micro frontend resources

🔥 A curated list of resources about Micro frontends grouped by types. If you appreciate the content 📖, support projects visibility, give 👍| ⭐| 👏

Contents

• ⚛️ Websites
• 📝 Blog Posts
• 📹 Talks
• 📚 Books
• 📦 Frameworks and Libraries
• 📹Courses
• 📝 Papers
• ❔ Stackoverflow topics
• 🚀 Twitter threads
• 🔖 Other lists
• 👷 Proof of concepts

Websites

• https://microfrontend.dev/
• https://micro-frontends.org/
• https://web.tui/technology/microfrontends/

Blog Posts

2023

• Module Federation Shared API by Ruben Casas

2022

• Multi-Framework and -Version Micro Frontends with Module Federation: Your 4 Steps Guide by Manfred Steyer

• The Micro-Frontends future by Luca Mezzalira

• Integration of dot js Frameworks to Micro Frontend by Navdeep Singh Gill

• The Complete Guide to Micro Frontend with React.js for 2022 by Rahul Sharma

2021

• Taking micro-frontends to the next level by Shahar Talmi

• Frontends with Microservices – Why the choice of frontend architecture also impacts team collaboration by A. Fleischer and H. Schröder

• Scaling Applications Using Micro-Frontends - A checklist of problems that require solving while starting a microfrontend application by Prasanna

• Farewell, AngularJS: A study in UI legacy migrations

• Micro Frontend Architecture and Best Practices

• Let's Create A Web Application With Micro Frontends And Firebase by Issam El Nasiri

• Micro-frontend Architectures on AWS by Bryant Bost

• An Introduction to Micro-Frontends in Enterprise Applications (part 1) by David Alecrim

• Micro frontend tutorial: Creating a form with React + Module Federation for Furgonetka.pl by Robert Goik

• Micro-Frontends: What, why, and how by Rany ElHousieny

• You probably don’t need a micro-frontend by Colin Eberhardt

• Serverless Micro-Frontends with the AWS CDK by Fullstack Frontend

2020

• Micro Frontends Pattern Comparison by Florian Rappl

• How to build a micro-frontends architecture, with Angular and Webpack Module Federation by Benoit Hediard

• Micro frontends: my lessons learned by Natalia Venditto

• Webpack 5 and Module Federation - A Microfrontend Revolution by Marais Rossouw

• The Microfrontend Revolution – Part 2: Module Federation with Angular by Manfred Steyer

• The Story of Micro Frontends by Ruben Casas

• Lessons from DAZN: Scaling Your Project with Micro-Frontends

• How We Build Micro Frontends by Jonathan Saring

• Building Micro Frontend with SSR — Routing by Vlad Fedosov

• Microfrontends: Escaping Version Hell with Module Federation by Manfred Steyer

• Microservices frontend: module federation, an handsome promise by Julien Froidefond

• Dynamic Module Federation with Angular - Loading microfrontends not known at compile time. by Manfred Steyer

• “Module Federation Light”: Using Microfrontends With Angular Already Today by Manfred Steyer

• The Microfrontend Revolution: Module Federation in Webpack 5 by Manfred Steyer

• Webpack 5 Module Federation: A game-changer in JavaScript architecture (Medium) by Zack Jackson

• Webpack 5 Module Federation: A game-changer in JavaScript architecture (IndepthDev) by Zack Jackson

• Building Micro-Frontends With Single-spa, React, and Vue by Mayur Ingle

• Introduction to Micro-Frontend Architecture by Mayur Ingle

• Time for the microservice revolution on frontend? by Luca Mezzalira

• Story behind Micro Frontends in Sabre by Kamil Thomas

• Thoughts About Micro-Frontends in 2020 by JS Dev Ray

• Let’s Build Micro Frontends with NextJS and Module Federation! by Yoav Ganbar

• Micro-frontend in smallcase by Shubham Singh

2019

• Micro-frontends decisions framework by Luca Mezzalira

• Micro-Frontend Architecture Patterns - Part 2: Backends for Frontends - A tailored approach for performant Micro Frontends. by David Leitner

• Micro-Frontend Architecture Patterns - Part 1: Micro Frontends - A gentle Introduction. by David Leitner

• Micro-frontend Architecture: Dynamic import chunks from another Webpack bundle at runtime. Interleaved Applications by Zack Jackson

• Microfrontends: The Benefits of Microservices for Client-Side Development

• Micro Frontend Architecture: Replacing a monolith from the inside out

• The Strengths and Benefits of Micro Frontends by Bob Myers

• React Microfrontends and Monorepos: A Perfect Match by Jason Jean

• Modern Web Engineering & Micro Frontends by Ivaylo Pavlov

• It's About Cutting Your Domain, Not (First And Foremost) About Micro Frontends! by Manfred Steyer(@ManfredSteyer)

• I don’t understand micro-frontends

• Five Things to Consider Before Choosing Micro Frontends

• Micro Frontends by Cam Jackson

• Micro-frontends, the future of Frontend architectures

• Slaying the UI AngularJS Monolith Using Micro Frontends Architecture - A Micro Frontend Approach to a Framework Agnostic Modular UI Architecture

2018 and earlier

• A High-Performmance Solution to Microservice UI Composition

• Independent micro frontends with Single SPA library

• Angular, React, Vue.Js And Co. Peacefully United Thanks To Micro Apps And Web Components

• 5 Reasons to Use Angular Elements

• A Software Architect's Approach Towards Using Angular (And SPAs In General) For Microservices Aka Microfrontends

• Micro Front-Ends: Web Components

• Experiences Using Micro Frontends at IKEA

• Microservice Approach for Web Development: Micro Frontends

• Let's build a Webshop out of Micro Frontends

• Micro Frontends - How I Built An SPA With Angular And React?

• Our micro-front-end web architecture

• Managing Frontend in the Microservices Architecture

• UI in Microservices World – Micro Frontends pattern and Web Components

• Modernizing Upwork with Micro Frontends

• Front-End Micro Services: Fragments: limitations, solutions and our approach

• [DE-de] Micro-Frontends - Die bessere Art User Interfaces zu implementieren?

• [DE-de] Micro-Frontends - Die bessere Art User Interfaces zu implementieren? Teil 2

• [DE-de] Micro-Frontends - Die bessere Art User Interfaces zu implementieren? Teil 3

• [DE-de] Micro-Frontends: Große Webprojekte modularer entwickeln

• [DE-de] 6 MICRO-FRONTEND-ARTEN IM DIREKT-VERGLEICH: DAS SIND DIE VOR- & NACHTEILE

• [DE-de] Vorteile von Micro frontend Architecturen für Enterprise Application

Talks

• Serverless for Frontends by Florian Rappl

• Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways by Manfred Steyer

• Beyond Micro Frontends: Frontend Moduliths for the Enterprise by Manfred Steyer

• More Than Micro Frontends: 3 Further Use Cases for Module Federation by Manfred Steyer

• The Microfrontend Revolution Module Federation with Angular by Manfred Steyer

• 6 Things You Should Know About MicroFrontends by Manfred Steyer

• Micro Frontend Architecture Building an Extensible UI Platform by Erik Grijzen

• Patterns for micro frontends by Erik Dörnenburg

• Micro frontends: extending service-oriented architecture to frontend development by Jakub Sowiński

• Web Components & Micro Apps: Angular, React & Vue peacefully united?

• Micro-frontend: microservice architecture from your web apps

• Introduction to micro-frontends

• Micro Frontends - Why do we need Micro Frontends

• A Micro Frontends Future: Using Angular with React and Vue in Enterprise apps

• RSconf2018. Introduction to Micro Frontends

• Michael Geers - Micro Frontends: Break Up You Web App!

• A High-Performance Solution to Microservices UI Composition - Arif Wider & Alexey Gravanov

• Breakup with your Frontend monolith

• Collections of slides to about micro frontend

• The Key to Scaling Single Page Applications, Micro Frontends | Webinar Presentation + Demo

• [DE-de] Micro Frontend im Rewe Shop Evolution eines Headers

Books

• Journey to Micro Frontends by Brendon Co

• Software Architecture Patterns for Serverless Systems by John Gilbert

• 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

• Building Micro-frontends by Luca Mezzalira

• Micro Frontends in Action by Michael Geers

• Micro Frontends Architecture: Introduction, Design, Techniques & Technology by Ajay Kumar

Frameworks and Libraries

• Piral: Build highly modular applications fully flexible for large scale portal solutions
• TUI Modular Web Architecture
• Feature Hub - Create scalable web applications using micro frontends
• Webpack 5 Module Federation: start treating your component libraries as independently deployed services
• Qiankun: Blazing fast, simple and completed solution for micro frontends
• Single SPA: a javascript framework for front-end microservices
• Ara Framework: Build Micro-frontends easily using Airbnb Hypernova
• Icestark: Micro Frontends solution for large application
• Puzzle JS: Micro frontend framework for scalable and blazing fast websites
• One App: a fresh, modular take on web application development
• OpenComponents: Painless micro frontends delivery
• Misk-Web: a new micro-frontends Typescript + React web framework from Cash App
• Nut JS: a framework born for micro frontends
• Cellular JS: A Javascript framework implementation of "UI Focused State Oriented Architecture" grounded by MVP (Model View Presenter), with micro-frontends support
• Luigi: Micro frontend framework
• Microfronts: Polyglot Front-End Solution for running multiple frameworks as one
• Ngx Planet: A powerful, reliable, fully-featured and production ready Micro Frontend library for Angular.
• Mooa: A independent-deployment micro-frontend Framework for Angular from single-spa.
• Scalecube-js: Toolkit for working in microservices/micro-frontends architecture
• RollCake SPA: RollCakeSpa.js is a progressive, incrementally-adoptable JavaScript framework for building micro-frontends UI on the web.

Courses

• Learn microfrontends with single-spa
• Module Federation video tutorials
• Micro Frontends and single-spa video tutorials

Papers

• Experiences on a Frameworkless Micro-Frontend Architecture in a Small Organization by J. Männistö, Antti-Pekka Tuovinen et al. (2023)

• Evaluating Micro Frontend Approaches for Code Reusability by Emilija Stefanovska & Vladimir Trajkovik (2023)

• Moderation panel for the virtual event platform as a micro frontend module by Azizyan Samson (2022)

• The Migration of a Large-Scale Web Application from Monolith to Micro-frontends by Xiao Zifan (2022)

• Implementing Micro Frontends Using Signal-based Web Components by Yuma Nishizu, Tetsuo Kamina (2022)

• [DE-de] Extrahieren von Micro-Frontends aus einer monolithischen Frontend Anwendung by Billy Lando (2022)

• Design Systems for Micro Frontends - An Investigation into the Development of Framework-Agnostic Design Systems using Svelte and Tailwind CSS by M. C. Klimm (2021)

• Enterprise-Level Migration to Micro Frontends in a Multi-Vendor Environment by I. Pölöskei1 and U. Bub (2021)

• A Brief Review of Micro-frontends by Y.R. Prajwal et al. (2021)

• Design Systems for Micro Frontends-An Investigation into the Development of Framework-Agnostic Design Systems using Svelte and Tailwind CSS by Marvin Christian Klimm (2021)

• Micro frontend architecture for cross framework reusability in practice by Veerle Ongenae et al. (2021)

• An Exploratory Study of Micro Frontends by Anna Montelius (2021)

• From Backend to Frontend - Case study on adopting Micro Frontends from a Single Page ERP Application monolith by Kroiß Manuel (2021)

• Motivations, Benefits, and Issues for Adopting Micro-Frontends: A Multivocal Literature Review by Severi Peltonen, Luca Mezzalira, Davide Taibi (2021)

• Micro-frontends: application of microservices to web front-ends by Andrey Pavlenko et al. (2020)

• A Novel Application of Educational Management Information System based on Micro Frontends by Daojiang Wang et al. (2020)

• Plutt: A tool for creating type-safe and version-safe microfrontends by Julius Celik (2020)

• Towards a Modular Architecture for Industrial HMIs by M. Shakil and A. Zoitl (2020)

• Micro frontend architecture for cross framework reusability in practice by T. De Smet(2020)

• Research and Application of Micro Frontends by Caifang Yang et al (2019)

• [DE-de] Microservices Architekturen für Webanwendungen: Micro-Frontends by Billy Lando (2019)

• [DE-de] Machbarkeit und Umsetzung einer Micro-Frontend Architektur mit WebComponents by Dominic Karnehm (2019)

• [DE-de] Micro-Frontends by Matthias Baumann (2019)

Stackoverflow topics

• VueJs Micro-frontend approach

• How to embed an angular app into another app ?

• Micro frontend application

• Micro frontend architecture advice

Twitter threads

• Micro Frontend can be managed with inside multiple repos or with monorepos by Manfred Steyer
• I don't understand micro frontend by Dan Abramov
• Micro frontends and monorepo by Victor Savkin

Other lists

• List of lots of ressources about micro frontend by Elisabeth Engel

• Awesome micro frontends

Proof of concepts

• Implementation examples of module federation , by the creators of module federation

• Nx micro frontend example

• angular-react-microfrontend: Angular + React + NodeJS + MySQL