Introdução ao SPA no AEM - Reagir

Aplicativos de página única (SPA) podem oferta experiências interessantes para usuários de sites. Os desenvolvedores querem ser capazes de criar sites usando estruturas SPA e os autores querem editar o conteúdo no AEM para um site criado usando estruturas SPA.

O recurso de criação de SPA oferta uma solução abrangente para suportar SPA dentro do AEM. Este artigo apresenta um aplicativo de SPA simplificado na estrutura React, explica como ele é montado, permitindo que você se familiarize com seu próprio SPA rapidamente.

OBSERVAÇÃO

Este artigo baseia - se no quadro React. Para o documento correspondente para a estrutura Angular, consulte Introdução ao SPA em AEM - Angular.

OBSERVAÇÃO

O recurso Editor de aplicativo de página única (SPA) requer AEM 6.4 service pack 2 ou mais recente.

O Editor de SPA é a solução recomendada para projetos que exigem renderização do cliente baseada em SPA estrutura (por exemplo, Reagir ou Angular).

Introdução

Este artigo resume o funcionamento básico de uma SPA simples e o mínimo que você precisa saber para executar a sua.

Para obter mais detalhes sobre como SPA trabalhar em AEM, consulte os seguintes documentos:

OBSERVAÇÃO

Para ser capaz de criar conteúdo dentro de um SPA, o conteúdo deve ser armazenado em AEM e exposto pelo modelo de conteúdo.

Um SPA desenvolvido fora do AEM não será autorável se não respeitar o contrato do modelo de conteúdo.

Este documento passará pela estrutura de um SPA simplificado criado usando a estrutura React e ilustrará como funciona para que você possa aplicar essa compreensão ao seu próprio SPA.

Dependências, configuração e criação

Além da dependência esperada do React, o SPA de amostra pode aproveitar bibliotecas adicionais para tornar a criação do SPA mais eficiente.

Dependências

O arquivo package.json define os requisitos do pacote SPA geral. As dependências mínimas de AEM para um SPA ativo estão listadas aqui.

  "dependencies": {
    "@adobe/aem-react-editable-components": "~1.0.4",
    "@adobe/aem-spa-component-mapping": "~1.0.5",
    "@adobe/aem-spa-page-model-manager": "~1.0.3"
  }

Como este exemplo é baseado na estrutura React, existem duas dependências específicas React que são obrigatórias no arquivo package.json:

react
 react-dom

O aem-clientlib-generator é aproveitado para tornar a criação de bibliotecas de clientes automática como parte do processo de compilação.

"aem-clientlib-generator": "^1.4.1",

Para obter mais detalhes sobre ele, acesse no GitHub aqui.

CUIDADO

A versão mínima de aem-clientlib-generator necessária é 1.4.1.

O aem-clientlib-generator está configurado no arquivo clientlib.config.js da seguinte forma.

module.exports = {
    // default working directory (can be changed per 'cwd' in every asset option)
    context: __dirname,

    // path to the clientlib root folder (output)
    clientLibRoot: "./../content/jcr_root/apps/my-react-app/clientlibs",

    libs: {
        name: "my-react-app",
        allowProxy: true,
        categories: ["my-react-app"],
        embed: ["my-react-app.responsivegrid"],
        jsProcessor: ["min:gcc"],
        serializationFormat: "xml",
        assets: {
            js: [
                "dist/**/*.js"
            ],
            css: [
                "dist/**/*.css"
            ]
        }
    }
};

Criando

Na verdade, a criação do aplicativo aproveita o Webpack para transpilação, além do gerador aem-clientlib para a criação automática da biblioteca do cliente. Portanto, o comando build será semelhante a:

"build": "webpack && clientlib --verbose"

Depois de criado, o pacote pode ser carregado para uma instância AEM.

Arquétipo de projeto do AEM

Qualquer projeto AEM deve aproveitar o AEM Project Archetype, que suporta projetos SPA usando React ou Angular e aproveita o SPA SDK.

Estrutura do aplicativo

A inclusão das dependências e a criação do aplicativo conforme descrito anteriormente o deixarão com um pacote SPA que pode ser carregado para a instância AEM.

A próxima seção deste documento o orientará sobre como um SPA em AEM é estruturado, os arquivos importantes que acionam o aplicativo e como eles trabalham juntos.

Um componente de imagem simplificado é usado como exemplo, mas todos os componentes do aplicativo são baseados no mesmo conceito.

index.js

O ponto de entrada no SPA é, claro, o arquivo index.js mostrado aqui simplificado para focar no conteúdo importante.

import ReactDOM from 'react-dom';
import App from './App';
import { ModelManager, Constants } from "@adobe/aem-spa-page-model-manager";

...

ModelManager.initialize().then((pageModel) => {
ReactDOM.render(
    <App cqChildren={pageModel[Constants.CHILDREN_PROP]} cqItems={pageModel[Constants.ITEMS_PROP]} cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]} cqPath={ModelManager.rootPath} locationPathname={ window.location.pathname }/>
, document.getElementById('page'));

});

A função principal de index.js é aproveitar a função ReactDOM.render para determinar onde o DOM deve injetar o aplicativo.

Este é um uso padrão desta função, não exclusivo para este aplicativo de exemplo.

Instanciação estática

Quando o componente é instanciado estaticamente usando o modelo de componente (por exemplo, JSX), o valor deve ser passado do modelo para as propriedades do componente.

App.js

Ao renderizar o aplicativo, index.js chama App.js, que é mostrado aqui em uma versão simplificada para se concentrar no conteúdo importante.

import {Page, withModel } from '@adobe/aem-react-editable-components';

...

class App extends Page {
...
}

export default withModel(App);

App.js serve principalmente para envolver os componentes raiz que compõem o aplicativo. O ponto de entrada de qualquer aplicativo é a página.

Page.js

Ao renderizar a página, App.js chamadas Page.js listadas aqui em uma versão simplificada.

import {Page, MapTo, withComponentMappingContext } from "@adobe/aem-react-editable-components";

...

class AppPage extends Page {
...
}

MapTo('my-react-app/components/structure/page')(withComponentMappingContext(AppPage));

Neste exemplo, a classe AppPage estende Page, que contém os métodos de conteúdo interno que podem ser usados.

O Page ingere a representação JSON do modelo de página e processa o conteúdo para envolver/decorar cada elemento da página. Mais detalhes sobre o Page podem ser encontrados no documento SPA Blueprint.

Image.js

Com a página renderizada, os componentes como Image.js, como mostrado aqui, podem ser renderizados.

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Image.css');

const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function() {
        return !this.props || !this.props.src || this.props.src.trim().length < 1;
    }
};

class Image extends Component {

    render() {
        return (<img src={this.props.src}>);
    }
}

MapTo('my-react-app/components/content/image')(Image, ImageEditConfig);

A ideia central do SPA em AEM é mapear componentes SPA para AEM componentes e atualizar o componente quando o conteúdo é modificado (e vice-versa). Consulte o documento SPA Visão geral do editor para obter um resumo deste modelo de comunicação.

MapTo('my-react-app/components/content/image')(Image, ImageEditConfig);

O método MapTo mapeia o componente SPA para o componente AEM. Ele suporta o uso de uma única string ou de uma matriz de strings.

ImageEditConfig é um objeto de configuração que contribui para ativar os recursos de criação de um componente, fornecendo os metadados necessários para o editor gerar espaços reservados

Se não houver conteúdo, os rótulos serão fornecidos como espaços reservados para representar o conteúdo vazio.

Propriedades aprovadas dinamicamente

Os dados provenientes do modelo são transmitidos dinamicamente como propriedades do componente.

Exportar conteúdo editável

Você pode exportar um componente e mantê-lo editável.

import React, { Component } from 'react';
import { MapTo } from '@adobe/aem-react-editable-components';

...

const EditConfig = {...}

class PageClass extends Component {...};

...

export default MapTo('my-react-app/react/components/structure/page')(PageClass, EditConfig);

A função MapTo retorna um Component que é o resultado de uma composição que estende o PageClass fornecido com os nomes de classe e os atributos que habilitam a criação. Esse componente pode ser exportado para ser instanciado posteriormente na marcação do aplicativo.

Quando exportado usando as funções MapTo ou withModel, o componente Page é encapsulado com um componente ModelProvider que fornece aos componentes padrão acesso à versão mais recente do modelo de página ou a um local preciso nesse modelo de página.

Para obter mais informações, consulte SPA documento Blueprint.

OBSERVAÇÃO

Por padrão, você recebe o modelo inteiro do componente ao usar a função withModel.

Compartilhando informações entre SPA componentes

É necessário que os componentes de um aplicativo de página única compartilhem informações regularmente. Há várias maneiras recomendadas de fazer isso, listadas a seguir, para aumentar a ordem de complexidade.

  • Opção 1: Centralize a lógica e a transmissão para os componentes necessários, por exemplo, usando Reagir contexto.
  • Opção 2: Compartilhe estados de componentes usando uma biblioteca de estado, como Redux.
  • Opção 3: aproveite a hierarquia de objetos personalizando e estendendo o componente de container.

Próximas etapas

Para obter um guia passo a passo para a criação de seu próprio SPA, consulte Introdução ao Editor de SPA AEM - Tutorial de Eventos WKND.

Para obter mais informações sobre como se organizar para desenvolver SPA para AEM, consulte o artigo Desenvolvimento de SPA para AEM.

Para obter mais detalhes sobre o modelo dinâmico para mapeamento de componentes e como ele funciona dentro do SPA em AEM, consulte o artigo Dynamic Model to Component Mapping for SPA.

Se você quiser implementar SPA no AEM para uma estrutura diferente de React ou Angular ou simplesmente quiser aprofundar-se em como o SDK SPA para AEM funciona, consulte o artigo SPA Blueprint.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now