Front-end do neo: assets, rotas e componentes

Este capítulo aprofunda a visão de front-end do NEO além do formulário padrão, cobrindo assets, pages, rotas, listas, dialogs e website.

Superfícies de front-end

Superfície	Finalidade
Desk	Operação administrativa
Pages	Telas customizadas orientadas a tarefa
Website / Portal	Experiências públicas ou autenticadas
Assets compartilhados	JS, CSS e utilitários do app

Estratégia de assets

Uma organização prática para public/:

public/
├── js/
│   ├── forms/
│   ├── lists/
│   ├── pages/
│   ├── portal/
│   └── shared/
├── css/
│   ├── app/
│   ├── pages/
│   └── website/
└── images/

Inclusão de assets

Os mecanismos mais comuns são:

• app_include_js / app_include_css;

• doctype_js;

• doctype_list_js;

• page_js;

• templates do website.

A regra geral é simples: quanto menor o escopo do asset, melhor.

Pages no Desk

Pages são ideais para:

• dashboard operacional;

• central de atendimento;

• monitor de integrações;

• wizard;

• fluxo em lote.

Roteamento no Desk

O Desk trabalha com rotas internas para navegar entre formulários, listas, reports e pages. Ao desenhar UX, pense em rota como parte do processo.

Dialog API

Diálogos ajudam a:

• confirmar operações;

• coletar parâmetros;

• reduzir troca de tela;

• disparar jobs.

Listas como ferramenta de operação

Uma boa lista pode:

• destacar prioridades;

• oferecer filtros úteis;

• permitir ações em massa;

• reduzir abertura de documentos.

Integração cliente-servidor

neo.call é a ponte mais comum entre UI e backend.

Boas práticas:

• métodos pequenos e claros;

• payload enxuto;

• tratamento de erro;

• feedback de loading;

• refresh só quando necessário.

Estado e atualização da UI

A tela pode depender de:

• documento carregado;

• filtros da rota;

• dados de RPC;

• contexto do usuário;

• eventos realtime.

Website e portal

O front-end do NEO não termina no Desk. Portal e website são parte da estratégia de interface da plataforma e reaproveitam metadados, serviços e APIs do backend.

Segurança no front-end

• não confiar apenas na UI para autorização;

• não expor segredos em JS;

• sanitizar HTML;

• controlar uploads;

• revisar métodos whitelisted consumidos pelo cliente.