10 conseils essentiels pour les débutants / Blogs / Perficient

Il y a trois ans, j’ai commencé mon parcours avec Adobe Experience Manager (AEM) et je me souviens encore à quel point j’ai été bouleversé lorsque j’ai commencé à l’utiliser. En tant que développeur front-end, ma première tâche dans AEM – mettre en œuvre une conception réactive – n’a pas été un jeu d’enfant et a nécessité une résolution approfondie de problèmes.

Dans ce blog, je partage les 10 trucs et astuces que j’ai appris pour aider à résoudre les problèmes rencontrés par les développeurs front-end. Que vous exploriez AEM pour la première fois ou que vous cherchiez à améliorer vos compétences, ces conseils vous permettront d’exceller dans votre rôle de développeur front-end dans l’écosystème AEM.

1. Familiarisez-vous avec l’architecture AEM

Mon premier conseil s’adresse à toiComprendre l’architecture d’AEM dès le début.

• Apprendre les concepts de base – Avant de plonger dans le code, familiarisez-vous avec les composants, les modèles, les bibliothèques clientes et le référentiel de contenu d’AEM. Découvrez comment chacun des composants interagit et s’intègre dans votre application.

• Sling et JCR (référentiel de contenu Java) – Acquérir une compréhension de base d’Apache Sling (le framework Web sur lequel AEM est construit) et de la façon dont JCR stocke le contenu. Ces connaissances fondamentales vous aideront à comprendre comment AEM traite les demandes et gère le contenu.

• Familiarisez-vous avec CRXDE Lite – CRXDE Lite est un outil de développement léger basé sur un navigateur, prêt à l’emploi avec Adobe Experience Manager. Grâce à CRXDE Lite, les développeurs peuvent accéder et modifier le référentiel dans vos environnements de développement locaux dans le navigateur. Vous pouvez modifier des fichiers, des dossiers, des nœuds et des propriétés. L’intégralité du référentiel vous est accessible dans cette interface facile à utiliser. Gardez à l’esprit que CRXDE vous offre la possibilité d’apporter des modifications instantanées au site Web. Vous pouvez même synchroniser ces modifications avec votre base de code à l’aide de plugins pour les éditeurs de code les plus utilisés tels que Visual Studio Code, Brackets et Eclipse.

• Paquet de contenu – Un développeur front-end AEM doit travailler sur des pages Web, mais nous n’avons pas besoin de les créer dès le début. Nous pouvons utiliser la version CRXDE Lite et télécharger du contenu pour le partager avec d’autres développeurs ou transférer le contenu de la production vers des environnements de développement locaux.

Les points ci-dessus constituent les éléments de base dont les développeurs FE doivent être conscients pour commencer. Pour plus de détails, lisez le Introduction à l’architecture AEM sur Adobe Experience League.

2. Concentrez-vous sur le langage de modèle HTML (HTL)

AEM utilise HTL, qui est plus simple et plus sécurisé que JSP. Commencez par apprendre comment fonctionne HTL, car c’est le principal moyen de gérer le balisage dans AEM. Il est similaire à d’autres langages de création de modèles, vous le trouverez donc probablement facile à comprendre.

3. Bibliothèques client principales (Clientlibs)

Gestion efficace des CSS/JS

AEM utilise des bibliothèques clientes (en abrégé clientlibs) pour gérer et optimiser les fichiers CSS et JavaScript. Il est donc important d’apprendre à organiser efficacement les fichiers CSS/JS en catégories et dépendances. Cela permet de charger uniquement le CSS/JS requis pour une page Web afin d’améliorer les performances de la page.

Réduire et regrouper

Utilisez la configuration OSGI prête à l’emploi d’Adobe Granite HTML Library Manager (com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl) pour réduire le CSS/JS qui créera une petite taille de fichier pour CSS/JS et augmentera le temps de chargement des pages.

Pour plus d’informations, consultez Ligue Adobe Experience.

4. Tirez parti de l’architecture basée sur les composants d’AEM

Créez des composants en gardant à l’esprit la réutilisabilité. AEM est fortement axé sur les composants, et vos composants seront utilisés sur différentes pages. Les garder modulaires permettra aux auteurs de les mélanger et de les assortir pour créer de nouvelles pages.

5. Utilisez les modèles modifiables d’AEM

Les modèles modifiables sont meilleurs que les modèles statiques. UNLes modèles modifiables d’EM permettent aux auteurs de contenu de contrôler la mise en page sans intervention du développeur. En tant que développeur front-end, les CSS/JS que nous construisons doivent être indépendants des modèles. Clientlib lié à un composant d’interface utilisateur devrait fonctionner sans aucun problème sur les pages basées sur un modèle.

6. Familiarisez-vous avec les outils de développement AEM

Il existe plusieurs outils de développement que vous pouvez trouver dans les éditeurs de texte les plus utilisés tels que Brackets, Visual Studio Code et Eclipse. Vous devez utiliser ces extensions pour accélérer votre processus de développement. Ces outils vous aident à synchroniser votre environnement local avec AEM, facilitant ainsi le test rapide des modifications.

Vérifier Ligue d’expérience pour plus d’informations.

7. Commencez par les composants de base

AEM est livré avec un ensemble de composants de base qui couvrent de nombreuses fonctionnalités de base telles que le texte, l’image et le carrousel. L’utilisation des composants principaux comme éléments de base (extension) pour créer des composants personnalisés permet de gagner du temps de développement et de suivre les meilleures pratiques. Pour plus de détails, consultez les liens suivants :

8. Comprendre l’expérience de création de contenu AEM

Travailler avec des auteurs de contenu

En tant que développeur front-end, il est important de collaborer étroitement avec les auteurs de contenu. Créez des composants et des modèles intuitifs à utiliser et offrant des options utiles aux auteurs. En faisant cela, vous comprendrez comment les auteurs utilisent vos composants et vous aiderez à les rendre plus « conviviaux » à chaque fois.

Création de tests

Testez fréquemment l’expérience de création pour vous assurer que les utilisateurs non techniques peuvent facilement créer du contenu. Plus vous rendez l’interface simple, moins d’intervention manuelle sera nécessaire ultérieurement.

9. Gardez l’accessibilité à l’esprit

L’accessibilité d’abord

Assurez-vous que vos composants sont accessibles. AEM est souvent utilisé par les grandes organisations, où l’accessibilité est essentielle. Mettez en œuvre les meilleures pratiques telles que les rôles ARIA appropriés, le HTML sémantique et la prise en charge de la navigation au clavier. J’ai passé du temps sur différents projets améliorant les attributs d’accessibilité. Alors, gardez cela à l’esprit.

Fonctionnalités d’accessibilité d’AEM

Tirez parti des outils intégrés d’AEM pour les tests d’accessibilité et assurez-vous que tous vos composants répondent aux normes requises (par exemple, WCAG 2.1). Pour plus d’informations, vous pouvez lire le Article de l’Experience League sur l’accessibilité.

10. Tirez parti des capacités sans tête d’AEM

CMS sans tête avec AEM

Découvrez comment utiliser AEM comme CMS sans tête et intégrez-le à votre front-end à l’aide d’API. Cette approche est particulièrement utile si vous travaillez avec des frameworks front-end modernes comme Réagir, Angulaireou Vue.js.

GraphQL dans AEM

AEM offre la prise en charge de GraphQL, vous permettant de récupérer uniquement les données dont votre front-end a besoin. Commencez à expérimenter les fonctionnalités sans tête d’AEM pour créer des SPA ou les intégrer à d’autres systèmes.

Éditeur de SPA

Le Éditeur AEM SPA est un outil spécialisé d’Adobe Experience Manager conçu pour intégrer des applications à page unique (SPA) dans l’environnement de création AEM. Il permet aux développeurs de créer des SPA à l’aide de frameworks modernes tels que Réagir et Angulaire prêt à l’emploi tout en permettant aux auteurs de contenu de modifier et de gérer le contenu dans AEM, comme ils le feraient avec des modèles traditionnels. Vous souvenez-vous quand j’ai mentionné les outils de développement pour les IDE ? Eh bien, il y en a un pour mapper votre application de spa afin qu’elle fonctionne avec l’écosystème AEM.

Plus d’informations pour les développeurs front-end AEM

Dans ce blog, nous avons abordé l’architecture AEM, HTL, Clientlibs, les modèles, les outils, les composants, la création, l’accessibilité et le CMS sans tête en tant que domaines d’intervention pour vous aider à grandir et à exceller en tant que développeur AEM.

Si vous avez des questions, n’hésitez pas à laisser les commentaires ci-dessous. Et si vous avez des astuces qui ne sont pas mentionnées dans ce blog, n’hésitez pas à les partager également !

Et assurez-vousc’est ça suivez notre blog Adobe pour plus d’informations sur la plateforme Adobe !