Introducción y tutorial de SPA

Última actualización: 16 de enero de 2025
  • Temas:

Creado para:

  • Desarrollador

Las aplicaciones de una sola página (SPA) pueden ofrecer experiencias atractivas para los usuarios de sitios web. Los desarrolladores quieren poder generar sitios usando marcos de SPA y los autores quieren editar contenido dentro de AEM para un sitio generado usando dichos marcos.

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

IMPORTANT
SPA El Editor de segmentos sigue siendo compatible con el Adobe AEM, pero los editores preferidos para administrar contenido sin encabezado en el son ahora:

Introducción

Objetivo del artículo

Este artículo presenta los conceptos básicos de las SPA antes de guiar al lector a través de un tutorial del editor de SPA utilizando una sencilla aplicación de 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 Editor de SPA de AEM y cómo interactúa con ella.

La meta 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 las SPA y cómo es diferente de una aplicación AEM estándar.

Requisitos

El tutorial se basa en la funcionalidad AEM estándar y en la aplicación de proyecto WKND SPA de ejemplo. Para seguir con este tutorial, debe tener disponible lo siguiente.

CAUTION
Este documento usa la aplicación WKND Spa Project únicamente con fines de demostración. No utilice para ningún trabajo de proyecto.
AEM AEM SPA Cualquier proyecto debe usar el tipo de archivo del proyecto ,, que admite proyectos de la mediante React o Angular SPA y usa el SDK de la.

¿Qué es una 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 carga de una sola 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 actualizaciones de 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 Editor de SPA de AEM 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 de AEM.

¿Por qué una 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 funcionan las SPA.

screen_shot_2018-08-20at135550

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 mercadotecnia

  • 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 un desarrollo front-end independiente.

¿Cómo funciona una SPA?

SPA SPA La idea principal detrás de una es que las llamadas y la dependencia de un servidor se reducen para minimizar los retrasos causados por las llamadas al servidor, de modo que el usuario 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. Pueden ser necesarias llamadas adicionales a medida que el visitante interactúa con los elementos de la página. Estas llamadas múltiples pueden dar una sensación de retardo o retraso, ya que la página tiene que estar al día con las solicitudes del visitante.

screen_shot_2018-08-20at140449

SPA Para obtener una experiencia más fluida, que se aproxime a lo que un visitante espera de las aplicaciones móviles nativas, un visitante 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 procesar en el lado del cliente, los elementos de página reaccionan más rápido y las interacciones del visitante con la página son inmediatas. Se llama asincrónicamente a cualquier dato adicional que pueda ser necesario para maximizar la velocidad de la página.

NOTE
SPA AEM SPA AEM Para obtener información técnica sobre cómo trabajar en la, vea el artículo Introducción a la en la aplicación de la técnica de la.
SPA SPA Para obtener más información sobre el diseño, la arquitectura y el flujo de trabajo técnico del Editor de la, consulte el artículo Información general del Editor de la publicación.

Experiencia de edición de contenido con SPA

SPA AEM SPA Cuando se crea una para utilizar el Editor de, el autor del contenido no nota ninguna diferencia al editar y crear contenido. La funcionalidad común de AEM 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://<host>:<port>/editor.html/content/wknd-spa-react/us/en/home.html

    Paso 1

  2. Seleccione un componente de encabezado y observe que la barra de herramientas aparece como para cualquier otro componente. Seleccione Editar.

    Paso 2

  3. AEM Edite el contenido de la forma habitual dentro de las opciones de. Los cambios se mantienen.

    Paso 3

    NOTE
    SPA SPA Consulte la Información general sobre el editor de para obtener más información sobre el editor de texto local y el editor de texto en su lugar y el editor de texto en su lugar.

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

    Paso 4

  5. El cambio se mantendrá.

    Paso 5

SPA 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 que no sea de tipo.

NOTE
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. Aplicaciones de SPA y el Editor de SPA de AEM.

Aplicaciones SPA y el Editor de SPA de AEM

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

Uso de la aplicación SPA

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

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

    Paso 1

    Tenga en cuenta la estructura de las páginas, incluida la navegación a páginas secundarias, el widget del tiempo y los artículos.

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

    Paso 2

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

    Paso 3

    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?

SPA SPA En la siguiente sección, Carga de una aplicación de, se profundiza en la mecánica de cargar la aplicación y en cómo se puede cargar el contenido de manera sincrónica y asincrónica.

Carga de una aplicación SPA

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

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

    Paso 1

  2. Utilice la herramienta integrada de su navegador para ver la fuente de la página.

  3. El contenido de la fuente es extremadamente limitado.

    • La página no tiene contenido dentro de su cuerpo. Se compone principalmente de hojas de estilo y una llamada a varios scripts como clientlib-react.min.js.
    • Estos scripts son los controladores principales de esta aplicación y son responsables de procesar todo el contenido.

  4. Utilice las herramientas integradas de su explorador para inspeccionar la página. Consulte el contenido del DOM completamente cargado.

    Paso 4

  5. Cambie a la pestaña Red de las herramientas para desarrolladores y vuelva a cargar la página.

    Al ignorar las solicitudes de imagen, los recursos principales cargados para la página son la propia página, CSS, React JavaScript, sus dependencias y los datos JSON para la página.

    Paso 5

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

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

    Paso 6

    El Editor de SPA de AEM utiliza los Servicios de contenido de AEM 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 la SPA. El envío de los datos JSON se delega hacia abajo en cada componente (de página, a párrafo, a componente, etc).

    Cada componente elige lo que expone y cómo se procesa (del lado del servidor con HTL o del lado del cliente con React). 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 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.

    Paso 7

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

    Paso 8

Interacción con el Editor de SPA

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

Además, para el autor del contenido, la creación de contenido mediante un editor de SPA es continua 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 Proyecto WKND SPA en el editor y cambie a modo Previsualización.

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

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

    El componente tiene un nuevo atributo de datos data-cq-data-path.

    Paso 2

    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. SPA En función de este atributo, el Editor de determinará qué configuración editable está asociada con el componente, de modo que se cargue el marco de trabajo, la barra de herramientas, etc. correctos.

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

    NOTE
    AEM Se trata de un cambio en el comportamiento con respecto a las páginas procesadas del lado del servidor en la, donde hay un elemento cq insertado para cada componente editable.
    SPA Este enfoque en la práctica 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.