Show Menu
TOPICS×

Módulo ui.front del arquetipo del proyecto de AEM

El arquetipo de proyecto de AEM incluye un mecanismo de generación de front-end opcional basado en Webpack. El módulo ui.front se convierte así en la ubicación central de todos los recursos front-end del proyecto, incluidos los archivos JavaScript y CSS. Para aprovechar al máximo esta función útil y flexible, es importante comprender cómo encaja el desarrollo front-end en un proyecto de AEM.

Proyectos de AEM y desarrollo front-end

En términos muy simplificados, los proyectos de AEM pueden considerarse como dos partes separadas pero relacionadas:
  • Desarrollo back-end que impulsa la lógica de AEM y produce bibliotecas de 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
Debido a que estos dos procesos de desarrollo se centran en diferentes partes del proyecto, el desarrollo del back-end y del front-end puede suceder en paralelo.
Sin embargo, cualquier proyecto resultante debe utilizar los resultados de ambos esfuerzos de desarrollo, es decir, tanto el back-end como el front-end.
La ejecución
npm run dev
inicia el proceso de compilación de front-end que recopila los archivos JavaScript y CSS almacenados en el módulo ui.front y produce dos bibliotecas de cliente o clientes reducidos llamados
clientlib-site
y
clientlib-dependencies
depositados en el módulo ui.apps. clientlibs se pueden implementar en AEM y permiten almacenar el código del cliente en el repositorio.
Cuando se ejecuta todo el arquetipo de proyecto de AEM utilizando todos los artefactos del proyecto, incluidos los clientes, se insertan en la instancia de AEM.
mvn clean install -PautoInstallPackage
Obtenga más información sobre clientlibs en la documentación de desarrollo de AEM y cómo los utiliza el módulo ui.front a continuación .

Posibles flujos de trabajo de desarrollo front-end

El módulo de diseño frontal es una herramienta útil y muy flexible, pero no impone ninguna opinión particular sobre cómo debe utilizarse. Los siguientes son dos ejemplos de
posible
uso, pero las necesidades de cada proyecto pueden dictar otros modelos de uso.

Uso de Webpack Static Development Server

Con Webpack, puede aplicar estilo y desarrollarse en función de la salida estática de las páginas web de AEM dentro del módulo ui.front.
  1. Vista previa de la página en AEM mediante el modo de vista previa de la página o pasando
    wcmmode=disabled
    en la dirección URL
  2. Ver el origen de la página y guardarlo como HTML estático dentro del módulo ui.front
  3. Inicie webpack y comience a diseñar y generar el JavaScript y CSS necesarios
  4. Ejecutar
    npm run dev
    para generar clientlibs
En este flujo, un desarrollador de AEM puede realizar los pasos uno y dos y pasar el HTML estático al desarrollador front-end que se desarrolla en función de la salida HTML de AEM.
También se podría aprovechar la biblioteca de componentes para capturar muestras de la salida de marcado de cada componente para trabajar en el nivel de componente en lugar de en el nivel de página.

Uso de Storybook

Al utilizar Storybook , puede realizar más desarrollo atómico del front-end. Aunque Storybook no se incluye en el arquetipo del proyecto de AEM, puede instalarlo y almacenar los artefactos del libro de historias en el módulo ui.frontender. Cuando están listos para realizar pruebas en AEM, se pueden implementar como clientlibs mediante la ejecución
npm run dev
.
Storybook no se incluye en el arquetipo del proyecto de AEM. Si decide utilizarla, debe instalarla por separado.

Determinación del marcado

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

Módulo ui.frontender

El arquetipo de proyecto de AEM incluye un mecanismo de compilación front-end opcional basado en Webpack con las siguientes funciones.
  • Compatibilidad total con TypeScript, ES6 y ES5 (con envoltorios de Webpack aplicables)
  • Linting de TypeScript y JavaScript mediante un conjunto de reglas TSLint
  • Salida ES5, para compatibilidad con exploradores heredados
  • Globalización
    • No es necesario agregar importaciones a ningún lugar
    • Ahora se pueden agregar todos los archivos JS y CSS a cada componente.
      • La práctica recomendada está en curso
        /clientlib/js
        ,
        /clientlib/css
        o
        /clientlib/scss
    • No se necesitan archivos
      .content.xml
      ni
      js.txt
      /
      css.txt
      ya que todo se ejecuta a través de Webpack.
    • El globber extrae todos los archivos JS de la
      /component/
      carpeta.
      • Webpack permite encadenar archivos CSS/SCSS mediante archivos JS.
      • Se extraen a través de los dos puntos de entrada
        sites.js
        y
        vendors.js
        .
    • El único archivo consumido por AEM son los archivos de salida
      site.js
      y
      site.css
      tanto en
      /clientlib-site
      como
      dependencies.js
      y
      dependencies.css
      en
      /clientlib-dependencies
  • Chunks
    • Principal (sitio js/css)
    • Proveedores (dependencias js/css)
  • Compatibilidad total con Sass/Scss (Sass se compila en CSS a través de Webpack)
  • Servidor de desarrollo de webpack estático con proxy integrado para una instancia local de AEM
Para obtener más información técnica sobre el módulo ui.frontender, consulte la documentación en GitHub .

Instalación

  1. Instale NodeJS (v10+) de forma global. Esto también instalará npm.
  2. Vaya a ui.frontender en el proyecto y ejecute
    npm install
    .
Debe haber ejecutado el arquetipo con la opción
-DoptionIncludeFrontendModule=y
de rellenar la carpeta ui.frontender.

Uso

Los siguientes scripts npm impulsan el flujo de trabajo de front-end:
  • npm run dev
    - compilación completa con la optimización de JS deshabilitada (temblor de árbol, etc.) y los mapas de origen habilitados y la optimización de CSS deshabilitada.
  • npm run prod
    - compilación completa con la optimización de JS habilitada (sacudida de árboles, etc.), mapas de origen deshabilitados y optimización de CSS habilitada.
  • npm run start
    - Inicia un servidor de desarrollo de webpack estático para el desarrollo local con dependencias mínimas en AEM.

Salida

El módulo ui.front compila el código en la
ui.frontend/src
carpeta y genera el CSS y JS compilados, así como todos los recursos debajo de una carpeta denominada
ui.frontend/dist
.
  • Sitio
    :
    site.js
    ,
    site.css
    y se crea una
    resources/
    carpeta para las imágenes y fuentes dependientes del diseño en una carpeta
    dist/
    clientlib-site.
  • Dependencias
    :
    dependencies.js
    y
    dependencies.css
    se crean en una
    dist/clientlib-dependencies
    carpeta.

JavaScript

  • Optimización: en el caso de las compilaciones de producción, se eliminan todos los JS que no se estén utilizando o llamando.

CSS

  • Autoprefixing: Todas las CSS se ejecutan a través de un prefijo y todas las propiedades que requieran un prefijo tendrán automáticamente las agregadas en la CSS.
  • Optimización: en la publicación, toda la CSS se ejecuta mediante un optimizador (cssnano) que la normaliza según las siguientes reglas predeterminadas:
    • Reduce la expresión de calc de CSS siempre que sea posible, garantizando la compatibilidad del navegador y la compresiónConvierte entre valores de longitud, tiempo y ángulo equivalentes. Tenga en cuenta que, de forma predeterminada, los valores de longitud no se convierten.
    • Quita los comentarios de las reglas, selectores y declaraciones
    • Quita reglas, reglas y declaraciones duplicadas
      • Tenga en cuenta que esto solo funciona para duplicados exactos.
    • Quita reglas vacías, consultas de medios y reglas con selectores vacíos, ya que no afectan al resultado
    • Combina reglas adyacentes por selectores y pares de propiedades/valores superpuestos
    • Garantiza que solo un @charset esté presente en el archivo CSS y lo mueve a la parte superior del documento
    • Reemplaza la palabra clave inicial CSS con el valor real, cuando la salida resultante es menor
    • Comprime las definiciones de SVG integradas con SVGO
  • Limpieza: incluye una tarea explícita y limpia para eliminar los archivos CSS, JS y Map generados a petición.
  • Asignación de origen: sólo compilación de desarrollo
La opción de compilación de front-end utiliza archivos de configuración de webpack solo para desarrollo y solo para prod que comparten un archivo de configuración común. De este modo, los ajustes de desarrollo y producción se pueden modificar de forma independiente.

Generación de biblioteca de clientes

El proceso de compilación del módulo ui.frontened aprovecha el complemento aem-clientlib-generator para mover el CSS compilado, JS y cualquier recurso al módulo ui.apps. La configuración de aem-clientlib-generator se define en
clientlib.config.js
. Se generan las siguientes bibliotecas de cliente:
  • clientlib-site
    -
    ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-site
  • clientlib-dependencias
    -
    ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-dependencies

Inclusión de bibliotecas de cliente en páginas

clientlib-site
y
clientlib-dependencies
las categorías se incluyen en las páginas mediante la configuración de la directiva de página como parte de la plantilla predeterminada. Para ver la directiva, edite la plantilla de página de
contenido > Información de página > Política
de página.
La inclusión final de las bibliotecas de cliente en la página de sitios es la siguiente:
<HTML> <head> <link rel="stylesheet" href="clientlib-base.css" type="text/css"> <script type="text/javascript" src="clientlib-dependencies.js"></script> <link rel="stylesheet" href="clientlib-dependencies.css" type="text/css"> <link rel="stylesheet" href="clientlib-site.css" type="text/css"> </head> <body> .... <script type="text/javascript" src="clientlib-site.js"></script> <script type="text/javascript" src="clientlib-base.js"></script> </body> </HTML>
Por supuesto, la inclusión anterior se puede modificar actualizando la directiva de página y/o modificando las categorías y propiedades incrustadas de las respectivas bibliotecas cliente.

Servidor de desarrollo de Webpack estático

El módulo ui.frontender incluye un webpack-dev-server que proporciona recarga en directo para un rápido desarrollo front-end fuera de AEM. La configuración aprovecha el complemento html-webpack-plugin para insertar automáticamente CSS y JS compilados desde el módulo ui.front en una plantilla HTML estática.

Archivos importantes

  • ui.frontend/webpack.dev.js
    • Contiene la configuración para el webpack-dev-serve y señala a la plantilla html que se va a utilizar.
    • También contiene una configuración proxy para una instancia de AEM que se ejecuta en localhost:4502.
  • ui.frontend/src/main/webpack/static/index.html
    • Es el HTML estático con el que se ejecutará el servidor.
    • Esto permite a los desarrolladores realizar cambios en CSS/JS y verlos reflejados inmediatamente en el marcado.
    • Se da por hecho que el marcado colocado en este archivo refleja con precisión el marcado generado por los componentes de AEM.
    • El marcado de este archivo no se sincroniza automáticamente con el marcado de componentes de AEM.
    • Este archivo también contiene referencias a bibliotecas de cliente almacenadas en AEM, como CSS de componentes principales y CSS de cuadrícula adaptable.
    • El servidor de desarrollo de webpack está configurado para proxy que estos CSS/JS incluyen desde una instancia local de AEM en ejecución basada en la configuración que se encuentra en
      ui.frontend/webpack.dev.js
      .

Utilizando

  1. Desde la raíz del proyecto, ejecute el comando
    mvn -PautoInstallSinglePackage clean install
    para instalar todo el proyecto en una instancia de AEM que se ejecute en
    localhost:4502
    .
  2. Navegue dentro de la
    ui.frontend
    carpeta.
  3. Ejecute el siguiente comando
    npm run start
    para iniciar el servidor de desarrollo de webpack. Una vez iniciado, debe abrir un navegador (
    localhost:8080
    o el siguiente puerto disponible).
Ahora puede modificar archivos CSS, JS, SCSS y TS y ver los cambios reflejados inmediatamente en el servidor de desarrollo de webpack.