Luca Mezzalira, perhaps the father of micro-frontends defines micro-frontends as “the technical representation of a business subdomain” that allow independent implementations with the same or different technology. They are an excellent case for large companies looking to divide their frontend applications into subdomains, allowing for independent deployment. This article discusses the comparison between monolith and micro-frontends, showcasing how EcmaScript Modules (ESM) can be used to reduce complexity in the composition of micro-frontends. By simply composing them as ESM using URL imports, the code can be imported as external modules, making micro-frontend composition easy with JavaScript’s native module system as the interface. The use of Astro, a meta-framework built on top of Vite and bundles to ESM, is highlighted as an excellent choice for a Shell app in a micro-frontend architecture. It implements the Island Architecture, allowing for the use of different frameworks such as React, Vue, or Solid on the same page. Import maps are also discussed for sharing dependencies across applications, where dependencies are fetched and cached from a CDN. The article provides insights into setting up micro-frontends with Astro and ESM, showcasing the benefits and ease of implementation in a micro-frontend architecture.
