Diretrizes gerais para o desenvolvimento de widgets

  • Versão de lançamento: Xanadu
  • Atualizado 1 de ago. de 2024
  • 5 min. de leitura

    • Ao desenvolver widgets personalizados, lembre-se dessas diretrizes gerais para obter o desempenho ideal, o desenvolvimento escalonável e uma boa experiência do usuário.

    Criar um estado padrão que fornece um exemplo para o usuário final

    Um widget não tem opções de instância definidas quando adicionado inicialmente a uma página. Um widget neste estado vazio pode aparecer em branco e causar confusão. Em situações em que um widget requer alguma configuração inicial, certifique-se de que o widget tenha um estado padrão que comunique ao administrador qual configuração é necessária.

    Widgets também podem ser criados com dados de demonstração. Os dados de demonstração também podem ser usados para:

    • Demonstrar claramente a funcionalidade do widget para o usuário.
    • Forneça dados ao visualizar o widget no editor de widget. (Dados de demonstração não estão visíveis no designer).

    Saiba mais: Tutorial: criar um widget personalizado.

    Incorporar um widget em vez de clonar quando possível

    Incorporar um widget existente em seu widget personalizado aproveita a funcionalidade pré-existente sem clonagem ou duplicação de código. Você ainda pode passar parâmetros para o widget incorporado para controlar seu comportamento.

    Saiba mais: Incorporar um widget existente

    Evite usar grandes conjuntos de dados para melhorar o desempenho

    Consultar dados, avaliar ACLs, executar regras de negócio e processar dados leva tempo e pode prejudicar o desempenho. Determine a quantidade de dados que os usuários do portal precisam e aplique os limites e filtros apropriados aos seus scripts e consultas. Isole os widgets que exigem dados ou processamento significativos em suas próprias páginas separadas no portal. Evite implementar os seguintes itens que usam grandes conjuntos de dados:

    • Itens de menu com script que carregam grandes quantidades de dados, o que pode fazer com que todas as páginas do portal sejam carregadas lentamente.
    • Arquivos e anexos grandes, como arquivos de mídia de alta definição ou fontes da tabela Anexos [sys_attachment].
    • Widgets com atualização automática. Cada vez que o controlador de cliente de um widget chama server.update(), spUtil.update(), server.refresh()ou spUtil.refresh(), a aplicação executa o script do servidor do widget e envia um objeto de dados de volta para o cliente.
    • Observadores de registros não filtrados. A função recordWatch() observa atualizações em uma tabela ou filtro e retorna o valor da função de retorno de chamada. Adicionar filtros para campos específicos a serem observados reduz o número de chamadas que um widget faz para o servidor. Especificar quando atualizar widgets em resposta a um produtor de registro que notifica o cliente de que há uma atualização na função de retorno de chamada também pode melhorar o desempenho.
    • Scripts do lado do servidor com consultas GlideRecord sem a função setLimit. O uso da função setLimit pode restringir o número de registros retornados e melhorar o tempo de resposta nas consultas. Para maior flexibilidade, você pode vincular este limite a uma opção de instância em vez de atribuir um valor codificado (por exemplo: gr.setLimit(options.limit || 100)).
    Saiba mais:
    Criar uma diretiva em vez de incorporar um widget complexo

    Quando um widget incorporado é chamado do servidor, todos os scripts associados a esse widget são retornados. Se você precisar apenas de uma subseção de um widget, a incorporação do widget inteiro criará uma sobrecarga desnecessária. Em vez disso, use diretivas para compartilhar código leve entre widgets. As diretivas são úteis, por exemplo, ao criar componentes de IU. É melhor deixar componentes complexos com funcionalidade do lado do servidor e do lado do cliente como widgets. Use uma diretiva em vez de um widget incorporado para:

    • Compartilhe o escopo ou o comportamento do escopo personalizado com vários widgets.
    • Compartilhe uma subseção leve e reutilizável de um widget.
    • Compartilhe um recurso de IU comum, como uma lista ou um avatar.
    • Aumentar o comportamento do widget.

    Saiba mais: Reutilizar componentes com provedores angulares.

    Use um serviço ou fábrica para compartilhar dados e manter o estado

    Os serviços de dados e as fábricas mantêm e persistem o estado em um widget sem exigir várias chamadas para o servidor, permitindo que você:

    • Mantenha os widgets sincronizados ao alterar registros ou filtros.
    • Compartilhar dados entre widgets.
    • Desenvolva widgets com melhor desempenho.

    Saiba mais: Reutilizar componentes com provedores angulares.

    Manipular eventos com um serviço de publicação/assinatura

    Evite usar $broadcast no DOM. $broadcast expede o nome do evento para todos os escopos secundários notificando os ouvintes registrados, o que pode ser uma chamada cara que requer o uso do objeto global $rootScope.

    Em vez disso, use um serviço de publicação/assinatura para lidar com eventos. Ao usar um serviço de publicação/assinatura, um relacionamento claro se forma entre seus widgets por meio de manipuladores de retorno de chamada. Neste modelo, você pode controlar melhor o estado dos eventos.

    Use chamadas REST ou server.get para buscar dados do servidor

    Quando você chama server.update(), o widget inteiro é retornado do servidor. Se o seu widget incluir caminhos de código divergentes, várias chamadas para atualizar o servidor poderão afetar o desempenho. Como regra, use o script do servidor para configurar o estado inicial do widget. Para atualizações subsequentes, use REST APIs com script que chamam inclusões de script em sua instância. Esta prática:

    • Separa a lógica de negócios dos elementos de IU.
    • Centraliza seu código, permitindo que as mudanças sejam feitas em um só lugar.
    Você também pode usar server.get para passar informações para o servidor. Use esta função junto com input.action para executar partes específicas do script do servidor.
    Desenvolva com localização, acessibilidade e IU em mente

    Para criar a melhor experiência para os usuários, siga estas diretrizes:

    • Considere o impacto do seu widget em um ambiente móvel. Por exemplo, evite usar o mouse sobre e outros eventos que não são convertidos para um dispositivo móvel.
    • Use variáveis SCSS para reutilizar itens. Consulte Variáveis de SCSS.
    • Use nomes de variáveis ao usar cores.
    • Encapsule cadeias de caracteres para tradução em APIs de localização. Consulte Internacionalizar um widget.
    Remover provedores angulares não utilizados do client script
    Para facilitar a manutenção, remova todos os provedores angulares não utilizados que foram injetados na declaração de função do client script.
    Evite usar <script> tags in HTML templates
    Para diminuir a probabilidade de problemas de produção em Portal de serviços, evite usar modelos em linha usando <script> tags in a widget's HTML template. Instead, create a related Angular ng-template record for the widget.