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: