You are on page 1of 36

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

Cadastro Pedidos Relatórios

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


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

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

Database Database Database Database Database


Introdução
Single-SPA
Introdução
Como funciona o Single-SPA?

Portal Contenedor

Portal de Portal de Portal de


Cadastro Pedidos Relatórios
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
Metodologia de Trabalho
Brainstorming
Metodologia de Trabalho
Roll Cake
Metodologia de Trabalho
Arquitetura
Metodologia de Trabalho
Arquitetura - MF-Broker
Metodologia de Trabalho
Arquitetura - Router
Metodologia de Trabalho
Arquitetura - SPA
Metodologia de Trabalho
Canais de distribuição
Metodologia de Trabalho
Cenário de exemplificação
Metodologia de Trabalho
Plano GQM
Metodologia de Trabalho
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.
Metodologia de Trabalho
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
Metodologia de Trabalho
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.
Metodologia de Trabalho
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)