@anfibiacreativa

Hype

Driven

Development

@anfibiacreativa

Micro

Frontends

@anfibiacreativa

@anfibiacreativa

1

2

3

@anfibiacreativa

Independent

Deployability

@anfibiacreativa

1

2

3

1

2

3

@anfibiacreativa

0

Web Component

Iframe

(SPA)

Host/Shell

ES Import

Level of

Encapsulation

Required

@anfibiacreativa

Level of

Encapsulation

High

Hyperlinks

Iframes

ES Imports

Web

Components

High

Low

Medium*

Depends on the use of Shadow DOM*

@anfibiacreativa

Sources: caniuse.com

@anfibiacreativa

Sources: caniuse.com

@anfibiacreativa

Sources: caniuse.com

@anfibiacreativa

Sources: caniuse.com

@anfibiacreativa

Does my project

micro frontends?

need

@anfibiacreativa

Module

Federation

@anfibiacreativa

1

2

3

0

Remote 3

Remote 2

Host

Remote 1

@anfibiacreativa

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

    module.exports = {
      output: {
        uniqueName: "host_name"
      },
      plugins: [
        new ModuleFederationPlugin({
          name: "host",
          remotes: {
            'remote1': "remote1" 
          },
          library: { type: "var", name: "host_name" },
          filename: "remoteEntry.js",
          shared: [
          // other advanced options include requiredVersion, shareScope, etc
          	"@anfibiacreativa/styles/styles.css",
          	{"@angular/core": { singleton: true, strictVersion: true }},
            {"@angular/common": { singleton: true, strictVersion: true }},
            {"@angular/router": { singleton: true, strictVersion: true }}
          ]       
        })
      ],
    };

@anfibiacreativa

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

    module.exports = {
      output: {
        publicPath: "http://localhost:4201/",
        uniqueName: "remote1"
      },
      plugins: [
        new ModuleFederationPlugin({
          name: "remote1",
          remotes: {
          },
          library: { type: "var", name: "remote1" },
          filename: "remoteEntry.js",
          exposes: {
              './Module': './src/app/remote1/remote1.module.ts',
          },
          shared: ["@angular/core", "@angular/common", "@angular/router"]       
        })
      ],
    };

@anfibiacreativa

Once you

Exposed your Module

You can dynamically load it to your app, like you load any internal module

@anfibiacreativa

import { SomeProvider } from "@shared-context/shared-providers";
import React from "react";

const ExposedModule = React.lazy(() => import("remote1/ExposedModule"));

const App = () => (
  <div>
    <h1>Remote Micro Frontend Example</h1>
    <SomeProvider.Provider value="value">
      <React.Suspense fallback="Loading Remote...">
        <ExposedModule />
      </React.Suspense>
    </SomeProvider.Provider>
  </div>
);

export default App;

@anfibiacreativa