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

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now