Práticas recomendadas best-practices

NOTE
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).
NOTE
Para saber mais detalhes sobre plug-ins, consulte os seguintes recursos:
  • 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 a função deviceready antes de tentar acessar a API de um plug-in.

Diretrizes para desenvolvedores do AEM guidelines-for-aem-developers

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 pelo mecanismo sling:resourceSuperType do Sling
  • 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
NOTE
Você pode saber mais detalhes sobre os scripts externos de bloqueio de renderização aqui.

Prefira JS e bibliotecas CSS específicas do cliente para o aplicativo a bibliotecas 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 do JavaScript estará presente. Por exemplo, prefira o Ionic (apenas o CSS) ao jQuery Mobile e à interface do usuário do Onsen ao Bootstrap.
NOTE
Para saber mais detalhes sobre o jQuery mobile, clique aqui.

Preferir bibliotecas micro sobre 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 o Fastclick ou o Velocity.js

Minimizar 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 o ImageOptim nas imagens para remover qualquer excesso de metadados

Avançando getting-ahead

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

recommendation-more-help
2eeeb575-8007-40cc-a72d-206fbc4ddd4b