José Navarro
Hey there, I’m Jose. HTML, CSS, JAVASCRIPT, Angularjs, Nodejs, MongoDB. </ Web Developer> Trabajo Con ♥
Micro Frontends
Front End Developer - Api Reverse
Jose navarro
Joosenavarro
Itinerario
-
Microservicios y Monolitos
-
¿Qué es Micro Frontends?
-
Cómo implementar Micro Frontends.
-
Experiencia con Micro Frontends
-
Netflapp
Microservicios y Monolitos
Producto
Producto
Producto
Producto
Producto
Front End
¿ Que es Micro Frontends ?
Características
Características
-
Gran capacidad de expansión
Características
-
Gran capacidad de expansión
-
Capacidad de recuperación
Características
-
Gran capacidad de expansión
-
Capacidad de recuperación
-
Accesibilidad
Características
-
Gran capacidad de expansión
-
Capacidad de recuperación
-
Accesibilidad
-
Aplicaciones más abiertas
Características
-
Gran capacidad de expansión
-
Capacidad de recuperación
-
Accesibilidad
-
Aplicaciones más abiertas
-
Menor tiempo de carga
Características
-
Gran capacidad de expansión
-
Capacidad de recuperación
-
Accesibilidad
-
Aplicaciones más abiertas
-
Menor tiempo de carga
-
Deploy independiente
Características
Gran capacidad de expansión
Capacidad de recuperación
Accesibilidad
Aplicaciones más abiertas
Menor tiempo de carga
Deploy independiente
Diversidad de tecnología
¿ Cómo implementar Micro Frontend ?
-
SPA divididas por URLs
¿ Cómo implementar Micro Frontend ?
-
SPA divididas por URLs
¿ Cómo implementar Micro Frontend ?
-
Meta Framework Single SPA (single-spa.js)
¿ Cómo implementar Micro Frontend ?
-
Meta Framework Single SPA (single-spa.js)
¿ Cómo implementar Micro Frontend ?
-
Meta Framework Single SPA (single-spa.js)
¿ Cómo implementar Micro Frontend ?
-
Meta Framework Single SPA (single-spa.js)
¿ Cómo implementar Micro Frontend ?
-
IFrame
<iframe src="https://youtu.be/DNHuK1rteF4">
<p>Your browser does not support iframes.</p>
</iframe>¿ Cómo implementar Micro Frontend ?
-
IFrame
<iframe src="https://youtu.be/DNHuK1rteF4">
<p>Your browser does not support iframes.</p>
</iframe>¿ Cómo implementar Micro Frontend ?
-
IFrame
¿ Cómo implementar Micro Frontend ?
-
Web Component
¿ Cómo implementar Micro Frontend ?
-
Web Component
¿ Cómo implementar Micro Frontend ?
-
SPA divididas por URLs
-
Meta Framework Single SPA (single-spa.js)
-
IFrames
-
Web Component
¿ Cómo implementar Micro Frontend ?
Experiencia
Experiencia
app.com/
app.com/dashboard
app.com/profile
netflapp.com/account
netflapp.com/wach?id={id}
netflapp.com/browse
netflapp.com/
<flapp-watch></flapp-watch><flapp-watch></flapp-watch><flapp-watch></flapp-watch>main.jsapp.com/
app.com/
app.com/browse
app.com/
app.com/browse
npm i web-adapter-js<flapp-watch></flapp-watch>import { ComponentAdapter } from 'web-adapter-js';
const adapter = new ComponentAdapter();
adapter.loadComponents([
{ name: 'fp-watch', src: 'http://localhost:8081/build/main.js'},
]);
<flapp-watch></flapp-watch>import { RoutesAdapter } from 'web-adapter-js';
const route = new RoutesAdapter();
const id = 1;
route.emit('/app/watch/', { id });
import { RoutesAdapter } from 'web-adapter-js';
const route = new RoutesAdapter();
route.on().subscribe(({ route }) => {
this.router.navigate( [ route ] );
});import { RoutesAdapter } from 'web-adapter-js';
const route = new RoutesAdapter();
route.on().subscribe(({ route, option }) => {
this.router.navigate([ route ], { queryParams: option});
});import { RoutesAdapter } from 'web-adapter-js';
const route = new RoutesAdapter();
const id = 1;
route.emit('/app/watch/', { id });
<flapp-watch></flapp-watch>netflapp.com/
netflapp.com/browse
netflapp.com/account
netflapp.com/account
netflapp.com/wach?id={id}
netflapp.com/browse
netflapp.com/
https://github.com/joosenavarro/netflapp
https://youtu.be/BuRB3djraeM
@lucamezzalira
Gracias!
Joosenavarro
Jnavarro@dlocal.com
Micro Frontends
By José Navarro
