SPA: Technical Overview of SPA (Single Page App) Editor

Editor AEM SPA

O Editor do AEM SPA permite que os desenvolvedores front-end a criar SPAs que podem ser integrados em um site AEM, permitindo que os autores de conteúdo a editar o conteúdo SPA tão facilmente quanto qualquer outro conteúdo AEM.

Com o Editor SPA, autores podem fazer:

• Edição de conteúdo in-context pelo AEM
• Configuração in-context dos componentes do lado do cliente
• Administração de layout (grid-based) in-context dos componentes do lado do cliente
• Composição in-context com os componentes do lado do cliente
• Criação/edição de template in-context para estados de app

SPA: Using aem-clientlib-generator

• O aem-clientlib-generator é um node plugin que transforma CSS compilado e arquivos JS do seu SPA em uma AEM Client Library
• Precisa do clientlib.config.js, que define parâmetros como: -- Source path dos arquivos .css e .js -- Export path -- Categorias da clientlibrary

SPA: Fazendo o Deploy de um Project no AEM

É necessário criar uma tag que inclua o react em um arquivo pom.xml na pasta do react-app.

Templates in SPA

• Você pode criar templates para o SPA usando o Template Editor, que define os componentes permitidos e as policies (regras) de conteúdo
• O primeiro lançamento do editor SPA tem funcionalidades de edição de template limitadas
• A funcionalidade de edição completa é esperada para futuros lançamentos do SPA Editor

Criando Page Components

Como os Page Components trabalham:

• Um page component no AEM não dispõe de elementos HTML de seus componentes "filhos" (child components)
• Um Sling Model busca a representação dos componentes filhos no formato de JSON na estrutura de dados
• O app React adiciona componentes SPA para a página AEM de acordo com o modelo JSON disponibilizado
• A Client Library chamada cq.authoring.pagemodel.messaging deve ser adicionada para permitir a comunicação entre o SPA e o editor de página
• O PageModelManager permite administrar a representação do modelo das páginas AEM que compõem o SPA

Criando uma Página Editável

Workflow de Editor de Página

• cq.authoring.pagemodel.messaging manda uma mensagem para o Page Editor para estabelecer uma comunicação com o JSON data type.
• Quando a comunicação do data type está pronta no JSON, as requisições GET (GET requests) vão se comunicar com os end-points do Sling Model de um componente.
• Depois que a atualização acontece no Page Editor, a representação do JSON do componente atualizado é mandada para o Page Model library.

Componentes no SPA Editor

• A funcionalidade dos componentes AEM é dividida no cq:component no AEM e no componente React respectivo
• Um componente em um projeto AEM, ou cq:component, disponibiliza funcionalidades como arrastar e soltar uma dialog para o componente AEM
• O componente definido no React-app disponibiliza funcionalidades para o componente
• O componente React mapeia o cq:component ou o resourceType no AEM através da função MapTo()
• Os core components sustentaram o export do JSON desde o lançamento 1.1.0
• A interface do component model deve implementar uma classe ComponentExporter
• Isso garante que seu componente pode ser exportado por conta própria, usando o seletor .model e a extensão .json.

SPA Routing in AEM

• A página model data structure expõe a URL do recurso subjacente (underlying resource)
• A página model data structure expõe a URL de todas as páginas "filhas" subjugadas ao nodo JSON