Pular para o conteúdo principal

Frontend

O frontend do Nerdify é construído com base no Angular e no Bootstrap, duas das tecnologias mais robustas e amplamente utilizadas no ecossistema web moderno.

🧱 Angular & Bootstrap​

  • Angular é um framework frontend desenvolvido pelo Google, focado em aplicações SPA (Single Page Application), com arquitetura baseada em componentes e reatividade.
  • Bootstrap é um framework CSS amplamente adotado para construir interfaces responsivas e modernas com rapidez, utilizando grid, flexbox, temas e componentes visuais.

A combinação Angular + Bootstrap permite ao Nerdify construir uma base altamente customizável.

🎨 Toda a paleta de cores, tamanhos de fonte, espaçamentos, bordas e tipografia podem ser ajustadas em um único arquivo SCSS de variáveis do Bootstrap. Alterando ali, todo o design do sistema é atualizado automaticamente.

🔗 Conexão com backend​

Toda a comunicação entre frontend e backend no Nerdify é feita através de chamadas RESTful. O frontend solicita páginas e componentes enviando requisições para a API do backend, que responde com JSON estruturado contendo componentes, recursos, traduções e metadados.

As rotas seguem o padrão do Angular, mas com um detalhe importante: as rotas do frontend são traduzidas para chamadas ao backend adicionando /api/v1/ como prefixo.

Por exemplo:

  • Frontend: /customers/new
  • Backend: /api/v1/customers/new

Isso permite versionar a API no futuro com facilidade e manter o frontend desacoplado da versão exata do backend.

🧩 Layout e estilização​

Existem quatro tipos de layout no Nerdify, definidos no frontend e renderizados com base na resposta do backend:

🧱 Default​

  • Ideal para páginas completas com navegação principal
  • Contém blocos top, left, body, right, bottom, além de header, footer e body
  • Estes blocos servem para no template configurado no backend possa ser definido onde devem ser carregados os componentes
  • Cada bloco desse dentro possui um container fixo para centralizar o conteúdo e gerenciar a responsividade.

🖥️ Fullscreen​

  • Ideal para páginas completas com navegação principal que devem ser carregadas ocupando toda a tela
  • Segue o mesmo padrão do layout Default, porém utiliza os containers fluídos.

🪟 Modal​

  • Ativado pelo uso de outlet (dialog:/*path) no roteamento

  • Abre sobre a tela atual, com backdrop, botão de fechar e transição suave

  • Usado para exibir fluxos rápidos sem sair da página principal

    Exemplo:

    • Rota: /customers(dialog:/customers/:id)
    • Resultado: renderiza /customers/:id em um modal que abrirá por cima da página /customers

🧷 Embed​

  • Carregado dentro de outro componente embedado, sem estrutura visual própria, sem headers e footer, apenas com body.

  • Útil para embedar componentes, por exemplo, tabelas ou listas internas dentro de outras páginas

    Exemplo:

    • Página: /customers/:id
    • Um dos componentes da página embeda /customers/:id/addresses via API para renderizar a tabela de endereços daquele cliente, como parte daquela página, consumindo a resposta embedada e exibindo os componentes retornados ali mesmo

Cada layout define diferentes regiões estruturais disponíveis e como os componentes serão renderizados visualmente.

🧱 Componentes e Template base​

Todos os componentes do Nerdify seguem um template base com blocos bem definidos:

  • top, bottom, left, right: regiões auxiliares
  • body: conteúdo principal
  • float-top-left, float-top-right, float-bottom-left, float-bottom-right: elementos flutuantes

📌 Veja o diagrama abaixo para entender visualmente a distribuição dos blocos:

Blocos de um componente

Cada componente pode conter filhos em qualquer uma dessas regiões. A renderização desses filhos segue as regras de layout definidas no componente pai e nos dados do backend.

O controle de dimensões dos componentes usa size com valores numéricos de 1 a 12, representando as colunas do grid do Bootstrap (como em col-6, col-12, etc).

Além disso, há parâmetros de alinhamento e direção baseados em flex, permitindo configurar o comportamento visual de agrupamentos, como alinhamento vertical/horizontal. Os nomes dos parâmetros usados são próprios do Nerdify e serão explicados nas seções específicas.

A renderização é dinâmica e baseada na resposta JSON enviada pelo backend, o que elimina a necessidade de escrever qualquer HTML, CSS ou TypeScript adicional no frontend. Em cenários de aplicações distribuídas como versões Android e iOS isso permite atualizar absolutamente tudo da aplicação, incluíndo estilos, páginas e funcionalidades sem necessidade de recompilação ou reenvio para lojas.

🕹️ Ações​

Os componentes podem conter ações interativas configuradas pelo backend:

  • click: dispara uma requisição ao backend ao clicar
  • submit: envio de formulário
  • drag and drop: organização de elementos

As ações aceitam métodos como:

  • get, post, put, delete, redirect, update

E podem resultar em comportamentos como:

  • update: atualiza a página com eventos que podem substituir os resources da página pelo da resposta, recarregar, entre outros.
  • redirect_to: redireciona para nova rota
  • toast: exibe notificação de sucesso ou erro

Essas interações são declaradas no backend dentro das definições dos componentes, fields ou modelos. O frontend interpreta e executa automaticamente, sem necessidade de codificação extra.

⚠️ Os detalhes de configuração dessas ações serão abordados nas seções específicas.

🧭 Controladores​

O Nerdify define 3 tipos de controladores para estruturar e responder corretamente cada tipo de interface:

  • ApplicationController: usado para páginas padrão que são carregadas sempre que uma rota é chamada no navegador
  • ModalController: usado para páginas abertas em outlets com (dialog:/*path) e carrega acima da página aberta no navegador
  • EmbedController: usado quando o conteúdo será embedado dentro de outro componente, renderizando rotas setadas em componentes que fazem parte da página.

Cada controlador ajusta a estrutura da resposta, para corresponder ao layout e à experiência esperada. Um ModalController ou EmbedControllersó são chamados a partir de um ApplicationController já renderizado.

O frontend do Nerdify é altamente modular, dinâmico e controlado totalmente pela estrutura do backend. Isso garante agilidade no desenvolvimento, consistência visual e uma arquitetura escalável e desacoplada.