You Might Not Need Module Federation: Orchestrate your Microfrontends at Runtime with Import Maps

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • vite

    Next generation frontend tooling. It's fast!

    Vue is used as a core “metaframework” to have out-of-the-box routing, simple state management with Pinia and Vite as a bundler. It is not necessary at all to use the “metaframework”, moreover, during the build, you’ll get errors from Vite's internal import-analysis plugin because of unresolved imports (good news, there is a solution for that, see “Challenges → Metaframework”).

  • import-maps

    How to control the behavior of JavaScript imports

    The concept of Import Maps was born in 2018 and made its long way until it was declared a new web standard implemented by Chrome in 2021 and some other browsers.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • import-map-deployer

    A manifest deployment service for sofe/import maps

    The lightweight Nest.js Import Map Resolver server has two main roles: store and update the importmap, but also handle the submission of JS assets. Single-spa has a similar solution available.

  • t-shop

    The full source of the Demo app can be found here.

  • single-spa

    The router for easy microfrontends

    The lightweight Nest.js Import Map Resolver server has two main roles: store and update the importmap, but also handle the submission of JS assets. Single-spa has a similar solution available.

  • Nest

    A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript 🚀

    The lightweight Nest.js Import Map Resolver server has two main roles: store and update the importmap, but also handle the submission of JS assets. Single-spa has a similar solution available.

  • esm.sh

    A fast, smart, & global CDN for modern(es2015+) web development.

    { "imports": { "my-component": "https://assets.mycompany.io/scripts/my-component/index.5475c608.js", // allows import { my-component } from "component-library" syntax "component-library/": "https://assets.mycompany.io/scripts/my-components/", "lodash": "https://esm.sh/[email protected]", ⬅ "lazyload": "IntersectionObserver" in window ? "./lazyload.js" : "./lazyload-fallback.js", }, "scopes": { "https://assets.mycompany.io/scripts/my-components/": { "lodash": "https://esm.sh/[email protected]" ⬅ } } } script>

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts