Recomendações para o desenvolvimento de widgets

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

    • Ao desenvolver widgets personalizados, tenha essas recomendações em mente para obter desempenho ideal, desenvolvimento escalonável e uma boa experiência do usuário.

    Crie um estado padrão que forneça 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.

    Os 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. (Os 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 as vantagens da funcionalidade preexistente sem clonar ou duplicar o 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 reduzir o desempenho. Determine de quantos dados 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 carreguem lentamente.
    • Arquivos e anexos grandes, como arquivos de mídia de alta definição ou fontes da tabela Anexos [sys_attachment].
    • Widgets de atualização automática. Cada vez que o controlador do 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 registro não filtrados. A função recordWatch() procura 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 ao servidor. Especificar quando atualizar widgets em resposta a um produtor de registro notificando 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. Usar a 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 integrado é chamado do servidor, todos os scripts associados a esse widget são retornados. Se você precisar apenas de uma subseção de um widget, incorporar o 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. Componentes complexos com funcionalidade do lado do servidor e do lado do cliente são deixados 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 em angular.

    Use um serviço ou uma 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.
    • Compartilhe dados entre widgets.
    • Desenvolva widgets com melhor desempenho.

    Saiba mais: Reutilizar componentes com provedores em angular.

    Processar 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 os 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 de 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 seus usuários, siga estas diretrizes:

    • Considere o impacto do seu widget em um ambiente móvel. Por exemplo, evite usar eventos de passar o mouse e outros que não sejam traduzidos 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.
    • Encapsula cadeias de caracteres para tradução em APIs de localização. Consulte Internacionalizar um widget.
    Remover provedores em angular não utilizados do client script
    Para facilitar a manutenção, remova todos os Provedores em angular não utilizados que foram injetados na declaração de função do script do cliente.
    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.