Práticas recomendadas

OBSERVAÇÃO

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

A criação de um aplicativo AEM Mobile On-demand Services é diferente da criação de um aplicativo que é executado diretamente no shell do Cordova (ou PhoneGap). Os desenvolvedores devem estar familiarizados com:

  • Plug-ins compatíveis prontos para uso, bem como plug-ins específicos do AEM Mobile.
OBSERVAÇÃO

Para saber mais sobre plug-ins, consulte os seguintes recursos:

  • Os modelos que usam a funcionalidade de plug-in devem ser gravados de forma que ainda sejam autoráveis no navegador, sem a presença da ponte de plug-in.

    • Por exemplo, aguarde a função deviceready antes de tentar acessar a API de um plug-in.

Diretrizes para AEM desenvolvedores

As diretrizes a seguir ajudarão desenvolvedores AEM experientes para sites, que desejam criar modelos e componentes de aplicativos móveis:

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

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

    • São fornecidos vários pontos de extensão vazios, como customheaderlibs.html e customfooterlibs.html, que permitem que o desenvolvedor altere o modelo de página ao duplicar o menor código principal possível
    • Os modelos podem ser estendidos e personalizados por meio do mecanismo sling:resourceSuperType do Sling
  • Preferir Sightly/HTL sobre JSP como a linguagem de modelo

    • Usar isso incentiva a separação do código da marcação, as ofertas incorporadas à proteção XSS e têm uma sintaxe mais familiar

Otimizar para o desempenho no dispositivo

  • O script específico do artigo e as folhas de estilo devem ser incluídos na carga do artigo, usando o modelo sincronia de conteúdo dps-article
  • O script e as folhas de estilo compartilhadas por mais de um artigo devem ser incluídos nos recursos compartilhados, por meio do modelo de sincronia de conteúdo dps-HTMLResources
  • Não faça referência a nenhum script externo que esteja bloqueando renderização
OBSERVAÇÃO

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

Preferir bibliotecas JS e CSS do cliente específicas do aplicativo em relação a bibliotecas específicas da Web

  • Para evitar sobrecarga em bibliotecas como o jQuery Mobile para lidar com uma grande variedade de dispositivos e navegadores
  • Quando um modelo é executado na visualização da Web de um aplicativo, você tem controle sobre as plataformas e versões que o aplicativo vai suportar, bem como sobre o conhecimento de que o suporte a JavaScript estará presente. Por exemplo, preferir Ionic (talvez apenas o CSS) em vez do jQuery Mobile e da interface do usuário Onsen em vez do Bootstrap.
OBSERVAÇÃO

Para saber mais sobre o jQuery Mobile, clique aqui.

Preferir microbibliotecas em relação à pilha completa

  • O tempo necessário para colocar o conteúdo no vidro do dispositivo será reduzido em cada biblioteca de que seus artigos dependem. Essa desaceleração é agravada quando uma nova visualização da Web é usada para renderizar cada artigo, portanto, cada biblioteca deve ser inicializada novamente do zero
  • Se os artigos não forem criados como SPA (aplicativos de página única), provavelmente não será necessário incluir uma biblioteca de pilha completa, como o Angular
  • Preferir bibliotecas menores e de uso único para ajudar a adicionar a interatividade que sua página exige, 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ê estará suportando, em uma resolução razoável
  • Use uma ferramenta como ImageOptim em suas imagens para remover qualquer excesso de metadados

Aproximando-se

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

Nesta página