Introducción y tutorial de SPA spa-introduction-and-walkthrough
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.
Introducción introduction
Objetivo del artículo article-objective
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.
El tutorial se basa en la funcionalidad de AEM estándar y en la aplicación de diario We.Retail de ejemplo. Deben cumplirse los siguientes requisitos:
¿Qué es una SPA? what-is-a-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? why-a-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.
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 una SPA? how-does-a-spa-work
La idea principal de una SPA 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 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. Pueden ser necesarias llamadas adicionales, ya 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.
Para 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, el elemento de página reacciona 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.
Experiencia de edición de contenido con SPA content-editing-experience-with-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 común de AEM está disponible y no se requieren cambios en el flujo de trabajo del autor.
-
Edite la aplicación de diario We.Retail en AEM.
http://localhost:4502/editor.html/content/we-retail-journal/react.html
-
Seleccione un componente de encabezado y observe que aparece una barra de herramientas como cualquier otro componente. Seleccione Editar.
-
Edite el contenido como de costumbre dentro de AEM y note que los cambios se mantienen.
note note NOTE Consulte la Información general del Editor de SPA para obtener más información sobre el editor de texto in situ y el SPA. -
Utilice el explorador de recursos para arrastrar y soltar una nueva imagen en un componente de imagen.
-
El cambio se mantendrá.
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 SPA.
Aplicaciones SPA y el Editor de SPA de AEM spa-apps-and-the-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 la aplicación SPA using-an-spa-application
-
Cargue la aplicación de diario We.Retail en el servidor de publicación o utilice la opción Ver tal y como aparece publicado de la variable Información de la página en el editor de páginas.
/content/we-retail-journal/react.html
Tenga en cuenta la estructura de las páginas, incluida la navegación a páginas secundarias, widget meteorológico y artículos.
-
Vaya a una página secundaria usando el menú y vea que la página se carga inmediatamente sin necesidad de actualizar.
-
Abra las herramientas de desarrollador integradas del explorador y supervise la actividad de red a medida que navega por las páginas secundarias.
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, Carga de una aplicación SPA, profundiza en la mecánica de carga del SPA y en cómo se puede cargar el contenido sincrónica y asincrónicamente.
Carga de una aplicación SPA loading-an-spa-application
-
Si aún no se ha cargado, cargue la aplicación We.Retail Journal en el servidor de publicación o utilizando la opción Ver tal y como aparece publicado de la variable Información de la página en el editor de páginas.
/content/we-retail-journal/react.html
-
Utilice la herramienta integrada de su navegador para ver la fuente de la página.
-
Tenga en cuenta que el contenido de la fuente es extremadamente limitado.
code language-none <!DOCTYPE HTML> <html lang="en-CH"> <head> <meta charset="UTF-8"> <title>We.Retail Journal</title> <meta name="template" content="we-retail-react-template"/> <link rel="stylesheet" href="/etc.clientlibs/we-retail-journal/react/clientlibs/we-retail-journal-react.css" type="text/css"> <link rel="stylesheet" href="/libs/wcm/foundation/components/page/responsive.css" type="text/css"> </head> <body class="page basicpage"> <div id="page"></div> <script type="text/javascript" src="/etc.clientlibs/we-retail-journal/react/clientlibs/we-retail-journal-react.js"></script> </body> </html>La página no tiene contenido dentro de su cuerpo. Se compone principalmente de hojas de estilo y una llamada a un script React,
we-retail-journal-react.js.Este script React es el controlador principal de esta aplicación y es responsable de procesar todo el contenido.
-
Utilice las herramientas integradas de su explorador para inspeccionar la página. Consulte el contenido del DOM completamente cargado.
-
Cambie a la pestaña Red en el Inspector y vuelva a cargar la página.
Ignorando las solicitudes de imagen, note 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.
-
Cargue el
react.model.jsonen una pestaña nueva./content/we-retail-journal/react.model.json
El Editor de SPA de AEM aprovecha 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 (lado del servidor con HTL o lado del cliente con React). Por supuesto, este artículo se centra en la renderización del lado del cliente con React.
-
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 We.Retail Journal, la variable
home,blogyaboutuslas páginas se cargan sincrónicamente, ya que los visitantes suelen visitar todas esas páginas. Sin embargo, la variableweatherse carga de forma asíncrona, ya que es menos probable que los visitantes la visiten.Este comportamiento no es obligatorio y es totalmente definible.
-
Para ver esta diferencia de comportamiento, vuelva a cargar la página y borre la actividad de red del inspector. Vaya al blog y a las páginas de uso en el menú de página y vea que no hay actividad de red reportada.
Vaya a la página del tiempo y compruebe que la variable
weather.model.jsonse llama asincrónicamente.
Interacción con el Editor de SPA interaction-with-the-spa-editor
Con la aplicación de ejemplo We.Retail Journal, 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 asincrónica 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.
-
Cargue la aplicación de diario We.Retail en el editor y cambie a Vista previa en el menú contextual.
http://localhost:4502/editor.html/content/we-retail-journal/react.html -
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.
Tenga en cuenta que el componente tiene un nuevo atributo de datos
data-cq-data-path.
Por ejemplo
data-cq-data-path="root/responsivegrid/paragraph_1Estas rutas permiten 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 Editor de SPA 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.
note note NOTE Este es un cambio en el comportamiento de las páginas procesadas del lado del servidor en AEM, donde hay un cqelemento insertado para cada componente editable.Este método en SPA elimina la necesidad de insertar elementos personalizados, basándose únicamente en un atributo de datos adicional, lo que simplifica el marcado para el desarrollador de front-end.
Pasos siguientes next-steps
Ahora que comprende la experiencia de edición de SPA en AEM y cómo se relaciona un SPA con el Editor de SPA, profundice en la comprensión de cómo se crea una SPA.
- Introducción a SPA en AEM muestra cómo se crea una SPA básica para trabajar con el Editor de SPA en AEM
- La Información general del Editor de SPA profundiza en el modelo de comunicación entre AEM y el SPA.
- Desarrollo de SPA para AEM describe cómo involucrar a los desarrolladores de front-end para que desarrollen una SPA para AEM, así como cómo las SPA interactúan con la arquitectura de AEM.