@anfibiacreativa
*views expressed in this deck are my own!
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
Fuertemente Acoplado
Grande
Complejo
Interdependiente
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
Above the Fold (En el viewport en tiempo de carga)
Ruta crítica (Critical Path) / Carga en línea o síncrona
Carga en asíncrona
@anfibiacreativa
módulos exportados con nombre, no utilizados
Compilación
@anfibiacreativa
@anfibiacreativa
base branch
feature/1
feature/2
feature/3
release
hotfix/1
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
unidad de negocio
equipo interdisciplinar
@anfibiacreativa
Web Component
Iframe
(SPA)
Host/Shell
ES Import
@anfibiacreativa
@anfibiacreativa
Nivel de
Encapsulación
Alto
Alto*
Bajo
Medio**
* Depende de los atributos de control del Iframe
**Depende del uso de Shadow DOM
Sources: caniuse.com
@anfibiacreativa
Sources: caniuse.com
@anfibiacreativa
Sources: caniuse.com
@anfibiacreativa
Sources: caniuse.com
@anfibiacreativa
@anfibiacreativa
seguridad
code
más riesgos
@anfibiacreativa
menos encapsulado
más encapsulado
menos riesgos
rendimiento (runtime)
código
más budget
más encapsulado
@anfibiacreativa
menos budget
menos encapsulado
backend
ciclos de release
más monolítico
más frecuentes
@anfibiacreativa
menos monolítico
menos frecuentes
equipo
despliegues
más independiente
más independientes
@anfibiacreativa
menos independientes
menos independiente
tipologia de equipo
tipo de contenido
grande + interdisciplinar
más estático
@anfibiacreativa
@anfibiacreativa
menos estático
pequeño
modulos en otro origen
tamaño de la app
si
grande
@anfibiacreativa
@anfibiacreativa
no
pequeño
utilización de una única tecnología (framework) pre-decidido
existe guía de estilos?
si
@anfibiacreativa
@anfibiacreativa
menos probable
más probable
no
@anfibiacreativa
@anfibiacreativa
Remoto 3
Remoto 2
Anfitrión (Host)
Remoto 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
@anfibiacreativa
Remoto
shareScope
Anfitrión
Contenedor
módulos provistos
módulos expuestos
módulos consumidos
control de versión
definición de versión
control de versión
ámbito compartido
Se puede cargar dinámicamente en cualquier aplicación como un módulo interno
@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
Y configuración de webpack dinámica
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
Composición
Enrutado
Comunicación
@anfibiacreativa
Emoji Icon: https://www.flaticon.com/authors/vectors-market at www.flaticon.com
@anfibiacreativa
Componente
iFrame
WebComponent
Pub/Sub
LocalStorage
entrada
event=`topic`
publish(event)
subscribe(event, callback)
subscribe(event, callback)
@anfibiacreativa
Sources: caniuse.com
@anfibiacreativa
Sources: caniuse.com
@anfibiacreativa
Sources: caniuse.com
@anfibiacreativa
Sources: caniuse.com
@anfibiacreativa
Sources: caniuse.com
@anfibiacreativa
@anfibiacreativa
Webpack 5
Node 12+
Angular 11+ (Webpack5 opcional)
Yarn para forzar la resolución to Webpack5
https://github.com/manfredsteyer/ngx-build-plus
@anfibiacreativa
https://github.com/anfibiacreativa/dynamicLoaderModuleFederation
Images and Gifs: Unsplash.com
@anfibiacreativa