Six bonnes pratiques pour les projets de site Web avec Adobe Experience Manager

Mais comme c’est le cas de tout produit aussi complet, il peut facilement mener à de mauvaises décisions. AEM est un produit très souple qui autorise toutes sortes de personnalisations. Autrement dit, toute exigence peut donner lieu à différents types de mise en œuvre, d’une solution entièrement personnalisée à une solution étroitement conditionnée par les principes essentiels du produit.

Nous avons une vaste expérience de la mise en œuvre d’AEM et de systèmes de gestion de contenu Web d’entreprise en général; nous connaissons donc les pièges que représente le choix d’une solution. Outre l’architecture de la solution et son degré de technicité, il faut également réfléchir à la rentabilité de votre système, aux possibilités de maintenance et à son évolutivité.

Dans cet article, nous évoquons quelques-uns des principaux paramètres à ne pas oublier dans la mise en œuvre d’AEM.

N° 1 : la conception technique et l’architecture

En ce qui concerne la conception et l’architecture de votre site Web, la première chose à faire est d’évaluer soigneusement chaque exigence et de s’aligner le plus tôt possible sur les fonctions que l’on trouve sur le marché. Vous pouvez utiliser des prototypes pour présenter des solutions de rechange à vos utilisateurs fonctionnels et leur montrer certaines fonctions prêtes à l’emploi. Le plus souvent, on peut gagner en efficacité en adaptant légèrement les exigences initiales.

Quelques exemples :

• Exploitation du cadre Context-Aware Configuration pour donner à certaines parties de votre site Web une allure et un comportement différents;
• Génération de listes de documents provenant de systèmes extérieurs grâce au cadre Sling Dynamic Include pour permettre la mise en cache des pages qui les contiennent;
• Utilisation du Sling Resource Merger pour éviter la duplication d’éléments prêts à l’emploi;
• Suppression des CSS dynamiques et recours à des fonctions d’AEM dans ce but;
• Mise en œuvre de certaines exigences en dehors d’AEM, par exemple en les intégrant à des (micro)services externes, ce qui est capital pour éviter l’utilisation abusive d’AEM en tant que système de gestion de contenu Web;
• Rendre possible la mise en cache de 95 % des requêtes pour une performance de haut niveau.

N° 2 : les composants de base

Il y a quelques années, Adobe a lancé une initiative intitulée WCM Core Components. L’idée était de se détacher des anciens « composants fondateurs » devenus obsolètes et de proposer à la place une bibliothèque bien fournie de composants sur lesquels baser chaque projet.

Cette bibliothèque de composants de base fournit aux concepteurs un ensemble de blocs de construction de qualité pour créer des pages Web sophistiquées. Nous avons développé notre propre ensemble de blocs sur les mêmes principes, en les adaptant à chaque projet. Par conséquent, nous participons aussi à l’amélioration des composants de base au fil du temps.

Le fait d’utiliser ces composants en exploitant l’idée qu’ils renferment nous permet de créer des bases de code extrêmement souples et de faire évoluer ces composants les uns après les autres sans bloquer leur rétrocompatibilité.

N° 3 : les modèles adaptables

Auparavant, c’était au développeur de créer des modèles de page pour les utilisateurs de l’entreprise. Avant qu’un modèle puisse être utilisé par un créateur de contenu, le développeur devait l’implémenter et le déployer dans AEM. Cela rallongeait souvent le délai de commercialisation.

Depuis quelques années, la fonction « Editable Templates » (modèles adaptables) d’AEM permet toutefois de faire moins appel à l’équipe informatique pendant la création des pages. Cette fonction permet aux créateurs de contenu d’assembler eux-mêmes leurs modèles à l’aide de l’interface utilisateur AEM Touch.

N° 4 : la grille réactive et le système de style

Les grilles réactives (Responsive Grids) permettent aux utilisateurs de créer des mises en page et de définir le comportement des composants avec une grande souplesse. Combinées au Style System d’AEM, elles permettent d’appliquer des styles prédéfinis sans sacrifier la cohérence entre les pages.

Dans le traditionnel flux de travaux destiné à rendre le contenu dynamique, il fallait qu’un concepteur crée une maquette pour les divers points d’arrêt, que le développeur les implémente pour un modèle donné, et que l’auteur choisisse ce modèle et le remplisse de contenu. Avec la fonction Responsives Grids, ce flux de travaux a été grandement simplifié : l’auteur saisit le contenu et peut adapter la mise en page en toute autonomie, sans avoir besoin d’en référer au développeur pour la réactivité ou d’attendre de nouveaux déploiements. Cette fonction, apparue dans la version 6.3 d’AEM, donne aux professionnels une grande souplesse tout en évitant ce travail aux développeurs. Enfin, la modification d’un modèle ne nécessite aucun travail de développement (et de déploiement).

Cependant, cette souplesse a un prix : les professionnels doivent maintenant gérer les paramètres de mise en page des composants, et cela peut prendre beaucoup de temps. Il est souvent préférable de trouver un juste milieu, où certains paramètres de mise en page sont fixes et où d’autres restent adaptables. Nous pouvons vous aider à trouver le bon équilibre.

N° 5 : les bonnes pratiques du développement Web

Les projets AEM nous donnent par ailleurs l’occasion d’instaurer de bonnes pratiques de développement en général ainsi que certains standards AEM techniques. Pour en résumer quelques-uns :

• Respecter la règle : « Qui brise une version exécutable la répare »;
• Effectuer des tests d’unité et d’intégration pour chaque nouvelle fonction;
• Envoyer les demandes de fusion lorsqu’une fonction est achevée;
• Demander à un responsable technique d’effectuer un contrôle;
• Utiliser Sling Models pour le développement des composants, même si ceux-ci sont très simples;
• Utiliser le Proxy Component Pattern;
• Maintenir à jour la documentation utilisateur et technique;
• Tester le code dans AEM ainsi que via le répartiteur;
• Désactiver la duplication de code, configurer les règles SonarQube, faire en sorte que chaque version exécutable déclenche un scan SonarQube, etc.

N° 6 : automatisation complète

Pour améliorer notre travail, nous essayons d’automatiser au maximum. Pour les installations d’AEM 6.5 sur site, nous utilisons l’infrastructure en tant que code pour automatiser la configuration des serveurs et nos environnements locaux. Cela signifie que n’importe quel développeur peut devenir opérationnel en quelques minutes et travailler sur un environnement local aussi proche que possible de la production. Cette configuration comprend même une instance locale de répartiteur afin de repérer immédiatement les pièges de la mise en cache.

Pour les installations d’AEM en tant que service dans le nuage, nous avons été beaucoup aidés par Adobe’s Cloud Manager, qui automatise entièrement, met à niveau et assure les correctifs de sécurité et les mises à jour avec des points de contrôle qualité prédéfinis et personnalisés.

Chaque fois qu’une modification de code est intégrée au contrôle de version, une version exécutable est exécutée et les développeurs sont instantanément avertis si quelque chose tourne mal. Selon le secteur concerné, la version exécutable est déployée dans l’environnement de destination afin que les changements apparaissent immédiatement dans le bon système.

Le respect de ces principes nous donne la souplesse d’effectuer des mises à jour entièrement automatisées. Le déploiement en environnement de production se fait en un seul clic.

Conclusion

Il est impératif de connaître les bonnes pratiques applicables au développement de sites Web dans le système de gestion de contenu Web que vous utilisez. Mais surtout, il faut avoir à ses côtés un partenaire qui connaît ces pratiques et les fait respecter par l’équipe de projet pour que votre projet d’expérience numérique réussisse. Ces directives sont précieuses non seulement pour la mise en place de nouveaux sites Web, mais aussi lors de la planification des mises à niveau ou d’un élargissement de la plateforme Adobe existante.