Hi, I am Trishul

🤖

👨‍💻

Destructuring Frontend monoliths with MicroFrontends

@trishulgoel

Monoliths

Monolithic application is designed to be self-contained; components of the program are interconnected and interdependent

Frontend Monolith

All the code in a single place

Increased inter-team dependency

Slow development to deploy cycle

Increasing size of repo everyday

Only as strong as weakest link

MICROFRONTENDS

Microfrontend architecture is a design pattern where a monolithic Frontend app is destructured into small independent(?) apps. These micro apps are stitched together as a single page on the fly.

Standalone system

Independent Repository

Independent CI Pipelines

Independent Deployments

Parallel development cycle

ARCHITECTURE

Remote 1

HOST

Remote 2

Remote 3

HEADER

FOOTER

Home Page

Product Listing

Page

Product Details

Page

Payments

and

Checkout

Cart

MicroFrontend

Appshell / Host

Appshell

Shared business Logic

Tracking

System config

Routing

COMMUNICATION

Same tech stack

Share as params

Different tech stack

Custom DOM events

Custom DOM Events

HOW?

Some Traditional Approaches

Node modules

IFrames

MODULE FEDERATION

Remote 1

Remote 2

Remote 3

HOST

shared.component.ts

    import { Component, OnInit } from '@angular/core';

    @Component({
        selector: 'app-shared-component',
        templateUrl: './sharedModule.component.html',
        styleUrls: ['./sharedModule.component.css']
    })

    export class SharedComponent implements OnInit {
        constructor() {}

        ngOnInit(): void {}
    }

Remote config

    new ModuleFederationPlugin({
        name: "remote",
        filename: "remoteEntry.js",
        exposes: {
            './SharedModule': './src/app/shared/sharedModule.component.ts',
        },        
        shared: {
          "@angular/core": { singleton: true, strictVersion: true }, 
          "@angular/common": { singleton: true, strictVersion: true }, 
          "@angular/router": { singleton: true, strictVersion: true },
        }
    }),

Host config

	new ModuleFederationPlugin({
        remotes: {
            "remote": "remote@http://localhost:4300/remoteEntry.js",
        },
        shared: {
          "@angular/core": { singleton: true, strictVersion: true }, 
          "@angular/common": { singleton: true, strictVersion: true }, 
          "@angular/router": { singleton: true, strictVersion: true },
        }
    }),

Host App

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { SharedComponent } from 'remote/SharedModule';

    const routes: Routes = [
      {
        path: 'remote',
        component: SharedComponent,
        data: { from: ' Host' }
      },
    ];

    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

DEMO TIME

CHALLENGES

DESIGN CONSISTENCY

Initializing new MicroFrontend

Templating engine

Tenpureto

Moving components to design system

Sharing logic between Micro Frontends

Building an efficient developer experience

Decoupling code from Appshell

THANK YOU

@trishulgoel

REFERENCES

https://webpack.js.org/concepts/module-federation/
https://github.com/module-federation/module-federation-examples