MICRO FRONT END & MONOLITHIC ARCHITECTURE - rs-hash/Senior GitHub Wiki

• MICRO FRONT END
  • Types of integration
  • Host and Remotes
  • Module Federation
  • Code sample - Remote
  • Code Sample - Host ( Container )
  • Disadvantages
• MONOREPO ARCHITECTURE
• MONOLITHIC ARCHITECTURE

MICRO FRONT END

• Micro front ends are the extension of the idea of micro services in backend
• In Microfront end - idea is to split monolith front end into parts - which are standalone apps with separate CI/CD, repository - which can belong to different teams, which can be integrated into one container shell
• Front end is compsed from independent MFE's that can be built by different teams using different technologies
• Good Micro front end architecture should enforce decoupled modules, independently deployed, we can use multiple frameworks simultaneously and migrate in parts

Types of integration

1. Build time integration - where we develop as seperate package and publish to repository and npm install it in container shell and use it
2. Server side integration - when client requets, server sends the respective page
3. iFrame integration - where we integrate 2 micro front end as iFrames
4. Run-time integration - using Module Federation

Host and Remotes

• Container app which has both apps is called Host
• Individual MFE's which are used in this called Remotes

Module Federation

• To use this app in container app - we use Module federation
• It is the process of loading separately compiled applications at run time

Code sample - Remote

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
module.exports = {
    mode: "development",
    devServer: {
        port: 8000,
    },
    plugins: [
        new ModuleFederationPlugin({
            name: "barchart",
            filename: "remoteEntry.js",
            exposes: {
                "./BarchartIndex": "./src/index"
            }
        }),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
       
    ]
}

Code Sample - Host ( Container )

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')

module.exports = {
    mode: "development",
    devServer: {
        port: 8001
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new ModuleFederationPlugin({
            name: "container",
            remotes: {
                barchart: "barchart@http://localhost:8000/remoteEntry.js",
                piechart: "piechart@http://localhost:8002/remoteEntry.js",
                linechart: "linechart@http://localhost:8003/remoteEntry.js"
            }
        })
    ]
}

Disadvantages

1. Code Duplication
2. Extra effort in code review

MONOREPO ARCHITECTURE

1. Keep all your isolated bits of code in one super repository instead of managing multiple small repositories
2. individual projects can be deployed separately
3. Monorepo libraries - Pnpm/yarn, NX, Lerna

Disadvantages

1. No way to restrict only parts of application
2. Poor git performance

MONOLITHIC ARCHITECTURE

• In a monolithic architecture, all application components are tightly coupled and deployed as a single unit. This means that the front-end, back-end, and database are all bundled together. Monolithic architectures often utilize a single codebase and a shared database, allowing for easy development and deployment.
• Traditional model of software, built as a self contained and independent from other applications
• Scaling is difficult