Welcome to recommend the awesome Micro-frontends resource

Microfront-end is a kind of architecture similar to microservices. It applies the concept of microservices to the browser side, that is, the Web application is transformed from a single single application to a number of small front-end applications aggregated into one application. Each front-end application can also run, develop, and deploy independently.

The framework

  • Mooa
  • Single-Spa
  • Qiankun
  • Icestark
  • Ara Framework
  • OpenComponents
  • NUT
  • PuzzleJs

Chinese resources

  • Huang Fengda – Why micro front ends are starting to catch on: back end decoupling, front end polymerization
  • Huang Fengda – Those things in the micro front
  • Li Yi – Micro front end manual
  • Belllee – Micro front end introduction
  • Fang Yinghang – Micro front end introduction
  • Vincent.W – Understand what a micro front end is
  • Wang Xia invited the Moon bear – the design concept and practice of micro front end
  • Yunfeng YF – I don’t understand the micro front end (front-end micro service)
  • Yunfeng YF – adopts a micro front-end architecture
  • Huang Fengda – How does the micro front end land?
  • Huang Fengda – Six or seven ways to implement front-end microservitization
  • Fundebug – How to implement front-end microservitization
  • Supernavy – A push for front-end micro-service: Breaking through the traditional SPA bottleneck
  • Trotyl Yu – A journey through refined micro front end development
  • Daily superior fresh big front end team – daily superior fresh supply chain front end team micro front end transformation
  • Meituan technical team – build single-page application with micro front end
  • Top of the front end – Netease Yanxuan enterprise micro front end solution and practice
  • Kuitos – Probably the most complete micro front end solution you’ve ever seen
  • Haifeng Xu – ToB enterprise applications using Angular to create a micro front-end architecture
  • Yatao Zhang – takes you to write micro-front frame
  • Zhang Yatao – Application of microkernel architecture in large front-end Systems
  • Kiliwalk – Micro front end practice

series

  • Alili. Tech – Front-end microservization solutions 1 – Thinking
  • Alili. Tech – Front-end micro service solutions 2 – Single-SPA
  • Alili. Tech – Front-end micro service solution 3 – Module loader
  • Alili. Tech – Front-end microservitization solution 4 – Message bus
  • Alili. Tech – Front-end microservice solutions 5 – Route distribution
  • Alili. Tech – Front-end microservice solutions 6 – Build and deploy
  • Alili. Tech – Front-end microservice solutions 7 – Static data sharing
  • Alili. Tech – Front-end microservitization solutions 8 – Secondary build

The 14th D2 Micro front end special

  • A new species in cloud ecology — a micro front-end architecture system
  • Finch – Standard micro front-end architecture in ant landing practice
  • Sparrow – Micro front sandbox system

Angular

  • AngularInDepth – Builds micro front-end Angular Elements

React

  • Ve – Micro front end (singleSpa + React) demo
  • Invite Moon Bear – Micro front-end application template based on React & TypeScript & Webpack

Vue

  • Wang Shengsong – Single-Spa + Vue Cli micro front-end landing guide

The sample

  • Joeldenning – Vue Microfrontends
  • CanopyTax – single-spa-examples

books

  • Feng Da Huang – Front-end Architecture: From entry to micro front-end
  • Michael Geers – Micro Frontends in Action

English resources

The English language sources listed here are primarily from the Rajasegar-awesome micro-frontends project, thanks to Rajasegar Chandran for sharing.

Concepts

  • micro-frontends.org
  • Micro frontends — a microservice approach to front-end web development

Posts

  • Building Micro Frontends with React, Vue, and Single-spa
  • 6 Patterns for Microfrontends
  • Micro Frontends by Cam Jackson
  • Micro frontends – a microservice approach to front-end web development
  • Microservices to Micro-Frontends
  • 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

Videos

  • 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

Slides

  • Micro Frontends – JSUnconf.eu 2017
  • 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
  • Micro Frontends – a strive for fully verticalized systems
  • Building micro-frontends by Luca Mezzalira

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
  • Microservice Websites: Building consumer-facing websites with multiple teams

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 NodeJS, React and NGinx Reverse Proxy in Alpine Docker images

Platforms

  • Mashroom Server
  • Piral

Awesome Micro Frontends

  • Rajasegar – awesome-micro-frontends
  • ChristianUlbrich – awesome-microfrontends