Integración AEM y StencilJS

¿Aún no sabes cómo sacarle el máximo partido a los Frameworks de Front más actuales y a las tremendas capacidades de Adobe Experience Manager (AEM) para la generación de Experiencias Digitales? Sigue atento a las recomendaciones de este blog, pues con una serie de pasos muy sencillos veremos cómo aunar lo mejor del mundo Front y del mundo AEM.

Dentro de la línea de conocimiento de DXP - Adobe (Digital Experience Platforms) hemos generado una arquitectura de desarrollo que, en los últimos años, nos ha servido para sacar el máximo partido a nuestros equipos de Front y de AEM a la hora de colaborar para crear Experiencias Digitales multicanal.

Gracias a esta arquitectura hemos conseguido integrar el Framework de Stencil.js dentro de un arquetipo de Adobe Experience Manager de cara a la generación de Custom Components, lo que nos ha permitido adaptarnos perfectamente a las necesidades de customización de nuestros clientes.

Así pues, hemos conseguido explotar las capacidades out-of-the-box (OOTB) de Adobe Experience Manager y le hemos sumado las grandes capacidades de un Framework como Stencil.js para la creación de Custom Components.

Integración Stencil.js y AEM

Uno de los objetivos fundamentales para la generación de Experiencias Digitales es la integración de un Design System. En este sentido, la arquitectura que planteamos para dicha integración es la siguiente:

Como podemos ver en la parte inferior derecha del diagrama, estamos embebiendo en cierto modo el desarrollo llevado a cabo por el equipo de Front en Adobe Experience Manager. De esta manera podemos trabajar con ambos equipos en paralelo focalizando las tareas de cada equipo a su área de especialización.

¿Cómo lo hacemos? Pues en realidad la respuesta es bastante simple, estamos cargando los ficheros generados por el build de Stencil como si fueran recursos estáticos que podemos invocar desde AEM.

A continuación podemos ver un ejemplo de invocación desde el fichero customheaderlibs.html del componente page de AEM (estamos cargando el JS y el CSS ‘maestro’ en el head de la página).

Estos ficheros generados en el build de Stencil pueden ser desplegados en un servidor independiente del de AEM (de esta manera independizamos el ciclo de desarrollo de los equipos Front y AEM, siempre y cuando exista versionado en los ficheros de Stencil), o bien, pueden incluirse en el despliegue del código de AEM si los cargamos por dentro de algún nodo público de AEM, como por ejemplo ‘/etc/clientlibs’ (recordad que la política para ese nodo es jcr:read para el grupo everyone, lo que implica que es accesible en modo lectura de manera pública).

Por lo tanto, desde el head de la página estamos cargando los ficheros ‘maestros’ de Stencil que se encargarán de ir inspeccionando el DOM y cargando el código asociado a cada componente de Stencil según se hayan ido incluyendo componentes en la página.

Cuando se necesite una cierta versión de Stencil podemos hacer uso del proyecto de Frontend que viene dentro del arquetipo de AEM (módulo ui.frontend). Aquí se puede indicar la versión de la librería de Stencil que queremos descargar del repositorio de artefactos (Nexus) y después podemos hacer el copiado de los ficheros hacia /etc/clientlibs dentro del módulo ui.content.

Si implementamos la otra opción, es decir, si tenemos independizados los despliegues de AEM y de Stencil, tendremos que apuntar a la versión de Stencil en base a la URL que carguemos en nuestro fichero customheaderlibs.html.

Integración del Design System - Storybook

Una vez establecida la integración de las librerías generadas por Stencil con AEM, el siguiente paso será integrar dentro de AEM los componentes de Stencil, es decir, tendremos que incluir dichos componentes dentro del módulo ui.apps del arquetipo de AEM y tendremos que hacer que estos componentes sean visibles para generar páginas en función de la política que establezcamos en nuestras templates (templates editables).

Dada la separación en equipos especializados para la parte Front y la parte AEM, un punto fundamental en el proceso de integración del Design System será la comunicación entre dichos equipos. Para ello hemos establecido como nexo o punto de unión Storybook.

Podemos profundizar más al respecto sobre Storybook gracias al post de nuestra comunidad ‘StoryBook: Stop reinventing the Wheel’, si bien, básicamente utilizamos Storybook como herramienta para documentar los componentes de Stencil, de tal manera que desde el equipo de AEM podamos ver los campos de entrada de cada componente y algunos ejemplos de uso.

Gracias a esta documentación, desde el equipo de AEM se genera el script de renderizado y el cuadro de diálogo de cada componente de Stencil en base a las entradas que dicho componente permite.

Finalmente, estos componentes quedarán disponibles en las páginas para que puedan ser utilizados por las personas que editan los contenidos fácilmente gracias al modo de empleo Drag&Drop de AEM que es tan característico e intuitivo.

Así pues, hemos establecido un flujo de trabajo con Storybook como nexo que nos permite integrar Web Components hechos con Stencil.js dentro de AEM (podría ser extensible a otras tecnologías para desarrollar Web Components). Esto nos ha permitido establecer varios casos de éxito en el desarrollo de Experiencias Digitales para nuestros clientes.

Arquitectura AEM - Front

En este punto recuperamos el diagrama inicial de arquitectura. La propuesta de valor para nuestros clientes se basa en aprovechar al máximo las capacidades de nuestros equipos y de las tecnologías que utilizamos.

Así pues, la filosofía consiste en aprovechar las capacidades de AEM como CMS híbrido de tal modo que podamos servir contenido de manera tradicional (HTML), así como contenido headless (JSON principalmente). Para ello nos apoyamos en las diferentes herramientas que AEM nos proporciona: Content Services, Assets HTTP API, GraphQL API, Content Fragments, SPA Editor, etc.

Desde el lado Front podemos implementar un Design System que nos permita satisfacer las necesidades desde el punto de vista de diseño y por el lado de AEM integramos todo esto en una Plataforma de Experiencia Digital puntera como AEM que facilita el trabajo de gestión y edición de contenidos a los equipos de marketing de nuestros clientes.

Así pues, AEM se utiliza para la generación y gestión de contenidos, mientras que la transaccionalidad se traslada a los frontales (Web, App, etc.) gracias al uso de APIs con los que los componentes de Front invocan a los microservicios para recuperar la información dinámica que sea necesaria. Por lo tanto, podemos decir que planteamos un modelo de arquitectura desacoplada basada en microservicios.

Conclusiones

  • Integramos Stencil.js con AEM invocando a las librerías ‘maestras’ de Stencil como recursos en el head de la página.
  • Con la integración entre Stencil y AEM podemos aunar las mejores capacidades de ambos mundos (Front y AEM).
  • El nexo de unión entre los equipos de Front y de AEM es Storybook.
  • Desde NTTDATA implantamos un modelo de arquitectura desacoplada basada en microservicios para generar Experiencias Digitales multicanal.
  • Utilizamos AEM como Hybrid CMS para aprovechar al máximo su potencial.

 

 

Tags

He leído y acepto la política de privacidad
Acepto recibir emails sobre actividades de recruiting NTT DATA