Dans cette suite facultative de la AEM Parcours de développement sans affichage, vous découvrez comment Adobe Experience Manager (AEM) peut combiner une diffusion sans interface avec des fonctionnalités CMS en pile complète traditionnelles et comment créer des SPA modifiables à l’aide de la structure d’éditeur d’ et intégrer des externes, en activant les fonctionnalités d’édition selon les besoins.
À ce stade, vous devriez avoir terminé l’ensemble du Parcours de développement découplé AEM et comprendre les principes de base de la diffusion découplée dans AEM, ainsi que les éléments suivants :
Vous avez donc soit mis en ligne avec votre premier projet AEM sans tête, soit vous avez les connaissances pour le faire. Félicitations !
Alors pourquoi lire cette section supplémentaire et facultative du parcours ? Vous vous souvenez sans doute que dans la Prise en mainEn outre, il y a eu une brève discussion sur la façon dont AEM non seulement prend en charge la livraison sans interface et les modèles traditionnels de pile complète, mais peut également prendre en charge les modèles hybrides qui combinent les avantages des deux. Bien qu’il ne s’agisse pas de modèles découplés classiques, de tels modèles hybrides peuvent offrir une flexibilité sans précédent à certains projets.
Cet article s’appuie sur vos connaissances d’AEM sans affichage en explorant en profondeur la manière dont vous pouvez créer vos propres applications d’une seule page (SPA) modifiables dans l’Adobe Experience Platform. Ainsi, vous pouvez créer du contenu et le diffuser intégralement vers un SPA, mais ce SPA reste modifiable dans l’.
Ce document vous aide à comprendre comment les applications d’une seule page sont développées à l’aide du cadre de l’éditeur de SPA AEM. Après avoir lu ce document, vous devriez :
Avant de commencer à travailler avec SPA dans AEM, plusieurs conditions sont requises.
Une application d’une seule page (SPA) diffère d’une page conventionnelle en ce qu’elle est rendue côté client et qu’elle est principalement pilotée par JavaScript, en utilisant les appels Ajax pour charger les données et mettre à jour dynamiquement la page. La plupart ou la totalité du contenu est récupérée une fois au chargement d’une seule page avec des ressources supplémentaires chargées de manière asynchrone, selon les besoins, en fonction de l’interaction de l’utilisateur avec la page.
Cela limite la nécessité d’actualiser la page et offre à l’utilisateur une expérience harmonieuse, rapide et rappelant davantage l’expérience d’une application native.
L’éditeur de SPA AEM permet aux développeurs front-end de créer des SPA qui peuvent être intégrées à un site AEM, ce qui permet aux créateurs de contenu de modifier le contenu SPA aussi facilement qu’un autre contenu AEM.
En étant plus rapide, fluide et ressemblant davantage à une application native, une SPA devient une expérience attrayante non seulement pour le visiteur de la page web, mais aussi pour les marketeurs et les développeurs en raison de la nature du fonctionnement de SPA.
Pour obtenir une description complète des SPA et des raisons de leur utilisation, reportez-vous à la section Ressources supplémentaires pour obtenir des liens vers une documentation plus détaillée.
Le développement d’applications sur une seule page sur AEM suppose que le développeur front-end respecte les bonnes pratiques standard lors de la création d’une SPA. En tant que développeur front-end, si vous suivez ces bonnes pratiques générales et quelques principes spécifiques à AEM, votre SPA sera fonctionnel avec l’AEM et ses fonctionnalités de création de contenu.
Pour une description complète de la façon dont AEM gère les SPA, consultez la section Ressources supplémentaires pour obtenir des liens vers une documentation plus détaillée.
Les sites créés à l’aide de frameworks SPA courantes, telles que React et AngularJS, chargent leur contenu via le format JSON dynamique et ne fournissent pas le framework HTML dont l’éditeur de page AEM a besoin pour passer des commandes de modification.
Pour activer la modification d’applications sur une seule page dans AEM, il faut qu’il y ait une correspondance entre la sortie JSON de l’application et le modèle de contenu dans le répertoire AEM afin d’enregistrer les modifications apportées au contenu.
La prise en charge des applications sur une seule page dans AEM s’accompagne d’une fine couche JS qui interagit avec le code JS de l’application lorsqu’elle est chargée dans l’éditeur de pages avec lequel des événements peuvent être envoyés. L’emplacement des commandes d’édition peut être activé pour permettre une modification en contexte. Cette fonctionnalité repose sur le concept de point de terminaison de l’API Content Services, car le contenu de la SPA doit être chargé au moyen de Content Services.
Pour une description complète de la façon dont AEM gère l’éditeur de SPA, consultez la section Ressources supplémentaires pour obtenir des liens vers une documentation plus détaillée.
Si vous disposez d’un SPA existant, AEM prend en charge son intégration dans afin qu’il soit visible par les auteurs de contenu dans l’éditeur d’. Cela peut s’avérer utile pour afficher le contenu qu’ils créent via des fragments de contenu dans le contexte de l’application finale où il sera utilisé.
En outre, avec seulement de petites modifications, vous pouvez activer certaines fonctionnalités d’édition pour les SPA externes dans l’éditeur AEM.
Le composant RemotePage permet le rendu d’une SPA externe dans AEM.
Pour une description complète de la manière de rendre les SPA externes modifiables dans AEM, consultez la section Ressources supplémentaires pour obtenir des liens vers une documentation plus détaillée.
Pour commencer à développer votre propre SPA pour AEM, consultez les documents suivants :
Si vous devez adapter un SPA existant pour l’utiliser dans AEM, consultez les documents suivants :
Consultez ci-dessous les ressources supplémentaires qui peuvent vous aider à approfondir les sujets relatifs aux SPA dans AEM.
Vous trouverez ci-dessous quelques ressources supplémentaires qui approfondissent certains concepts mentionnés dans ce document.