Desenvolvendo um SPA editável no AEM
Tags: aem, adobe, spa
Published: 2021-11-04 12:39:36

## 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

![AEM SPA Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0km2r5eqotzsko3q6n7.png)

**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**

![Deployinh a project to AEM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vohz989uix249b71dzho.png)

É necessário criar uma tag <modules> 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

![Creating Page Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lybi07oa6nvbwemyevrr.png)

**Criando uma Página Editável**

![Creating Editable Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8c6lyytniw9gwh1osrw.png)

**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.

![Page Editing Workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksa7fusr996b7sfvxfyc.png)

**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