En esta continuación opcional del AEM Recorrido para desarrolladores sin encabezado, aprenderá cómo AEM combinar envíos sin encabezado con funciones tradicionales de CMS de pila completa y cómo puede crear SPA editables con AEM marco SPA Editor, así como integrar SPA externas, permitiendo las funciones de edición necesarias.
En este punto, debería haber completado todo el recorrido para desarrolladores AEM sin encabezado y comprenda los conceptos básicos de la entrega sin encabezado en AEM, incluida la comprensión de:
Así que ahora ya sea que usted se ha puesto en marcha con su primer proyecto AEM sin cabeza o tiene todo el conocimiento necesario para hacerlo. Felicitaciones!
Entonces, ¿por qué está leyendo esta continuación adicional y opcional del recorrido? Es probable que recuerde eso en la Introducción analizamos brevemente cómo AEM no solo admite entregas sin periféricos y modelos de pila completa tradicionales, sino que también puede admitir modelos híbridos que combinan las ventajas de ambos. Aunque no es el modelo tradicional sin cabeza, estos modelos híbridos pueden ofrecer una flexibilidad sin precedentes a ciertos proyectos.
Este artículo se basa en su conocimiento de AEM sin encabezado al explorar en profundidad cómo puede crear sus propias aplicaciones de una sola página (SPA) que realmente se pueden editar en AEM. De este modo puede crear contenido y enviarlo sin problemas a un SPA, pero ese SPA sigue siendo editable en AEM.
Este documento le ayuda a comprender cómo se desarrollan las aplicaciones de una sola página mediante el marco AEM SPA Editor. Después de leer este documento, debería poder hacer lo siguiente:
Hay varios requisitos antes de comenzar a trabajar con SPA en AEM.
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.
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.
Para obtener una descripción completa de las SPA y por qué las utilizaría, consulte la recursos adicionales para obtener vínculos a más documentación detallada.
El desarrollo de aplicaciones de una sola página en AEM supone que el desarrollador del front-end observa las prácticas recomendadas estándar al crear un SPA. Si como desarrollador de front-end sigue estas prácticas recomendadas generales, así como algunos principios específicos de AEM, su SPA funcionará con AEM y sus funciones de creación de contenido.
Para obtener una descripción completa de cómo AEM gestiona los SPA, consulte la recursos adicionales para obtener vínculos a más documentación detallada.
Los sitios creados con marcos de SPA comunes, como React y Angular, cargan su contenido a través de JSON dinámico y no proporcionan la estructura de HTML necesaria para que el Editor de páginas de AEM pueda colocar controles de edición.
Para permitir la edición de SPA dentro de AEM, se necesita una asignación entre la salida JSON del SPA y el modelo de contenido en el repositorio AEM para guardar los cambios en el contenido.
SPA compatibilidad con en AEM introduce una capa de JS fina que interactúa con el código JS de SPA cuando se carga en el Editor de páginas con el que se pueden enviar eventos y se puede activar la ubicación de los controles de edición para permitir la edición en contexto. Esta función se basa en el concepto de extremo de la API de servicios de contenido, ya que el contenido de la SPA debe cargarse a través de los servicios de contenido.
Para obtener una descripción completa del AEM SPA Editor, consulte la recursos adicionales para obtener vínculos a más documentación detallada.
Si tiene un SPA existente, AEM puede incrustarlo en AEM para que sea visible para los autores de contenido en el editor de AEM. Esto puede resultar muy útil para ver el contenido que están creando mediante fragmentos de contenido en el contexto de la aplicación final en la que se consumirá.
Además, con solo cambios pequeños, puede habilitar cierta capacidad de edición en el SPA externo dentro del editor de AEM.
El componente RemotePage permite procesar una SPA externa en AEM.
Para obtener una descripción completa de cómo hacer editable un SPA externo en AEM, consulte la recursos adicionales para obtener vínculos a más documentación detallada.
Para comenzar a desarrollar su propio SPA para AEM, revise los siguientes documentos:
Si necesita adaptar un SPA existente para utilizarlo en AEM, revise los siguientes documentos:
Consulte a continuación la recursos adicionales que puede profundizar en SPA temas de AEM.
A continuación se muestran algunos recursos adicionales que profundizan en algunos conceptos mencionados en este documento.