DEV Community: Alison Rodrigues

Microfrontend: Registro dinâmico de componentes (module federation)

Alison Rodrigues — Thu, 23 Mar 2023 15:38:20 +0000

Hoje em dia existem várias formas de se construir aplicações front end distribuídas. Também existem inúmeros frameworks para facilitar a vida de quem está construindo um ambiente de componentes distribuídos e diferentes formas de gerenciar dependências e orquestrar os componentes visíveis no browser.

Neste artigo vou utilizar o "module federation", um modelo arquitetural proposto por Zack Jackson e outros Core Developers do Webpack. Como o module federation é uma especificação, existem implementações em diferentes Module bundlers como o Rollup. Porém a que está com a api mais avançada é mesmo o Webpack. Então os exemplos desse artigo são escritos utilizando do plugin ModuleFederation do Webpack.

Para que a arquitetura de module federation funcione, existem dois papéis, a application shell e o remote component. Esses papeis podem ser atribuídos a duas apps no mesmo projeto ou em projetos distintos (o mais comum é construí-los em projetos distintos).

O remote component deve informar quais trechos de códigos quer expor para serem utilizados em outras aplicações. Por exemplo uma classe, um componente, uma função e etc. E a application shell precisa ter registrado onde estão os componentes remotos que serão importados.

webpack.config.js (remote component)


module.exports = {
    //... 
    plugins: [
        new ModuleFederationPlugin({
            name: 'RemoteComponent1', // nome do módulo remoto
            filename: "remoteEntry.js",
            exposes: {
                "./AppContainer": "./src/App.js" // arquivos exportados, disponíveis para serem importados por outra aplicação
            },
            // ...
        }),
    ],
};

Exemplo de como exportar um componente utilizando o plugin ModuleFederationPlugin

webpack.config.js (application shell)


module.exports = {
    // ...
    plugins: [
        new ModuleFederationPlugin({
            name: "container",
            filename: "containerEntry.js",
            remotes: {
                "AppContainer": "RemoteComponent1@https://host-of-component/remoteEntry.js"
            },
            shared: {
                // ...
            }
        })
    ]
};

Exemplo de como configurar o plugin na aplicação shell para que seja possível encontrar o componente remotamente

Eis o problema

Como podemos ver, o registro dos componentes remotos acontece de forma estática através da propriedade remotes na configuração do plugin. Mas e se quisermos adicionar um novo componente? E se tivermos que atualizar o endereço http de algum dos componentes remotos? E se haver um controle de versão no projeto do componente remoto e o arquivo remoteEntry.js for gerado dinamicamente com diferentes nomes para diferentes versões?

Para todos esses casos e muitos outros, terá que ser alterado o arquivo webpack.config.js da aplicação shell e compilar o projeto todo novamente. Mesmo que não tenha sido alterado uma linha se quer de javascript na aplicação shell, o projeto tem que ser compilado novamente, ir para produção novamente, por conta de uma alteração em outro projeto. Ou seja pode acontecer de ser necessário recompilar a aplicação shell inúmeras vezes por causa dos projetos de componentes.

Eis a solução

O webpack + module federation fornece para nós uma API para que os componentes possam ser registrados dinamicamente. 🤩🤩🤩
Afinal esse registro acontece em tempo de execução, então nós podemos fazer manualmente a mesma coisa que o webpack faz!!!

O pulo do gato

Com o poder de registar os módulos remotos em suas mãos, você pode ler a lista de módulos remotos de qualquer lugar e não somente de um registro estático. Pode ser de um json hospedado em outro lugar ou até mesmo de algum cadastro servido por uma API (situação recomendada).

Mão na massa

A sintaxe para importação de um modulo remoto é muito simples, precisamos apenas de nome do componente, nome do módulo e a url, Exatamente como pudemos ver no exemplo acima da configuração dos remotes na aplication shell.

O script abaixo cria uma tag script no head do html para importar o script remoto e após o arquivo js ser importado instancia o modulo


async function loadRemoteComponent({scopeName, moduleName, url} = params) {
    const moduleExist = await window[scopeName]?.get(moduleName)
    return await moduleExist ? loadRemoteModule(scopeName, moduleName) : importRemoteScope(scopeName, moduleName, url)
}

async function importRemoteScope(scope, moduleName, url) {
    const element = document.createElement("script")
    element.type = "text/javascript"
    element.async = true
    element.setAttribute('id', `scope_${scope}`) // id caso você queria remover o import depois por algum motivo
    element.src = url
    let promise =  new Promise((resolve, reject) => {
        element.onload = async () => {
            const mod = await loadRemoteModule(scope, moduleName)
            resolve(mod)

        }
        element.onerror = async () => { reject('Não foi possivel carregar o modulo desejado') }
    })
    document.head.appendChild(element)
    return promise
}

async function loadRemoteModule(scope, moduleName) {
    await __webpack_init_sharing__("default")
    const container = window[scope]
    await container.init(__webpack_share_scopes__.default)
    const factory = await window[scope].get(moduleName)
    const module = factory()
    return module.default
    // se você não trabalha com export default faça: return module
}

Esse trecho de código deve estar presente na sua aplicação shell.

E para instanciar seu componente basta chamar:

loadRemoteComponent({
    moduleName: './AppContainer',
    scopeName: 'RemoteComponent1',
    url: 'http://https://host-of-component/remoteEntry.js'
  });

Você pode ter cadastrado esses componentes em outro lugar e não de forma estática no arquivo webpack.confg.js. Assim você faz uma requisição para essa lista de cadastro de componentes e os registra. Ou pode fazer o registro sob demanda, somente quando alguém pedir esse componente a sua aplicação shell.

Comparativo

Registro estático no webpack.config.js


// ...
new ModuleFederationPlugin({
    remotes: {
        "AppContainer": "RemoteComponent1@https://host-of-component/remoteEntry.js"
    }
})
// ...

Registro dinâmico com a função loadRemoteComponent

loadRemoteComponent({
    moduleName: './AppContainer',
    scopeName: 'RemoteComponent1',
    url: 'http://https://host-of-component/remoteEntry.js'
  });

Gostou? Ficou com alguma dúvida? Deixa um comentário que eu respondo.

Iniciando com Micro front-end (module federation)

Alison Rodrigues — Thu, 23 Mar 2023 15:25:49 +0000

Neste artigo vou utilizar o "module federation", um modelo arquitetural proposto por Zack Jackson e outros Core Developers do Webpack. Como o module federation é uma especificação, existem implementações em diferentes Module bundlers como o Rollup. Porém a que está com a api mais avançada é mesmo o Webpack. Então os exemplos desse artigo são escritos utilizando do plugin ModuleFederation do Webpack.

A forma mais fácil de iniciar um projeto com suporte ao module federation é através da cli create-mf-app desenvolvida pelo Jack Herrington (o canal do youtube dele tem bastante coisa sobre micro front-end lá, vale a pena dar uma olhada https://www.youtube.com/c/jackherrington ).

Para utilizar a cli basta executar o comando

npx create-mf-app

Siga as instruções da cli. Ela vai te perguntar algumas informações como nome da app, framework, porta para localhost e etc.

? Pick the name of your app: host
? Project Type: Application
? Port number: 8080
? Framework: vanilla
? Language: javascript
? CSS: CSS
Your 'host' project is ready to go.

Next steps:

▶️ cd host
▶️ npm install
▶️ npm start

Após executar esses passos podemos avaliar alguns arquivos importantes.

Veja o arquivo webpack.config.js é nele que vai estar as configurações do nosso micro front-end. Vá a propriedade de plugins desse arquivo. Lá você deve ver a configuração de um plugin chamado ModuleFederationPlugin e ele deve ser parecido com isso:


//...

plugins: [
  //...

  new ModuleFederationPlugin({
    name: "host",
    filename: "remoteEntry.js",
    remotes: {},
    exposes: {},
    shared: {
      ...require("./package.json").dependencies,
    },
  }),

  //...
]

Nesse plugin é onde vamos fazer toda a configuração e federação dos nossos módulos remotos (micro front-ends).

Dentro da literatura do Module Federation eles chamam os micro front-ends de Remote modules (Módulos remotos). E a partir daqui, eu também vou utilizar essa nomenclatura de módulo ou módulo remoto.

Uma grande vantagem da estratégia do Module Federation é que os módulos remotos são verdadeiramente módulos nativos do javascript. Módulos que você utiliza normalmente com import pack from package ou com require('package'). Diferente de outras estratégias de micro front-end como o Single-SPA que utilizam um pacote como dependência para garantir a integração entre os componentes, o Module Federation utiliza apenas javascript para isso. E isso nos leva ao arquivo package.json.

Se você selecionou como um projeto vanilla, verá que não há nenhuma dependência externa. Apenas o Babel que irá transpilar o código para garantir compatibilidade com todos os browsers. Se você selecionou algum framework como React ou Vue, vai ver que eles são a única dependência do seu projeto. E isso é sensacional! 🤩🤩🤩

Configurando o projeto para que seu componente possa ser utilizado em outro projeto

Como comentado anteriormente é no arquivo webpack.config.js que vamos fazer toda a configuração.

Entendendo as propriedades principais do ModuleFederationPlugin

Propriedade name: É o nome do seu módulo. É também como ele será chamado em outros projetos como em import x from name
Propriedade filename: É o nome do arquivo que será gerado no build onde irá conter o "contrato" do seu componente.
Propriedade shared: É aqui que você pode declarar quais pacotes você tem como dependência e que podem ser compartilhados. Por exemplo, se você tem dois componentes remotos em tela e os dois utilizam React, não é necessário importar o React duas vezes, essa é uma dependência que pode ser compartilhada entre todos os componentes em tela.
Propriedade exposes: É aqui que declaramos quais partes do nosso projeto queremos expor como um micro front-end. Podemos expor um único arquivo ou vários. E a declaração é algo muito simples. A chave é o nome do módulo e o valor é o caminho do arquivo.

....
plugins: [
        new VueLoaderPlugin(),
        new ModuleFederationPlugin({
            name: "YourPackageName",
            filename: "remoteEntry.js",
            remotes: {},
            exposes: {
                 "yourModuleName": "./src/yourModule/index.js",
            },
            shared: require("./package.json").dependencies,
        }),

Apenas com essas configurações quando dermos o build na aplicação será criado o arquivo remoteEntry.js que contém todo o manifesto do seu módulo, quais dependências ele tem, quais funções, outros arquivos e etc.

Agora que tudo está confgurado pode dar um build no projeto e exponha a pasta dos artefatos do build (geralemtne é a pasta 'dist') em um servidor http. Caso você não tenha nenhum servidor rodando, você pode inicar um com o pacote http-server disponível no npm (https://www.npmjs.com/package/http-server).

Conforme a documentação do pacote, você pode instalar ele globalmente com

npm install --global http-server

E para utilizar basta executa-lo na sua pasta de artefatos do build, como por exemplo:

 http-server ./dist

Pronto! seu arquivo de manifesto do seu modulo remoto está acessível via http. 🥳🎉🎉

Utilizando seu módulo em outro projeto

Em outro terminal crie um novo projeto utilizando o 'create-mf-app' igual para o primeiro.

Após seu projeto criado, você pode importar o módulo exportado do primeiro projeto como se fosse um pacote do npm. O seu projeto número dois terá como depência remota o projeto número um.

E para isso você precisa referenciar o projeto número um na propriedade "remotes" da configuração do plugin do webpack, conforme já descrito anteriormente.

a declaração da dependência remota é um pouquinho diferente da declaração de um pacote npm. Veja as diferenças:

package.json

{
 //...
 "dependencies": {
    "axios": "^0.27.2",
 }
}

webpack.config.js

  //...
  plugins: [
        new ModuleFederationPlugin({
            // ...
            remotes: {
                 "App1": "http://localhost:8080/remoteEntry.js",
            },
            // ...
        }),
  //...
  ]

Para declarar nosso módulo remoto nós damos um nome a ele e referenciamos o seu endereço da internet. Se você está executando o projeto um em localhost com o http-server a porta deve ser a que o http-server está rodando. nesse caso do exemplo é a 8080.

É só isso gente! Basta uma configuração muito simples no plugin para que um projeto referencie o outro e eles possam compartilhar funcionalidades!✨🌟🤩✨🌟🤩

Para mais informações sobre o Module Federation, exemplos de aplicações, documentação e etc. Vou deixar alguns links.

Também um artigo de um case bem legal da Localiza

https://medium.com/localizalabs/module-federation-o-futuro-do-microfrontend-4fed87983ec2

Postgres as Rest

Alison Rodrigues — Thu, 02 Mar 2023 02:44:39 +0000

Esse post foi retirado do repositório https://github.com/alisonjr/pg-rest

Recentemente conheci uma ferramenta incrível escrita em Golang que possibilita ter uma API do estilo "data driven" de forma rápida e extremamente fácil e com zero linhas de código. Sendo assim uma ótima opção para quando há necessidade de uma prototipação rápida, ou construir uma POC com pouco esforço na parte de backend.

No exemplo desse artigo será criado uma base de dados nova. Mas o que é demonstrado aqui pode facilmente ser aplicado a um banco de dados postgres já existente. Basta configurar as credenciais de conexão com o banco nas variáveis de ambiente do container do pRest.

Para executar o exemplo será necessário criar um arquivo docker-compose.yml com dois serviços: Um banco de dados Postgres e a grande estrela: pRest.

O pRest é uma ferramenta escrita em Go e adiciona uma camada rest em cima do banco de dados. Para mais informações acesse https://prestd.com.

version: "3"
services:
  postgres:
    image: postgres
    volumes:
      - "./data/postgres:/var/lib/postgresql/data"
    environment:
      - POSTGRES_USER=prest
      - POSTGRES_DB=prest
      - POSTGRES_PASSWORD=prest
    ports:
      - "5432:5432"
    healthcheck:
      test: ["CMD-SHELL", "pg_isready", "-U", "prest",  "-d", "prest"]
      interval: 30s
      retries: 3
  prest:
    image: prest/prest:v1.1
    links:
      - "postgres:postgres"
    environment:
      - PREST_DEBUG=false
      - PREST_AUTH_ENABLED=true
      - PREST_PG_HOST=postgres
      - PREST_PG_USER=prest
      - PREST_PG_PASS=prest
      - PREST_PG_DATABASE=prest
      - PREST_PG_PORT=5432
      - PREST_SSL_MODE=disable
      - PREST_CACHE_ENABLED=false
      - PREST_CACHE=false
    depends_on:
      postgres:
        condition: service_healthy
    ports:
      - "3000:3000"

O pRest transforma seu banco de dados Postgres em um serviço Rest instantaneamente, com autenticação, JWT e sem a necessidade de escrever uma linha de código. 🤩🤩

Para entender como funciona as operações de 'CRUD' consulte https://docs.prestd.com/prestd/docs/api-reference/. Já aviso que a API rest do pRest é bastante poderosa, posibilitando fazer queries mais complexas inclusive com joins e muito mais, consulte https://docs.prestd.com/prestd/docs/api-reference/advanced-queries/

Como fazer

Os exemplos a seguir foram retirados da documentação oficial do pRest https://docs.prestd.com/prestd/docs/setup/docker/#with-docker-compose

e de um artigo do Elton Minetto https://eltonminetto.dev/en/post/2021-08-31-prest

Requisitos

Ter o Docker instalado
Ter o Docker Compose instalado

Mão na massa

configuração

Abra um terminal na pasta em que está o arquivo docker-compose.yml e digite:

docker-compose up

Um banco novo do postgres foi criado e está disponível para utilizarmos.
Como indicamos para o pRest que iremos trabalhar com uma API com autenticação (indicado no docker-compose.yml em PREST_AUTH_ENABLED=true) e como também nosso banco de dados é novo e não possui nenhuma tabela ainda, é necessário que uma estrutura mínima de autenticação seja criada. E o pRest tem um comando para isso. Abra outro terminal e digite:

docker-compose exec prest prestd migrate up auth

Agora com a estrutura criada, podemos criar um usuário para poder utilizar a API.

Vamos criar usuário com o nome 'pREST Full Name', username 'prest' e a senha também será 'prest'

docker-compose exec postgres psql -d prest -U prest -c "INSERT INTO prest_users (name, username, password) VALUES ('pREST Full Name', 'prest', MD5('prest'))"

Você pode verificar se o usuário realmente foi criado com um select simples

docker-compose exec postgres psql -d prest -U prest -c "select * from prest_users"

A saída deve ser algo parecido com isso

 id |      name       | username |             password             | metadata
----+-----------------+----------+----------------------------------+----------
  1 | pREST Full Name | prest    | 8c60e97b9cf709c643e4a583b1ae9cb1 |
(1 row)

E PRONTO!!!🤩🤩 Uma API segura em frente ao seu banco de dados, e agora pode consumi-lo por http, sem precisar de conectores ou escrever sql.

Autenticar

Você pode enviar as credenciais como json para o endpoint /auth. Você pode utilizar qualquer cliente http, como postman, insonmia e etc, ou o bom e velho curl:

curl -i -X POST http://127.0.0.1:3000/auth -H "Content-Type: application/json" -d '{"username": "prest", "password": "prest"}'

O retorno deve ser algo parecido com isso

HTTP/1.1 200 OK
Content-Type: application/json
Date: Thu, 02 Mar 2023 01:43:53 GMT
Content-Length: 329

{"user_info":{"id":1,"name":"pREST Full Name","username":"prest","metadata":null},"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySW5mbyI6eyJpZCI6MSwibWV0YWRhdGEiOm51bGwsIm5hbWUiOiJwUkVTVCBGdWxsIE5hbWUiLCJ1c2VybmFtZSI6InByZXN0In0sImV4cCI6MTY3Nzc0MzAzMywibmJmIjoxNjc3NzQzMDMzfQ.wVKffo6oSuMiFj8JgQD6nXGQ1n-Xgj-zdXrH7zhGtBM"}

Onde o que nos interessa aqui é o conteúdo da resposta

{
    "user_info":{
        "id":1,
        "name":"pREST Full Name",
        "username":"prest",
        "metadata":null
    },
    "token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySW5mbyI6eyJpZCI6MSwibWV0YWRhdGEiOm51bGwsIm5hbWUiOiJwUkVTVCBGdWxsIE5hbWUiLCJ1c2VybmFtZSI6InByZXN0In0sImV4cCI6MTY3Nzc0MzAzMywibmJmIjoxNjc3NzQzMDMzfQ.wVKffo6oSuMiFj8JgQD6nXGQ1n-Xgj-zdXrH7zhGtBM"
}

O token recebido deve ser utilizado em todas as requisições a serem feitas para a API!

Criar uma tabela

Para simplificação vamos criar uma tabela nova diretamente no banco de dados

docker-compose exec postgres psql -d prest -U prest -c "create table books (id serial PRIMARY KEY,title varchar(255),author varchar(255), pages integer,quantity integer)"

Utilizando o pRest

A estrutura de path do pRest é bem simples sendo /{database}/{schema}/{table}

Filtros também são possíveis através de query params, como por exemplo:

curl -i -X GET http://127.0.0.1:3000/prest/public/books?id=1 -H "Accept: application/json" -H "Authorization: Bearer {token}"

Vamos enviar um novo registro para a nossa api

curl -i -X POST http://127.0.0.1:3000/prest/public/books -H "Accept: application/json" -H "Authorization: Bearer {token}" -d '{"title": "Dune", "author": "Frank Herbert", "pages":680, "quantity":100}'

O retorno será algo parecido com isso

HTTP/1.1 201 Created
Content-Type: application/json
Date: Thu, 02 Mar 2023 02:01:10 GMT
Content-Length: 75

{"id":1,"title":"Dune","author":"Frank Herbert","pages":680,"quantity":100}

Fazendo consultas na tabela books como select * from books where title like %title%

curl "http://127.0.0.1:3000/prest/public/books?title:tsquery=dune" -H 'Accept: application/json' -H 'Authorization: Bearer {token}'

Atualizar um registro

curl -i -X PUT http://127.0.0.1:3000/prest/public/books?id=1 -H "Accept: application/json" -H "Authorization: Bearer {token}" -d '{"title": "updated title", "author": "updated author"}'

O retorno será algo parecido com isso

HTTP/1.1 200 OK
Content-Type: application/json
Date: Thu, 02 Mar 2023 02:04:32 GMT
Content-Length: 19

{"rows_affected":1}

Remover um registro

curl -i -X DELETE http://127.0.0.1:3000/prest/public/books?id=1 -H "Accept: application/json" -H "Authorization: Bearer {token}"

Retorno

HTTP/1.1 200 OK
Content-Type: application/json
Date: Thu, 02 Mar 2023 02:17:14 GMT
Content-Length: 19

{"rows_affected":1}

Bom pessoal, esse é o básico! Para mais operações consulte a documentação oficial do pRest https://docs.prestd.com/

Microfrontend: Registro dinâmico de componentes (module federation)

Alison Rodrigues — Wed, 26 Oct 2022 11:04:02 +0000

webpack.config.js (remote component)


module.exports = {
    //... 
    plugins: [
        new ModuleFederationPlugin({
            name: 'RemoteComponent1', // nome do módulo remoto
            filename: "remoteEntry.js",
            exposes: {
                "./AppContainer": "./src/App.js" // arquivos exportados, disponíveis para serem importados por outra aplicação
            },
            // ...
        }),
    ],
};

Exemplo de como exportar um componente utilizando o plugin ModuleFederationPlugin

webpack.config.js (application shell)


module.exports = {
    // ...
    plugins: [
        new ModuleFederationPlugin({
            name: "container",
            filename: "containerEntry.js",
            remotes: {
                "AppContainer": "RemoteComponent1@https://host-of-component/remoteEntry.js"
            },
            shared: {
                // ...
            }
        })
    ]
};

Exemplo de como configurar o plugin na aplicação shell para que seja possível encontrar o componente remotamente

Eis o problema

Eis a solução

O pulo do gato

Mão na massa

O script abaixo cria uma tag script no head do html para importar o script remoto e após o arquivo js ser importado instancia o modulo


async function loadRemoteComponent({scopeName, moduleName, url} = params) {
    const moduleExist = await window[scopeName]?.get(moduleName)
    return await moduleExist ? loadRemoteModule(scopeName, moduleName) : importRemoteScope(scopeName, moduleName, url)
}

async function importRemoteScope(scope, moduleName, url) {
    const element = document.createElement("script")
    element.type = "text/javascript"
    element.async = true
    element.setAttribute('id', `scope_${scope}`) // id caso você queria remover o import depois por algum motivo
    element.src = url
    let promise =  new Promise((resolve, reject) => {
        element.onload = async () => {
            const mod = await loadRemoteModule(scope, moduleName)
            resolve(mod)

        }
        element.onerror = async () => { reject('Não foi possivel carregar o modulo desejado') }
    })
    document.head.appendChild(element)
    return promise
}

async function loadRemoteModule(scope, moduleName) {
    await __webpack_init_sharing__("default")
    const container = window[scope]
    await container.init(__webpack_share_scopes__.default)
    const factory = await window[scope].get(moduleName)
    const module = factory()
    return module.default
    // se você não trabalha com export default faça: return module
}

Esse trecho de código deve estar presente na sua aplicação shell.

E para instanciar seu componente basta chamar:

loadRemoteComponent({
    moduleName: './AppContainer',
    scopeName: 'RemoteComponent1',
    url: 'http://https://host-of-component/remoteEntry.js'
  });

Comparativo

Registro estático no webpack.config.js


// ...
new ModuleFederationPlugin({
    remotes: {
        "AppContainer": "RemoteComponent1@https://host-of-component/remoteEntry.js"
    }
})
// ...

Registro dinâmico com a função loadRemoteComponent

loadRemoteComponent({
    moduleName: './AppContainer',
    scopeName: 'RemoteComponent1',
    url: 'http://https://host-of-component/remoteEntry.js'
  });

Gostou? Ficou com alguma dúvida? Deixa um comentário que eu respondo.