Bonnes pratiques

La création d’une application AEM Mobile On-demand Services diffère de la création d’une application qui s’exécute directement dans le shell Cordova (ou PhoneGap). Les développeurs doivent connaître :

• Modules externes pris en charge prêts à l’emploi et modules externes spécifiques à Adobe Experience Manager (AEM) Mobile .

• Les modèles qui utilisent la fonctionnalité de module externe doivent être écrits de telle sorte qu’ils puissent toujours être créés dans le navigateur, sans que le pont de module externe soit présent.

  • Par exemple, veillez à attendre que la variable deviceready avant d’accéder à l’API d’un module externe.

Conseils à l’intention des développeurs AEM

Les instructions suivantes aident les développeurs AEM compétents pour les sites qui souhaitent créer des modèles et des composants d’applications mobiles :

Structuration AEM modèles de sites pour encourager la réutilisation et l’extensibilité

• Préférer plusieurs fichiers de script de composant sur un seul fichier monolithique

  • Plusieurs points d’extension vides sont fournis, tels que customheaderlibs.html et customfooterlibs.html, qui permettent au développeur de modifier le modèle de page tout en dupliquant le moins de code principal possible.
  • Les modèles peuvent ensuite être étendus et personnalisés via les sling:resourceSuperType mécanisme

• Préférez Sightly/HTL par rapport à JSP comme langage de modèle.

  • L’utilisation de cette méthode encourage la séparation du code du balisage, offre une protection XSS intégrée et une syntaxe plus familière.

Optimisation des performances sur l’appareil

• Le script spécifique à l’article et les feuilles de style doivent être inclus dans la payload de l’article, à l’aide du modèle dps-article contentsync .
• Les feuilles de script et de style partagées par plusieurs articles doivent être incluses dans les ressources partagées au moyen du modèle contentsync dps-HTMLResources
• Ne référencez aucun script externe qui bloque le rendu

Préférer les bibliothèques JS et CSS côté client spécifiques à l’application par rapport aux bibliothèques spécifiques au web

• Pour éviter les frais généraux liés à des bibliothèques telles que jQuery Mobile afin de gérer un large éventail de périphériques et de navigateurs
• Lorsqu’un modèle s’exécute dans l’affichage Web d’une application, vous avez le contrôle des plateformes et versions que l’application va prendre en charge et vous savez que la prise en charge de JavaScript sera présente. Par exemple, préférez Ionic (seulement le CSS) à jQuery Mobile et l’interface utilisateur d’Onsen à Bootstrap.

Préférez les microbibliothèques à la pile complète

• Chaque bibliothèque dont dépendent vos articles ralentit le temps nécessaire pour que votre contenu s’affiche sur la vitre de l’appareil. Ce ralentissement est aggravé lorsqu’une nouvelle vue web est utilisée pour effectuer le rendu de chaque article. Chaque bibliothèque doit donc être réinitialisée de zéro.
• Si vos articles ne sont pas créés en tant que SPA (applications d’une seule page), il est probable que vous n’ayez pas besoin d’inclure une bibliothèque de pile complète comme Angular.
• Préférez des bibliothèques plus petites et à usage unique pour ajouter l’interactivité requise par votre page, telle que Fastclick ou Velocity.js

Minimisation de la taille de la payload d’article

• Utilisez les plus petites ressources possibles pouvant couvrir efficacement la plus grande fenêtre d’affichage que vous prenez en charge, à une résolution raisonnable.
• Utilisez un outil comme ImageOptim sur vos images afin de supprimer les métadonnées superflues

Prise en main

Pour en savoir plus sur les deux autres rôles et responsabilités, consultez les ressources ci-dessous :

• Administrateur
• Création