Práticas recomendadas

Última atualização em 2023-09-19
  • Tópicos
  • Mobile
    Exibir mais informações sobre este tópico
  • Criado para:
  • User
OBSERVAÇÃO

A Adobe recomenda o uso do Editor SPA para projetos que exigem renderização no lado do cliente baseada em estrutura de aplicativo de página única (por exemplo, React). Saiba mais.

Criar um aplicativo AEM Mobile On-demand Services é diferente de criar um aplicativo que é executado diretamente no shell Cordova (ou PhoneGap). Os desenvolvedores devem estar familiarizados com:

  • Plug-ins prontos para uso e plug-ins específicos para dispositivos móveis do Adobe Experience Manager (AEM).
OBSERVAÇÃO
  • Os modelos que usam a funcionalidade de plug-in devem ser escritos de forma que ainda sejam autoráveis no navegador, sem que a ponte do plug-in esteja presente.

    • Por exemplo, aguarde o device ready antes de tentar acessar a API de um plugin.

Diretrizes para desenvolvedores do AEM

As seguintes diretrizes ajudam os desenvolvedores de AEM competentes para sites que desejam criar modelos e componentes de aplicativos móveis:

Estruturar modelos de sites AEM para incentivar a reutilização e a extensibilidade

  • Preferir vários arquivos de script de componente em vez de um único arquivo monolítico

    • Vários pontos de extensão vazios são fornecidos, como customheaderlibs.html e customfooterlibs.html, que permitem que o desenvolvedor altere o modelo da página enquanto duplica o mínimo possível de código principal
    • Os modelos podem ser estendidos e personalizados por meio do sling:resourceSuperType mecanismo
  • Prefira Sightly/HTL a JSP como a linguagem de modelo

    • O uso dessa opção incentiva a separação do código da marcação, oferece proteção XSS integrada e tem uma sintaxe mais familiar

Otimizar para desempenho no dispositivo

  • As folhas de estilos e scripts específicos do artigo devem ser incluídas na carga do artigo, usando o template dps-article contentsync
  • As folhas de scripts e estilos compartilhadas por mais de um artigo devem ser incluídas em recursos compartilhados, por meio do modelo dps-HTMLResources contentsync
  • Não fazer referência a nenhum script externo que esteja bloqueando a renderização
OBSERVAÇÃO

Você pode saber mais detalhes sobre os scripts externos de bloqueio de renderização aqui.

Prefira JS do lado do cliente específico do aplicativo e bibliotecas CSS específicas da Web

  • Para evitar sobrecarga em bibliotecas como jQuery Mobile para lidar com uma grande variedade de dispositivos e navegadores
  • Quando um modelo está em execução na visualização da Web de um aplicativo, você tem controle sobre as plataformas e versões compatíveis com o aplicativo e sabe que o suporte ao JavaScript estará presente. Por exemplo, prefira o Ionic (apenas o CSS) ao jQuery Mobile e à interface do usuário do Onsen ao Bootstrap.
OBSERVAÇÃO

Para saber mais detalhes sobre o jQuery mobile, clique em aqui.

Preferir bibliotecas micro em vez de pilha completa

  • O tempo que leva para colocar seu conteúdo no vidro do dispositivo é reduzido por cada biblioteca da qual seus artigos dependem. Esse atraso é agravado quando uma nova visualização da Web é usada para renderizar cada artigo, de modo que cada biblioteca deve ser inicializada novamente do zero
  • Se seus artigos não forem criados como SPA (aplicativos de página única), você provavelmente não precisará incluir uma biblioteca de pilha completa, como o Angular
  • Prefira bibliotecas menores de uso único que ajudem a adicionar a interatividade exigida pela sua página, como Fastclick ou Velocity.js

Minimizar o tamanho da carga do artigo

  • Use os menores ativos possíveis que possam cobrir efetivamente o maior visor que você estiver apoiando, com uma resolução razoável
  • Use uma ferramenta como ImageOptim em suas imagens para que você possa remover qualquer excesso de metadados

Avançando

Para entender mais sobre as outras duas funções e responsabilidades, consulte os recursos abaixo:

Nesta página