Micro Frontends Bookmarks

Experience and Insights on Micro Frontends.

Theory

What is Micro Frontends?

• Micro Frontends

• Micro Frontends in Action

• 11 Popular Misconceptions About Micro Frontends

Why do we need Micro Frontends?

• Microfrontends: the good, the bad, and the ugly

• Gasp! You Might Not Need Microservices

• Sites vs. Apps defined: the Documents‐to‐Applications Continuum

• Why Jeff Bezos’ Two-Pizza Team Rule Still Holds True in 2018

• [zh-Hans] You may not necessarily need micro frontends

How to implement Micro Frontends?

• How to Micro Frontend with React

• Exploring possibilities for microfrontends of the next generation

• Micro­service Websites

• [zh-Hans] Dada's Micro Frontend Architecture Practice

• [zh-Hans] How ByteDance implemented micro frontends

• [zh-Hans] Building Enterprise-level Micro Frontend Solutions

• [zh-Hans] Micro Frontends in Meituan Takeout's Practice

• [zh-Hans] Building a Single-Page Application-like Architecture Using Micro Frontends

Practice

Solving Common Problems with Frameworks

• Alfa

• Feature Hub

• Frint

• Garfish

• Icestark

• Luigi

• micro-app

• Misk-Web

• ngx-planet

• OpenComponents

• Piral

• Podlet

• PuzzleJs Framework

• qiankun

Solving Specific Problems with Libraries

Module Resolution

• ES Module Shims

• SystemJS

• Trying to move axios to System.js import map, and having tons of problems

• Function is unexpectedly transformed into Object

• Module Exports vs. Export Default: Why Not Both?

• Node.js, TC-39, and Modules

• What is AMD, CommonJS, and UMD?

• Understanding (all) JavaScript module formats and tools

• How to fix nasty circular dependency issues once and for all in JavaScript & TypeScript

• Module Federation

• import-html-entry

Application Router

• single-spa

• Cant share info from MF1 to MF2 and MF2 to MF1 at the same time

CSS Isolation

• CSS of unmounted apps does not get removed

• Saving the Day with Scoped CSS

• react-shadow-root

• @font-face doesn't work with Shadow DOM?

• How to use Material Design Icons in a web component?

• Winning the war of CSS conflicts through the Shadow DOM

• Fix the relative path problem of CSS url() in CSSStyleSheet()

JS Sandbox

• exploring scope isolation (sandboxing) in JS

• ShadowRealms

• @ice/sandbox

DevTools

• import-map-overrides

• import-map-deployer

Performance

• Constructable Stylesheets

• CSS Modules