Introducción a SPA y tutorial

Las aplicaciones de una sola página (SPA) pueden ofrecer experiencias atractivas para los usuarios de sitios web. Los desarrolladores quieren poder crear sitios mediante marcos de SPA y los autores quieren editar contenido sin problemas dentro de AEM para un sitio creado con dichos marcos.

El SPA Editor ofrece una solución completa para admitir SPA dentro de AEM. Este artículo recorre mediante una aplicación de SPA básica para la creación y muestra cómo se relaciona con el AEM SPA Editor subyacente.

Introducción

Objetivo del artículo

Este artículo presenta los conceptos básicos de SPA antes de guiar al lector a través de un tutorial del editor de SPA utilizando una sencilla aplicación SPA para demostrar la edición básica del contenido. A continuación, se profundiza en la construcción de la página y en cómo se relaciona la aplicación SPA con el AEM SPA Editor y cómo interactúa con ella.

El objetivo de esta introducción y tutorial es demostrar a un desarrollador AEM por qué los SPA son relevantes, cómo funcionan en general, cómo el editor de SPA gestiona un SPA y cómo se diferencia de una aplicación AEM estándar.

El tutorial se basa en la funcionalidad AEM estándar y en la aplicación de proyecto WKND SPA de ejemplo. Para seguir, descargue e instale la aplicación de proyecto WKND SPA de ejemplo desde GitHub aquí.

PRECAUCIÓN

Este documento utiliza la aplicación WKND SPA Project únicamente con fines de demostración. No debe utilizarse para ningún trabajo de proyecto.

SUGERENCIA

Cualquier proyecto AEM debe aprovechar el AEM tipo de archivo del proyecto, que admite SPA proyectos con React o Angular y aprovecha el SDK de SPA.

¿Qué es un SPA?

Una aplicación de una sola página (SPA) difiere de una página convencional en que se procesa en el lado del cliente y principalmente está dirigida por JavaScript, y se basa en llamadas Ajax para cargar datos y actualizar la página de forma dinámica. La mayoría o todo el contenido se recupera una vez en una única carga de página con recursos adicionales cargados asincrónicamente según sea necesario en función de la interacción del usuario con la página.

Esto reduce la necesidad de actualizar la página y presenta al usuario una experiencia que es fluida, rápida y se parece más a una experiencia nativa de la aplicación.

El AEM SPA Editor permite a los desarrolladores de front-end crear SPA que se pueden integrar en un sitio AEM, lo que permite a los autores de contenido editar el contenido SPA tan fácilmente como cualquier otro contenido AEM.

¿Por qué un SPA?

Al ser más rápido, fluido y más parecido a una aplicación nativa, una SPA se convierte en una experiencia muy atractiva no solo para el visitante de la página web, sino también para los especialistas en marketing y desarrolladores debido a la naturaleza de cómo SPA funciona.

SPA beneficios

Visitantes

  • Los visitantes desean experiencias nativas cuando interactúan con el contenido.
  • Hay datos claros de que cuanto más rápida sea una página, más probable será que se produzca una conversión.

Especialistas en marketing

  • Los especialistas en marketing desean ofrecer experiencias ricas y nativas para atraer visitantes a fin de que participen plenamente en el contenido.
  • La personalización puede hacer que estas experiencias sean aún más atractivas.

Desarrolladores

  • Los desarrolladores quieren una separación clara de las preocupaciones entre el contenido y la presentación.
  • La separación limpia hace que el sistema sea más extensible y permite el desarrollo independiente del front-end.

¿Cómo funciona un SPA?

La idea principal detrás de una SPA es que las llamadas a un servidor y su dependencia se reducen para minimizar los retrasos causados por la latencia del servidor de modo que el SPA se aproxime a la capacidad de respuesta de una aplicación nativa.

En una página web secuencial tradicional, solo se cargan los datos necesarios para la página inmediata. Esto significa que cuando el visitante se mueve a otra página, se llama al servidor para obtener los recursos adicionales. Es posible que sea necesario realizar llamadas adicionales, ya que el visitante interactúa con elementos de la página. Estas llamadas múltiples pueden dar una sensación de retraso o retraso, ya que la página tiene que estar al día con las solicitudes del visitante.

Experiencias secuenciales frente a fluidas

Para obtener una experiencia más fluida, que se acerca a lo que un visitante espera de las aplicaciones móviles nativas, un SPA carga todos los datos necesarios para el visitante en la primera carga. Aunque esto puede tardar un poco más al principio, elimina la necesidad de realizar llamadas al servidor adicionales.

Al realizar el procesamiento en el lado del cliente, los elementos de página reaccionan más rápido y las interacciones con la página por parte del visitante son inmediatas. Cualquier dato adicional que se necesite se llama asincrónicamente para maximizar la velocidad de la página.

SUGERENCIA

Para obtener detalles técnicos sobre cómo SPA funciona en AEM, consulte los artículos:

Para obtener una vista más detallada del diseño, la arquitectura y el flujo de trabajo técnico del SPA Editor, consulte el artículo:

Experiencia de edición de contenido con SPA

Cuando se crea un SPA para aprovechar el AEM SPA Editor, el autor del contenido no observa ninguna diferencia al editar y crear contenido. La funcionalidad de AEM común está disponible y no se requieren cambios en el flujo de trabajo del autor.

  1. Edite la aplicación WKND SPA Project en AEM.

    http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html

    Inicio del proyecto WKND SPA

  2. Seleccione un componente de texto y observe que aparece una barra de herramientas como cualquier otro componente. Seleccione Editar.

    Seleccionar componente de texto

  3. Edite el contenido como de costumbre dentro de AEM y tenga en cuenta que los cambios se mantienen.

    Editar texto

  4. Utilice el navegador de recursos para arrastrar y soltar una nueva imagen en un componente de imagen.

    Colocación de un recurso de imagen

  5. El cambio se mantiene.

    Imagen persistida

Se admiten herramientas de creación adicionales, como arrastrar y soltar componentes adicionales en la página, reorganizar componentes y modificar el diseño, como en cualquier aplicación AEM que no sea de SPA.

NOTA

El Editor de SPA no modifica el DOM de la aplicación. El propio SPA es responsable del DOM.
Para ver cómo funciona esto, continúe con la siguiente sección de este artículo SPA Apps y el AEM SPA Editor.

Aplicaciones SPA y el AEM SPA Editor

Experimentar cómo se comporta un SPA para el usuario final y luego inspeccionar la página SPA ayuda a comprender mejor cómo funciona una aplicación SAP con el SPA Editor en AEM.

Uso de una aplicación SPA

  1. Cargue la aplicación WKND SPA Project en el servidor de publicación o utilice la opción Ver tal y como aparece publicado del menú Información de página del editor de páginas.

    http://<host>:<port>/content/wknd-spa-react/us/en/home.html

    Vista previa del inicio del proyecto WKND SPA

    Tenga en cuenta la estructura de las páginas, incluida la navegación a páginas secundarias, menú y tarjetas de artículos.

  2. Vaya a una página secundaria mediante el menú y vea que la página se carga inmediatamente sin necesidad de actualizar.

    WKND SPA Project página 1

  3. Abra las herramientas de desarrollador integradas del explorador y supervise la actividad de red a medida que navega por las páginas secundarias.

    Actividad de red

    Hay muy poco tráfico a medida que se mueve de página en página en la aplicación. La página no se vuelve a cargar y solo se solicitan las imágenes nuevas.

    El SPA administra el contenido y el enrutamiento por completo en el lado del cliente.

Por lo tanto, si la página no se vuelve a cargar al navegar por las páginas secundarias, ¿cómo se carga?

La siguiente sección, Loading a SPA Application, profundiza en los mecanismos de carga de la SPA y en cómo se puede cargar el contenido sincrónica y asincrónicamente.

Cargando una aplicación SPA

  1. Si aún no se ha cargado, cargue la aplicación WKND SPA Project en el servidor de publicación o utilizando la opción Ver tal y como aparece publicado en el menú Información de página del editor de páginas.

    http://<host>:<port>/content/wknd-spa-react/us/en/home.html

    Vista previa del proyecto SPA WKND

  2. Utilice la herramienta integrada del navegador para ver el origen de la página.

  3. Tenga en cuenta que el contenido de la fuente es limitado.

    • La página no tiene contenido dentro de su cuerpo. Se compone principalmente de hojas de estilo y una llamada a varias secuencias de comandos como clientlib-react.min.js.
    • Estos scripts son los principales controladores de esta aplicación y son responsables de procesar todo el contenido.
  4. Utilice las herramientas integradas del explorador para inspeccionar la página. Consulte el contenido del DOM completamente cargado.

    DOM del proyecto WKND SPA

  5. Cambie a la ficha Red (Network) en el Inspector y vuelva a cargar la página.

    Ignorando las solicitudes de imagen, tenga en cuenta que los recursos principales cargados para la página son la página en sí, CSS, React Javascript, sus dependencias, así como los datos JSON de la página.

    Actividad de red del proyecto WKND SPA

  6. Cargue el home.model.json en una pestaña nueva.

    http://<host>:<port>/content/wknd-spa-react/us/en/home.model.json

    JSON de la página de inicio del proyecto WKND SPA

    El AEM SPA Editor aprovecha AEM Content Services para entregar todo el contenido de la página como un modelo JSON.

    Al implementar interfaces específicas, los modelos Sling proporcionan la información necesaria para el SPA. El envío de los datos JSON se delega hacia abajo en cada componente (de página, párrafo, componente, etc.).

    Cada componente elige lo que expone y cómo se procesa (lado del servidor con HTL o lado del cliente con React o Angular). Este artículo se centra en la renderización del lado del cliente con React.

  7. El modelo también puede agrupar las páginas de forma que se carguen sincrónicamente, lo que reduce el número de recargas de página necesarias.

    En el ejemplo de la aplicación de proyecto WKND SPA, las páginas home, page-1, page-2 y page-3 se cargan sincrónicamente, ya que los visitantes suelen visitar todas esas páginas.

    Este comportamiento no es obligatorio y es totalmente definible.

    WKND SPA Agrupación de elementos del proyecto

  8. Para ver esta diferencia de comportamiento, vuelva a cargar la página home y borre la actividad de red del inspector. Vaya a page-1 en el menú de página y vea que la única actividad de red es una solicitud para la imagen de page-1. page-1 no necesita cargarse.

    WKND SPA Proyecto página 1 Actividad de red

Interacción con el Editor de SPA

Con la aplicación de proyecto WKND SPA de ejemplo, está claro cómo se comporta y se carga la aplicación cuando se publica, aprovechando los servicios de contenido para la entrega de contenido JSON, así como la carga asíncrona de recursos.

Además, para el autor del contenido, la creación de contenido mediante un editor de SPA es perfecta dentro de AEM.

En la siguiente sección analizaremos el contrato que permite al Editor de SPA relacionar componentes dentro del SPA con componentes de AEM y lograr esta experiencia de edición sin problemas.

  1. Cargue la aplicación WKND SPA Project en el editor y cambie al modo Preview.

    http://<host>:<port>/editor.html/content/wknd-spa-react/us/en/home.html

  2. Con las herramientas de desarrollador incorporadas del navegador, inspeccione el contenido de la página. Con la herramienta de selección, seleccione un componente editable en la página y vea los detalles del elemento.

    Tenga en cuenta que el componente tiene un nuevo atributo de datos data-cq-data-path.

    Inspección de elementos del proyecto WKND SPA

    Por ejemplo

    data-cq-data-path="/content/wknd-spa-react/us/en/home/jcr:content/root/responsivegrid/text

    Esta ruta permite la recuperación y asociación del objeto de configuración de contexto de edición de cada componente.

    Este es el único atributo de marcado necesario para que el editor reconozca este componente como editable dentro del SPA. En función de este atributo, el SPA Editor determinará qué configuración editable está asociada al componente, de modo que el marco, la barra de herramientas, etc. correctos. se carga.

    También se agregan algunos nombres de clase específicos para marcar marcadores de posición y para la funcionalidad de arrastrar y soltar recursos.

    NOTA

    Este comportamiento difiere de las páginas procesadas del lado del servidor en AEM, donde hay un elemento cq insertado para cada componente editable.
    Este método en el Editor de SPA elimina la necesidad de insertar elementos personalizados, ya que solo se basa en un atributo de datos adicional, lo que simplifica el marcado para el desarrollador de front-end.

Encabezado y sin encabezado en AEM

SPA se pueden habilitar con niveles flexibles de integración dentro de AEM, incluso SPA desarrollarse y mantenerse fuera de AEM. Además, SPA se puede aprovechar dentro de AEM mientras también se utilizan AEM para ofrecer contenido a extremos adicionales sin objetivos.

SUGERENCIA

Consulte el documento Headful and Headless en AEM para obtener más información.

Pasos siguientes

Ahora que comprende la SPA experiencia de edición en AEM y cómo se relaciona un SPA con el Editor de SPA, profundiza en la comprensión de cómo se crea un SPA.

  • Introducción a SPA en AEM con Reactancia muestra cómo se crea un SPA básico para trabajar con el SPA Editor en AEM con React
  • Introducción a SPA en AEM con Angularam muestra cómo se crea un SPA básico para trabajar con el Editor de SPA en AEM con Angular
  • SPA Información general del editor profundiza en el modelo de comunicación entre AEM y el SPA.
  • Desarrollo de SPA para AEMdescribe cómo interactuar con los desarrolladores de front-end para desarrollar un SPA para AEM, así como cómo SPA interactuar con AEM arquitectura.

En esta página