Micro-frontends building blocks: Webpack Module Federation

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

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.
surveyjs.io
featured
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.
www.influxdata.com
featured
  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

  • Module Federation was created by Zack Jackson, a Webpack core maintainer himself, and was integrated as a flagship feature of Webpack 5 in October 2020.

  • single-spa

    The router for easy microfrontends

  • However, as great as Module Federation is, it is important to remember that it is not a framework, and as such it does not handle any of the implementation details for you. For example, you could use awesome client-side composition libraries such as Single SPA, or Next.js and just leverage Module Federation to do the module loading over the wire for you.

  • 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.

    SurveyJS logo
  • React

    The library for web and native user interfaces.

  • Later on, it was extended to support server-side rendering scenarios. Since the method I'm going to explore in building my micro-frontends is client-side composition using React.js, I've identified Module Federation as the perfect technology to use.

  • Next.js

    The React Framework

  • However, as great as Module Federation is, it is important to remember that it is not a framework, and as such it does not handle any of the implementation details for you. For example, you could use awesome client-side composition libraries such as Single SPA, or Next.js and just leverage Module Federation to do the module loading over the wire for you.

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

  • Optimizing React Apps for Performance: A Comprehensive Guide

    2 projects | dev.to | 2 Apr 2024
  • React setup without create-react-app

    3 projects | dev.to | 5 Feb 2023
  • Intégration analytics avec TypeScript, React et les Styled Components

    7 projects | dev.to | 5 Dec 2022
  • A Simple App with TypeScript, React and Styled Components - Part 1: setting up the tools

    6 projects | dev.to | 28 Nov 2022
  • Une application simple avec TypeScript, React et les Styled Components

    7 projects | dev.to | 25 Nov 2022