Quatro empresas, quatro frameworks, um só produto.

Em uma imagem

A plataforma inteira, para entender olhando

Siga os números de 1 a 8. O resto deste guia detalha cada parte.

1 · O mapa

O caminho de um projeto, do edital à prestação de contas

Cada etapa é um módulo com dono. O proponente não sabe, nem precisa saber, que quatro empresas trabalham por trás: para ele, é um sistema só.

2 · A montagem

Um domínio, um app por módulo, cada um no seu framework

Cada empresa publica o app do seu módulo como imagem de contêiner. Um gateway Nginx recebe todo o tráfego do domínio e encaminha cada prefixo de URL para o app certo. O Anexo 3 já prevê o "Nginx (como servidor de aplicação e proxy reverso)" R1 p.57 · Anexo 3 §2.2. Nenhum framework manda nos outros.

Por que um app por módulo, e não um app único com os módulos dentro

Montar tudo num app só, com cada módulo instalado como pacote (por exemplo, Nuxt Layers), tem dois problemas. Obriga todas as empresas a usar o mesmo framework. E cada mudança de qualquer módulo exige gerar e publicar o app inteiro de novo. O artigo de referência sobre micro-frontends, de Cam Jackson no site de Martin Fowler, chama isso de integração em tempo de build e é direto: "we would recommend strongly against this kind of approach". O mesmo artigo recomenda dividir o produto por página, cada uma "owned end-to-end by a single team".

Como cada framework roda debaixo do seu prefixo

Os três wrappers do DSGov estão na versão 2.6.0. Angular precisa de justificativa no ADR, porque o Anexo 3 da FAPESB cita só "Vue.js/React.js" R1 p.57. O próprio R2 lista Angular para outra entidade R2 p.73 · Anexo 3 §2.3.

# gateway da plataforma: um domínio, um app por módulo
location /submissao/        { proxy_pass http://submissao-web:3000; }   # Nuxt · Z Future
location /contratacao/      { proxy_pass http://contratacao-web:3000; } # framework da Myappnow
location /prestacao/        { proxy_pass http://prestacao-web:3000; }   # framework da MTM
location /bolsas/           { proxy_pass http://bolsas-web:3000; }      # Empresa D
location /api/submissao/    { proxy_pass http://submissao-api:8080/; }  # uma regra por API
location /_plataforma/shell/ { root /srv/plataforma; }                  # @fapesb/shell compilado
location /                   { root /srv/plataforma/portal; }           # página inicial comum

Passo a passo: colocar o seu módulo no ar

1. Crie o app a partir do modelo do seu framework. Há um repositório-modelo para Nuxt, Next e Angular, com prefixo, shell, estilo, login e CI já configurados. Você cria o seu projeto no seu próprio GitHub ou GitLab.
2. Configure o prefixo do módulo. Exemplo no Next:

   // next.config.ts
   export default { basePath: '/contratacao' }

3. Aponte o escopo @fapesb para o Verdaccio. O token fica no cofre do CI, nunca no Git.

   # bunfig.toml
   [install.scopes]
   "@fapesb" = { token = "$FAPESB_NPM_TOKEN", url = "https://pacotes.<domínio-da-plataforma>/" }

4. Coloque o shell e o estilo. O mesmo HTML vale em qualquer framework (seção 3).
5. Garanta a qualidade. bun check, a checagem de tipos do framework, os testes e a acessibilidade passam no CI.
6. Publique a imagem e peça a rota. A imagem vai para a homologação integrada. A rota no gateway só é criada uma vez; depois, cada empresa publica no seu ritmo.

3 · O que é comum

Tudo o que se repete vai em pacote no Verdaccio

Os apps são independentes, mas não começam do zero. O que precisa ser igual em todos fica em pacotes @fapesb/*, publicados num registry privado e neutro, o Verdaccio. Os pacotes são escritos para funcionar em qualquer framework. Para código comum entre zonas em repositórios separados, o Next indica justamente "public or private NPM packages".

O cabeçalho comum: Web Components, para servir a todos

O @fapesb/shell traz o cabeçalho, o menu, o rodapé, o botão de login e o aviso de cookies como Web Components, escritos em Lit (TypeScript). É um padrão do navegador: funciona igual em Vue, React e Angular. O React 19 "adds full support for custom elements" (React). O Angular e o Vue também consomem e produzem custom elements (Angular Elements, Vue e Web Components). Escolhemos Lit, e não Vue, para o shell: assim nenhum framework fica no centro, e o Vue cobraria "~16kb" de runtime em cada app que não usa Vue.

<!-- igual em Nuxt, Next e Angular -->
<script type="module" src="/_plataforma/shell/v1/fapesb-shell.js"></script>

<fapesb-cabecalho modulo="contratacao"></fapesb-cabecalho>
<main> … telas do seu módulo … </main>
<fapesb-rodape></fapesb-rodape>

O Verdaccio: cada um no seu Git, pacotes num lugar só

Cada empresa trabalha no seu GitHub ou GitLab. Os pacotes vão para o Verdaccio, que é neutro, gratuito (MIT) e roda em Node 24. O GitHub Packages e o registry do GitLab exigiriam conta de todos na mesma plataforma. A escolha atende ao pedido de "soluções não proprietárias, que não necessitem de aquisições" R1 p.53 · Anexo 3 §1.1(ii).

# config.yaml do Verdaccio — quem lê e quem publica
packages:
  '@fapesb/shell':      { access: $authenticated, publish: zfuture }
  '@fapesb/estilo':     { access: $authenticated, publish: zfuture }
  '@fapesb/contratos':  { access: $authenticated, publish: ci-contratos }
  '@fapesb/base':       { access: $authenticated, publish: [dono-base] }
  '@fapesb/widgets-*':  { access: $authenticated, publish: [zfuture, myappnow, mtm] }
  '**':                 { access: $all, proxy: npmjs }   # o resto vem do npm público, com cache
uplinks:
  npmjs: { url: https://registry.npmjs.org/ }

Widgets entre módulos (ex.: o status do instrumento dentro da tela de submissão) também podem virar Web Components em pacote. Mas a regra é usar pouco. Fowler recomenda que os módulos se comuniquem "as little as possible"; na maioria das vezes, um link para o outro módulo resolve.

4 · Governança

Autonomia dentro do módulo, acordo nas fronteiras

O que só afeta o seu módulo, a sua empresa decide, inclusive o framework, dentro da lista comum. O que afeta outra empresa passa pelo Comitê de Arquitetura, com uma pessoa de cada empresa.

Quando a mudança vai ao comitê? Basta um critério

O caminho de uma mudança

5 · Identidade

Um login para tudo, em qualquer framework

A MTM configura o Keycloak da FAPESB (Realm FAPESB). Cada app de módulo é um client dele. Quem já entrou num módulo passa direto pelo Keycloak ao abrir outro: o login é um só, mesmo com frameworks diferentes.

Fundamento: as soluções devem "observar os requisitos de segurança, proteção de dados e conformidade tecnológica" R2 p.5-6 · §4.4.

6 · Integração

Contrato antes de código

Módulos de empresas diferentes conversam só por API, com JSON. O contrato é aprovado antes da implementação, e nenhum módulo acessa o banco de outro. O edital pede "Arquitetura baseada em microsserviços e integração via API RESTful" R1 p.57 · Anexo 3 §2.2.

// Recusa com descrição: o sistema de origem corrige e reenvia
{
  "type": "https://plataforma.fapesb.ba.gov.br/erros/prestacao/campo-fora-do-catalogo",
  "title": "Campo não previsto no catálogo",
  "status": 422,
  "detail": "O bloco 3 não aceita o campo 'patente_depositada'. Atualize o catálogo por RFC (A3).",
  "codigo": "PRESTACAO_BLOCO_CAMPO_FORA_DO_CATALOGO",
  "correlation_id": "01JC..."
}

7 · Identidade visual

A cara do governo, em Sass, nos três frameworks

Usamos o Padrão Digital de Governo (DSGov). Ele é escrito em Sass (SCSS), sem Bootstrap nem Tailwind, e Nuxt, Next e Angular compilam Sass nativamente. Por isso todo estilo da plataforma é Sass. A acessibilidade é exigência do edital: "Compatibilidade com padrões de acessibilidade e usabilidade institucional (ex: e-MAG)" R1 p.58 · Anexo 3 §2.2.

Como se escreve um componente (vale para os três frameworks)

@use "@fapesb/estilo" as govbr;           // ponte para os mixins e funções do DSGov

.contratacao-cartao {
  padding: var(--spacing-scale-2x);          // sempre token, nunca valor solto
  font-size: var(--font-size-scale-up-01);
  border: var(--surface-width-sm) solid var(--border-color);

  &__titulo { font-weight: var(--font-weight-semi-bold); }
  &:focus-visible { @include govbr.focus; }     // foco acessível do próprio DSGov
}

Esse SCSS entra num <style lang="scss" scoped> no Vue, num .module.scss no Next e no styleUrl de um componente Angular. Foi testado com o DSGov 3.7.0 e o Sass 1.108.1. O Stylelint 17 com stylelint-config-standard-scss barra cor hexadecimal solta.

8 · Stack e banco

TypeScript em primeiro lugar, framework de front à escolha

O edital diz que Python é a "principal linguagem para IA e NLP" e pede "Node.js e Vue.js/React.js para frontend" R1 p.57 · Anexo 3 §2.2. O resto é TypeScript, de ponta a ponta.

Um banco por módulo, leitura e escrita no mesmo lugar

Por que tem de ser o PostgreSQL 18

// tsconfig.json base — testado com bun check e Node 24
{ "compilerOptions": {
    "target": "ES2024", "module": "NodeNext", "moduleResolution": "NodeNext",
    "strict": true, "noUncheckedIndexedAccess": true, "exactOptionalPropertyTypes": true,
    "verbatimModuleSyntax": true, "erasableSyntaxOnly": true,   // sem enum: o Node 24 executa o .ts direto
    "allowImportingTsExtensions": true, "noEmit": true } }
// vale para APIs e pacotes; cada framework de front estende o tsconfig dele

9 · Nomes, URLs e slugs

A mesma coisa tem o mesmo nome em todo lugar

Com quatro frameworks, nomes iguais são o que deixa o código legível para quem chegar depois. E quem chega depois é a FAPESB, que recebe o código R1 p.58 · Anexo 3 §2.3.2.

10 · Metodologia

O mesmo ritmo nas quatro empresas

O edital pede "Princípios da metodologia ágil (Scrum)" e "DevOps e CI/CD com versionamento Git" R1 p.57 · Anexo 3 §2.2. Com quatro empresas e frameworks diferentes, o que evita surpresa é a sprint nas mesmas datas e uma demonstração conjunta a cada duas semanas.

Princípios de código: o básico bem feito

11 · Glossário

Os termos deste guia, num lugar só

Uma explicação curta de cada termo técnico usado aqui, com um link para a referência oficial.

12-Factor

Doze regras para apps que rodam bem em contêiner: configuração por variável de ambiente, logs na saída padrão, o mesmo artefato em todo ambiente. 12factor.net (PT)

ADR

Registro de decisão de arquitetura: uma página com o contexto, a decisão e as consequências. Toda decisão que cruza módulos vira um ADR. MADR

Angular

Framework de front do Google. Uma das três opções para o app de um módulo. angular.dev

API REST

Forma de um sistema oferecer dados a outro por HTTP, com URLs para cada recurso e respostas em JSON. RFC 9457 (erros)

axe

Ferramenta que verifica acessibilidade automaticamente. Roda junto com o Playwright no CI. Playwright + axe

BEM

Convenção de nomes de classe CSS: bloco__elemento--modificador. Evita que o estilo de um módulo afete outro. getbem.com

Bun

Ferramenta JavaScript/TypeScript que instala pacotes, roda testes, confere tipos (bun check) e publica pacotes. Em produção, quem roda é o Node 24. bun.sh/docs

C4

Modelo de diagramas em níveis: C1 (sistemas), C2 (contêineres), C3 (componentes). As RFCs usam C2 e C3. c4model.com

CI / CD

Integração e entrega contínuas: a cada mudança, o servidor de build roda testes e checagens e, se tudo passar, publica.

CloudEvents

Formato padrão para descrever um evento (o que aconteceu, quando, onde) entre sistemas. cloudevents.io

Conventional Commits

Padrão de mensagem de commit (feat:, fix:, chore:) que permite gerar o histórico de mudanças automaticamente. conventionalcommits.org (PT)

Custom element / Web Component

Componente HTML criado com padrões do próprio navegador. Funciona igual em Vue, React e Angular; por isso o cabeçalho comum é feito assim. MDN (PT)

Drizzle

Biblioteca TypeScript para acessar o PostgreSQL com tipos e gerar migrações em SQL. orm.drizzle.team

DSGov

Padrão Digital de Governo: o design system do governo federal (cores, fontes, componentes acessíveis), escrito em Sass. gov.br/ds · Web Components do DSGov

e-MAG / WCAG

Modelos de acessibilidade: o e-MAG é o brasileiro, a WCAG é a referência internacional. O nível AA é critério de aceite. e-MAG · WCAG 2.2

FastAPI

Framework Python para APIs. Usado só no serviço de IA. tutorial (PT)

Fastify

Framework Node para APIs, rápido e com validação por schema. Padrão das APIs TypeScript. fastify.dev

Gateway

O servidor (Nginx) que recebe todo o tráfego do domínio e encaminha cada prefixo de URL para o app do módulo certo. Next Multi-Zones

JWKS / token

O token é o comprovante de login que o Keycloak entrega. O JWKS é o conjunto de chaves públicas que as APIs usam para conferir se o token é verdadeiro.

Keycloak

Servidor de login da FAPESB. Guarda as contas e os perfis; cada módulo é um client dele. proteger apps com OIDC

LGPD

Lei Geral de Proteção de Dados (Lei 13.709). Por ela, CPF e outros dados pessoais não vão para logs e só trafegam quando necessário. planalto.gov.br

Lit

Biblioteca pequena para criar Web Components em TypeScript. Usada no @fapesb/shell para não depender de nenhum framework. lit.dev

Locust

Ferramenta em Python para teste de carga. Gera o relatório de carga exigido pelo edital. docs.locust.io

Micro-frontend

Dividir o front de um produto grande em partes de times diferentes. Aqui, cada módulo é um app próprio atrás do gateway. Cam Jackson, martinfowler.com · micro-frontends.org

MLflow

Ferramenta para registrar versões de modelos de IA, métricas e artefatos. mlflow.org

Monorepo

Um repositório com o código de vários projetos. Não usamos: cada empresa tem os próprios repositórios.

Next

Framework de front sobre React. Uma das três opções para o app de um módulo. nextjs.org · React (PT)

Node 24 LTS

O motor que roda JavaScript e TypeScript no servidor, em produção. LTS significa versão com suporte longo. rodar TypeScript direto

Nuxt

Framework de front sobre Vue. É o que a Z Future usa. nuxt.com · Vue (PT)

OIDC

OpenID Connect: o protocolo de login que o Keycloak fala com os módulos.

OpenAPI

Formato para descrever uma API (rotas, campos, erros) antes de escrever o código. É o contrato entre as empresas. learn.openapis.org

Outbox

Padrão para não perder evento: o evento é gravado na mesma transação do dado e enviado depois por um processo separado. microservices.io

OWASP Top 10 / ASVS

Listas de referência de segurança de aplicações web. Base do relatório de vulnerabilidades. Top 10 · ASVS

Pacote npm / escopo

Código empacotado e versionado que outros projetos instalam. O escopo @fapesb agrupa os nossos pacotes. pacotes · escopos

Pact

Teste de contrato: o consumidor descreve o que espera da API, e o provedor prova que entrega. docs.pact.io

pgBackRest

Ferramenta de backup do PostgreSQL, com restauração para qualquer momento (PITR). guia

PostgreSQL 18

O banco de dados da plataforma. Cada módulo tem o seu. tutorial · novidades do 18

RFC (proposta de mudança)

Documento curto que propõe uma mudança que afeta outras empresas, com impacto e diagramas. Vai ao comitê; aprovada, vira ADR.

Sass / SCSS

Linguagem que estende o CSS com variáveis, funções e mixins. O DSGov é escrito nela, e todo o estilo da plataforma também. sass-lang.com

Scrum

Forma de trabalho em ciclos curtos (sprints), com planejamento, reunião diária, demonstração e retrospectiva. Guia do Scrum (PT)

SemVer

Versionamento semântico: MAJOR.MINOR.PATCH. Mudar o primeiro número significa que algo deixou de ser compatível. semver.org (PT)

Shell

O cabeçalho, o menu, o rodapé e o botão de login comuns a todos os módulos (@fapesb/shell).

Slug

O trecho legível de uma URL gerado do título, como chamada-universal-2026.

SSR

Renderização no servidor: a página já chega pronta do servidor, o que ajuda velocidade e buscadores.

Trunk-based development

Forma de trabalhar com branches curtas que voltam rápido para a main, que fica sempre pronta para publicar. trunkbaseddevelopment.com

TypeScript

JavaScript com tipos. É a linguagem principal da plataforma. Handbook

Verdaccio

Registry npm privado onde ficam os pacotes @fapesb. Neutro: funciona com quem usa GitHub ou GitLab. verdaccio.org

Zod

Biblioteca TypeScript que valida dados e gera o tipo a partir da mesma definição. zod.dev

Nenhum termo encontrado.

12 · Para decidir

Decisões e pendências

Propostas para o comitê. Cada uma vira um ADR depois de aprovada.

Pendências que precisam de dono

Fontes

• Edital FAPESB nº 027/2025, Rodada 1: PDF oficial (78 p.) · página do edital. As citações "R1 p.N" abrem o PDF na página N.
• Edital FAPESB nº 017/2026, Rodada 2: PDF oficial (100 p.).
• Micro-frontends: Cam Jackson, martinfowler.com · Next Multi-Zones · React 19 · Angular Elements · Vue e Web Components.
• Documentos da MTM Tecnologia, versão 4 (05/11/2026): cadastro e autenticação; dados da prestação de contas; formulários dos editais.
• Diagramas feitos com Apache ECharts 6.1 (licença Apache 2.0), hospedado junto com o site.