Desarrollo front-end con el tipo de archivo del proyecto de AEM

Última actualización: 13 de julio de 2024

Creado para:

  • Desarrollador
  • Administrador

El tipo de archivo del proyecto de AEM incluye un mecanismo de versión del front-end opcional basado en Webpack. Por lo tanto, el módulo ui.frontend se convierte en la ubicación central de todos los recursos front-end del proyecto, incluidos los archivos JavaScript y CSS. Para aprovechar plenamente esta función tan útil y flexible, es importante comprender cómo encaja el desarrollo front-end en un proyecto de AEM.

Este documento se centra en los patrones de uso generales del módulo de versión del front-end y en lo que hace por usted. Para obtener opciones de compilación detalladas e instrucciones técnicas, consulte la documentación en el repositorio de GitHub del tipo de archivo.

TIP
El último tipo de archivo del proyecto de AEM y la documentación técnica asociada se encuentran en GitHub.

Desarrollo front-end y back-end de AEM

En términos muy simplificados, los proyectos de AEM se pueden considerar como dos partes separadas pero relacionadas:

  • Desarrollo back-end que impulsa la lógica de AEM y produce bibliotecas Java, servicios OSGi, etc.
  • Desarrollo front-end que impulsa la presentación y el comportamiento del sitio web resultante y produce bibliotecas JavaScript y CSS

Puesto que estos dos procesos de desarrollo se centran en diferentes partes del proyecto, el desarrollo del back-end y del front-end puede ocurrir en paralelo.

diagrama del flujo de trabajo de front-end

Sin embargo, cualquier proyecto resultante debe utilizar los resultados de ambos esfuerzos de desarrollo, es decir, tanto del back-end como el front-end.

Determinar el marcado

Independientemente del flujo de trabajo de desarrollo front-end que decida implementar para su proyecto, los desarrolladores back-end y front-end deben acordar primero el marcado. Normalmente AEM define el marcado, que proporciona los componentes principales. Sin embargo, esto se puede personalizar si es necesario..

Posibles flujos de trabajo de desarrollo front-end

El módulo de versión del front-end es una herramienta útil y muy flexible, pero no impone ninguna opinión particular sobre cómo debe usarse. Los siguientes son dos ejemplos de uso posible, pero las necesidades de cada proyecto pueden dictar otros modelos de uso.

Uso del servidor de desarrollo estático de Webpack

Con Webpack puede aplicar estilos y desarrollar en función de la salida estática de páginas web de AEM dentro del módulo ui.frontend.

  1. Vista previa de la página en AEM con el modo de vista previa de página o pasando wcmmode=disabled en la URL
  2. Ver el origen de la página y guardar como HTML estático en el módulo ui.frontend
  3. Inicie Webpack y empiece a aplicar estilos y generar el JavaScript y CSS necesarios
  4. Ejecute npm run dev para generar las clientlibs

En este flujo, un desarrollador de AEM puede realizar los pasos uno y dos y transferir el HTML estático al desarrollador de front-end que se desarrolla en función de la salida HTML de AEM.

TIP
También se puede aprovechar la Biblioteca de componentes para capturar muestras de la salida de marcado de cada componente para que funcionen a nivel de componente en lugar de a nivel de página.