--- title: Dicas e truques para criar portais no TOTVS Fluig source: https://tdn.totvs.com/display/fluig/Dicas+e+truques+para+criar+portais+no+TOTVS+Fluig path: \Plataforma Documentação técnica\Palestras - Universo TOTVS\Universo TOTVS 2024\Dicas e truques para criar portais no TOTVS Fluig.md --- Esta documentação foi elaborada com o objetivo de detalhar as melhores práticas, dicas e truques apresentados na sessão **“Aprimore seu código! Dicas e truques para criar portais no TOTVS Fluig”**, realizada durante o **Universo TOTVS 2025**. O material visa apoiar desenvolvedores na criação de portais modernos, seguros e alinhados com os padrões da plataforma TOTVS Fluig. Aqui você encontrará explicações aprofundadas sobre cada dica apresentada na palestra, exemplos práticos e orientações para aplicar esses conhecimentos no seu dia a dia. ### **Utilize sempre os componentes do Style Guide para o desenvolvimento de suas widgets** O Style Guide é o guia de estilos oficial do TOTVS Fluig, contendo mais de 70 componentes para uso, contando com uma documentação rica em exemplos práticos de implementação. Sua estrutura de grid system foi projetada para tornar o layout responsivo, garantindo a melhor visualização em diferentes dispositivos e resoluções. Além de acelerar e simplificar o desenvolvimento de recursos na plataforma, o Style Guide padroniza o layout das páginas e recursos desenvolvidos, facilitando o uso diário por diversas áreas da empresa. O Style-Guide é utilizado pelo time de desenvolvimento do TOTVS Fluig e desta forma, está sempre em constante atualização com novas funcionalidades e componentes. Veja um exemplo de componente contido na documentação Observação técnica: Sempre englobar sua implementação HTML em uma div principal com a classe fluig-style-guide ```
Uma mensagem para o usuário!
```
**aria-hidden (Conteúdo oculto)**
Especifica que um elemento é invisível para leitores de tela.
```
```
### **Sempre faça integrações com APIs de forma assíncrona**
Primeiramente, precisamos compreender a diferença entre uma requisição síncrona e assíncrona
**Síncrona:** Em uma chamada síncrona, o código é executado de maneira sequencial e linear. Isto significa que a execução da próxima linha de código só começa depois que a chamada atual é finalizada
**Assíncrona**: Em uma chamada assíncrona, o código não espera pela conclusão da chamada atual para continuar sua execução. O controle é imediatamente retornado ao thread principal, permitindo que outras operações continuem executando.
Requisições assíncronas geram benefícios tanto do lado técnico quanto ao lado da experiência do usuário.
Vamos conferir algumas vantagens em implementar chamadas assíncronas?
**Evitar Bloqueio da Interface do Usuário**
Se você fizer chamadas síncronas a uma API, o JavaScript bloqueará a execução até que a resposta da API seja recebida. Isso na prática impede o uso da aplicação, bloqueando qualquer interação, como cliques ou digitação, até que a chamada seja concluída.
**Melhor Desempenho e Experiência do Usuário**
Interações assíncronas permitem que o navegador continue a processar outras tarefas enquanto espera pela resposta da API. Isso resulta em uma experiência de usuário mais efetiva e interativa, sem travamentos ou qualquer impedimento no uso de outros recursos.
**Melhor Manipulação de Erros**
As operações assíncronas permitem um trabalho mais efetivo com possíveis erros. Promises e async/await fornecem maneiras claras e estruturadas para capturar e lidar com erros, como falhas de rede ou respostas inválidas, sem bloquear a execução do restante do código.
### **Priorize integrações com Datasets de forma assíncrona**
**O que é um dataset no TOTVS Fluig?**
A plataforma Fluig permite disponibilizar informações provindas de várias fontes de dados através de formas variadas de apresentação, dependendo da necessidade de cada cliente. Esse recurso é atendido pelo componente Dataset, que padroniza o acesso às informações, independente da origem dos dados.
Assim como nas chamadas para APIs, os datasets do TOTVS Fluig também devem ser consultados de forma assíncrona. Isto porque uma das responsabilidades de um dataset é retornar um conjunto de informações, que dependendo da quantidade de itens a serem retornados, pode gerar uma demora na finalização da consulta. Então porque não utilizar dos benefícios de uma chamada assíncrona quando o assunto é dataset?
Para conhecer mais sobre o desenvolvimento de datasets avançados no Fluig, consulte a documentação oficial: [Desenvolvimento de datasets avançados no TOTVS Fluig](https://tdn.totvs.com/pages/releaseview.action?pageId=412888219)
### **Faça chamadas simultâneas em paralelo para não prejudicar a performance**
O uso do **Promise.all** permite realizar chamadas simultâneas em paralelo, facilitando a performance no desenvolvimento web.
```
async callMultiple() {
const resultados = await Promise.all({
$.ajax({
url: '