Práticas recomendadas best-practices
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).
-
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 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 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
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.
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 getting-ahead
Para entender mais sobre as outras duas funções e responsabilidades, consulte os recursos abaixo: