Solução para Abstração Do Processo de Integração de Fragmentos Experimental

Solução para abstração do processo de integração de fragmentos
dependency-free na arquitetura de micro frontends: Uma proposta

experimental
Trabalho de graduação (TG) do curso de Sistemas de Informação
Antonio A. C. G. Neto Vinicius C. Garcia Pedro J. d. S. Neto

Graduando Orientador Co-Orientador
Roteiro
● Introdução
○ Evolução da web
○ Arquitetura monolítica
○ Arquitetura de microsserviços
○ Continuação dos problemas de escalabilidade
○ Arquitetura de micro frontends
○ Single-SPA
○ Quais os problemas encontrados?
● Objetivo
● Metodologia de Trabalho
● Resultados
● Discussão
● Conclusão
● Diretrizes futuras
Introdução
Evolução da web
Introdução
Arquitetura monolítica
Portal
Cadastro Pedidos Relatórios
Database
Introdução
Arquitetura de microsserviços
Portal
Database Database Database

Introdução
Continuação dos problemas de escalabilidade
Portal
Função 1 Cadastro Pedidos Relatórios Função 2
Função 3 Função 4 Função 5 Função 6 Função 7

Introdução
Arquitetura de micro frontends
Portal Contenedor Web

Storage
Portal da Portal de Portal de Portal de Portal da

Database Database Database Database Database

Introdução
Single-SPA
Introdução
Como funciona o Single-SPA?
Portal Contenedor
Portal de Portal de Portal de

Introdução
Qual o problema encontrado?
Portal Contenedor
Obrigatoriedade de uso, restrição

Portal de Portal de Portal de a determinadas tecnologias e
Cadastro Pedidos Relatórios necessidade de configuração
individual a cada módulo novo
Objetivo
Geral
Desenvolver uma ferramenta que abstraia o processo de integração de micro frontends sem a
necessidade de dependências obrigatórias nos fragmentos.
Objetivo
Específicos
● Ampliar o suporte de tecnologias independentemente da

stack escolhida pelos desenvolvedores.
● Facilitar o desenvolvimento de aplicações com arquitetura
de micro frontends;
Metodologia de Trabalho
Parâmetros orientadores
Brainstorming
Roll Cake
Arquitetura
Arquitetura - MF-Broker
Arquitetura - Router
Arquitetura - SPA
Canais de distribuição
Cenário de exemplificação
Plano GQM
GQM - Meta 1
Aplicabilidade da ferramenta rollcake-spa na implementação de uma aplicação com arquitetura de

micro frontends a fim de melhorar o suporte à tecnologias presentes nos fragmentos.
GQM - Perguntas e métricas
Perguntas Métricas
(P1) O quão eficiente é o suporte à R1: Quantidade atual de tecnologias

tecnologias de frontend implementado pelo suportadas
single-spa? R2: Quantidade de ações para inclusão de
novas tecnologias suportadas
(P2) O quão eficiente é o suporte à R1: Quantidade atual de tecnologias

tecnologias de frontend implementado pelo suportadas
rollcake-spa? R2: Quantidade de ações para inclusão de
novas tecnologias suportadas
GQM - Meta 2
Aplicabilidade da ferramenta rollcake-spa na implementação de uma aplicação com arquitetura de

micro frontends a fim de melhorar a agilidade de construção deste tipo de projeto.
GQM - Perguntas e métricas
Perguntas Métricas
(P1) O quão fácil é configurar os projetos R1: Quantidade de ações realizadas nos
das micro aplicações pelo single-spa? projetos das micro aplicações
(P2) O quão fácil é configurar os projetos R1: Quantidade de ações para configuração
das micro aplicações pelo rollcake-spa? dos projetos das micro aplicações
Resultados
MF-Broker
index.js index.html
import { RollCakeMFBroker } from <html>

'@rollcakejs/rollcake-mf-broker'; <head></head>
<body>
const MFBroker = new RollCakeMFBroker([{ <rollcake-microfrontend
name: 'react-bucket', name="react-bucket">
address: 'https://localhost:3000' </rollcake-microfrontend>
}]); <script src="./index.js"/>
</body>
MFBroker.init(); </html>
window.RollCake.bus.publish(eventName,payload);
window.RollCake.bus.subscribe(eventName, callback);
window.RollCake.store.getState(stateName);
window.RollCake.store.setState(stateName, newState);
Resultados
Router
import { RollCakeRouter, NAVIGATION_MODE }

from '@rollcakejs/rollcake-router';
const Router = new RollCakeRouter({

routes: [{
path: '/react',
item: null
}],
mode: NAVIGATION_MODE.HISTORY
});
Resultados
SPA
index.js index.html
import { RollCakeMFBroker, RollCakeRouter, RollCakeSpa,

NAVIGATION_MODE } from '@rollcakejs/rollcake-spa';
import ReactPage from './components/ReactPage';
import './global.css';
const MFBroker = new RollCakeMFBroker([{ <html>

name: 'react-bucket',
<head></head>
address: 'https://localhost:3000'
}]); <body>
<div id="root"></div>
const Router = new RollCakeRouter({
<script src="./index.js"/>
routes: [{
path: '/, </body>
item: ReactPage </html>
}],
mode: NAVIGATION_MODE.HISTORY
});
new RollCakeSpa(MFBroker, Router, document.getElementById('root'));

Resultados
Disponibilização pública e gratuita
https://rollcakejs.github.io/rollcake-spa.org/
https://github.com/orgs/rollcakejs/packages
https://github.com/rollcakejs
Resultados
Cenário de exemplificação: Spotify Clone
https://rollcake-spotify-clone.herokuapp.com/
Resultados
QGM
(M1-P2-R1) Suporta, atualmente, mais de

(M1-P1-R1) Suporta, atualmente, 15 tipos
20 tipos de tecnologia frontend acessível
de tecnologias frontend
ao navegador
(M1-P1-R2) Pelo menos 1 ação de

implementação referente a criação de um (M1-P2-R2) 0 ações são necessárias
novo plugin para o single-spa
(M2-P1-R1) 3 ações: Instalação de dep., (M2-P2-R1) 2 ações: Configuração de

configuração e chamada de comunicação CORS policy e chamada de comunicação
por eventos por variável de janela
Discussão
Protótipo de exemplificação funcional SEO (IFrames)
Maior quantidade de tecnologias

Segurança (IFrames e Window Variables)
suportadas
Menor operabilidade para

disponibilização de suporte
Menor operabilidade para integração de

projetos das micro aplicações
Conclusão
Produto que cumpre os papéis básicos definidos pela

arquitetura e atinge os objetivos esperados.
Seus pontos de ressalva tornam sua viabilidade de

execução em um ambiente totalmente público pouco
atrativo. Porém, encontra seu lugar no desenvolvimento
de sistemas internos e na migração de sistemas legado.
Diretrizes futuras
Mudança de ferramenta de composição de micro frontends
Análise de desempenho de algoritmo de renderização
Investigação quanto a vulnerabilidade de iframes
Investigação de algoritmo experimental para indexação em

sites de busca de sistemas que utilizem iframes
Antonio A. C. G. Neto Vinicius C. Garcia Pedro J. d. S. Neto
Graduando Orientador Co-Orientador
"Science never solves a problem without creating ten more." (George Bernard Shaw)

Solução para Abstração Do Processo de Integração de Fragmentos Experimental

Enviado por

Dados do documento

Descrição:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Descrição:

Direitos autorais:

Formatos disponíveis

Solução para Abstração Do Processo de Integração de Fragmentos Experimental

Título original:

Enviado por

Descrição:

Direitos autorais:

Formatos disponíveis

Solução para abstração do processo de integração de fragmentos

dependency-free na arquitetura de micro frontends: Uma proposta

Antonio A. C. G. Neto Vinicius C. Garcia Pedro J. d. S. Neto

Cadastro Pedidos Relatórios

Cadastro Pedidos Relatórios

Database Database Database

Função 1 Cadastro Pedidos Relatórios Função 2

Função 3 Função 4 Função 5 Função 6 Função 7

Portal Contenedor Web

Portal da Portal de Portal de Portal de Portal da

Função 1 Cadastro Pedidos Relatórios Função 2

Database Database Database Database Database

Portal de Portal de Portal de

Obrigatoriedade de uso, restrição

● Ampliar o suporte de tecnologias independentemente da

Aplicabilidade da ferramenta rollcake-spa na implementação de uma aplicação com arquitetura de

(P1) O quão eﬁciente é o suporte à R1: Quantidade atual de tecnologias

(P2) O quão eﬁciente é o suporte à R1: Quantidade atual de tecnologias

Aplicabilidade da ferramenta rollcake-spa na implementação de uma aplicação com arquitetura de

import { RollCakeMFBroker } from <html>

import { RollCakeRouter, NAVIGATION_MODE }

const Router = new RollCakeRouter({

import { RollCakeMFBroker, RollCakeRouter, RollCakeSpa,

const MFBroker = new RollCakeMFBroker([{ <html>

new RollCakeSpa(MFBroker, Router, document.getElementById('root'));

(M1-P2-R1) Suporta, atualmente, mais de

(M1-P1-R2) Pelo menos 1 ação de

(M2-P1-R1) 3 ações: Instalação de dep., (M2-P2-R1) 2 ações: Conﬁguração de

Protótipo de exempliﬁcação funcional SEO (IFrames)

Maior quantidade de tecnologias

Menor operabilidade para

Menor operabilidade para integração de

Produto que cumpre os papéis básicos deﬁnidos pela

Seus pontos de ressalva tornam sua viabilidade de

Mudança de ferramenta de composição de micro frontends

Análise de desempenho de algoritmo de renderização

Investigação quanto a vulnerabilidade de iframes

Investigação de algoritmo experimental para indexação em

Você também pode gostar