Bonnes pratiques

REMARQUE

Adobe recommande d’utiliser l’éditeur d’application d’une seule page (SPA) pour les projets nécessitant un rendu côté client basé sur la structure SPA (par exemple, React). En savoir plus.

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 les points suivants :

  • Plug-ins pris en charge en standard, ainsi que les plug-ins spécifiques à AEM Mobile.
REMARQUE

Pour en savoir plus sur les modules externes, consultez les ressources suivantes :

  • Les modèles qui utilisent la fonctionnalité de module externe doivent être écrits de manière à ce qu’ils soient toujours autorisés dans le navigateur, sans que le pont de module externe soit présent.

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

Directives à l'intention des développeurs d'AEM

Les recommandations suivantes s’adressent aux développeurs chevronnés AEM sites qui souhaitent créer des modèles et des composants d’applications mobiles :

Structurer les modèles de sites AEM pour encourager la réutilisation et l'extensibilité

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

    • Un certain nombre de 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 de base possible.
    • Les modèles peuvent ensuite être étendus et personnalisés via le mécanisme sling:resourceSuperType de Sling
  • Préférer Sightly/HTL sur JSP en tant que langage de modèle

    • Cette méthode permet de séparer le code des balises, d’obtenir des offres intégrées à la protection XSS et d’utiliser une syntaxe plus familière.

Optimiser les performances sur périphérique

  • Le script spécifique à l’article et les feuilles de style doivent être inclus dans la charge utile 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, via le modèle contentsync dps-HTMLResources
  • Ne référencez aucun script externe qui bloque le rendu.
REMARQUE

Vous pouvez en savoir plus sur les scripts externes de blocage du rendu ici.

Préférer les bibliothèques JS et CSS côté client spécifiques à l’application plutôt que celles spécifiques au Web

  • Pour éviter les frais généraux dans les bibliothèques telles que jQuery Mobile afin de gérer une vaste gamme de périphériques et de navigateurs
  • Lorsqu’un modèle s’exécute dans la vue Web d’une application, vous avez le contrôle sur les plateformes et versions que l’application va prendre en charge, ainsi que sur la connaissance de la présence de la prise en charge de JavaScript. Par exemple, préférez Ionic (peut-être simplement CSS) à jQuery Mobile et l’interface utilisateur d’Onsen à Bootstrap.
REMARQUE

Pour en savoir plus sur jQuery mobile, cliquez ici.

Préférer les micro-bibliothèques à la pile complète

  • Le temps nécessaire pour que votre contenu soit visible sur le périphérique sera ralenti par chaque bibliothèque dont dépendent vos articles. Ce ralentissement est aggravé lorsqu’une nouvelle vue Web est utilisée pour générer chaque article. Par conséquent, chaque bibliothèque doit être à nouveau initialisée à partir de zéro.
  • Si vos articles ne sont pas créés en tant qu’SPA (applications d’une seule page), il n’est probablement pas nécessaire d’inclure une bibliothèque de piles complète, telle que Angular.
  • Préférez des bibliothèques à fonction unique plus petites pour vous aider à ajouter l’interactivité dont votre page a besoin, telle que Fastclick ou Velocity.js

Réduire la taille de la charge utile d’article

  • Utilisez les ressources les plus réduites possible qui peuvent efficacement couvrir la plus grande fenêtre d’affichage que vous allez prendre en charge, à une résolution raisonnable
  • Utilisez un outil tel que ImageOptim sur vos images pour supprimer les métadonnées en excès.

Aller de l'avant

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

Sur cette page