Introdução SPA e Walkthrough

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 essas estruturas.

O Editor de SPA oferta uma solução abrangente para suporte a SPA no AEM. Este artigo aborda o uso de um aplicativo SPA básico para criação e mostra como ele está relacionado ao AEM subjacente SPA Editor.

Introdução

Objetivo do artigo

Este artigo apresenta os conceitos básicos de SPA antes de conduzir o leitor por uma apresentação do editor de SPA usando um aplicativo de SPA simples para demonstrar a edição básica de conteúdo. Em seguida, ele mergulha na construção da página e como o aplicativo SPA se relaciona e interage com o Editor de SPA AEM.

O objetivo desta introdução e apresentação é demonstrar a um desenvolvedor AEM por que SPA são relevantes, como eles geralmente funcionam, como um SPA é manipulado pelo editor de SPA AEM e como é diferente de um aplicativo AEM padrão.

A apresentação é baseada na funcionalidade padrão de AEM e no exemplo de aplicativo de Journal We.Retail. Devem ser cumpridos os seguintes requisitos:

• AEM versão 6.4 com service pack 2 ou mais recente
• Instale a amostra do aplicativo We.Retail Journal disponível no GitHub aqui.

O que é um SPA?

Um aplicativo de página única (SPA) é diferente de uma página convencional, pois é renderizado no lado do cliente e é principalmente controlado pelo Javascript, contando com chamadas do Ajax para carregar dados e atualizar dinamicamente a página. A maioria ou todo o conteúdo é recuperado uma vez em um único carregamento de página com recursos adicionais carregados de forma assíncrona, conforme necessário, com base na interação do usuário com a página.

Isso reduz a necessidade de atualizações de página e apresenta uma experiência ao usuário que é simples, rápida e se parece mais com uma experiência de aplicativo nativa.

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

Por que um SPA?

Ao ser mais rápido, fluido e mais parecido com um aplicativo nativo, um SPA torna-se uma experiência muito atraente não apenas para o visitante da página da Web, mas também para profissionais de marketing e desenvolvedores devido à natureza de como o SPA funciona.

Visitantes

• Os visitantes querem experiências nativas quando interagem com o conteúdo.
• Há dados claros de que quanto mais rápida uma página, mais provável uma conversão ocorrerá.

Profissionais de marketing

• Os profissionais de marketing querem oferta de experiências ricas e nativas para incentivar os visitantes a se envolverem totalmente com o conteúdo.
• A personalização pode tornar essas experiências ainda mais atraentes.

Desenvolvedores

• Os desenvolvedores querem uma separação clara entre as preocupações do conteúdo e da apresentação.
• A separação nítida torna o sistema mais extensível e permite o desenvolvimento de front-end independente.

Como funciona um SPA?

A ideia principal por trás de uma SPA é que as chamadas e a dependência em um servidor são reduzidas para minimizar os atrasos causados pelas chamadas do servidor, de modo que a SPA se aproxime da capacidade de resposta de um aplicativo nativo.

Em uma página da Web tradicional e sequencial, somente os dados necessários para a página imediata são carregados. Isso significa que quando o visitante se move para outra página, o servidor é chamado para os recursos adicionais. Chamadas adicionais podem ser necessárias, já que o visitante interage com elementos na página. Essas chamadas múltiplas podem dar uma sensação de atraso ou atraso, pois a página precisa acompanhar as solicitações do visitante.

Para uma experiência mais fluida, que se aproxima do que um visitante espera de aplicativos móveis nativos, um SPA carrega todos os dados necessários para o visitante na primeira carga. Embora isso possa demorar um pouco mais no início, elimina a necessidade de chamadas de servidor adicionais.

Ao renderizar no lado do cliente, o elemento da página reage mais rapidamente e as interações com a página pelo visitante são imediatas. Quaisquer dados adicionais que possam ser necessários são chamados de forma assíncrona para maximizar a velocidade da página.

Experiência de edição de conteúdo com SPA

Quando um SPA é criado para aproveitar o AEM SPA Editor, o autor do conteúdo não percebe diferença ao editar e criar conteúdo. Funcionalidade de AEM comum disponível e nenhuma alteração no fluxo de trabalho do autor é necessária.

1. Edite o aplicativo Journal We.Retail no AEM.

   https://localhost:4502/editor.html/content/we-retail-journal/react.html

   

2. Selecione um componente de cabeçalho e observe que uma barra de ferramentas aparece como para qualquer outro componente. Selecione Editar.

   

3. Edite o conteúdo como normal no AEM e observe que as alterações são persistentes.

   

   OBSERVAÇÃO

   Consulte SPA Visão geral do editor para obter mais informações sobre o editor de texto no local e SPA.

4. Use o Navegador de ativos para arrastar e soltar uma nova imagem em um componente de imagem.

   

5. A alteração é persistente.

   

Ferramentas de criação adicionais, como arrastar e soltar componentes adicionais na página, reorganizar componentes e modificar o layout, são suportadas como em qualquer aplicativo que não seja SPA.

Aplicativos SPA e o editor de SPA AEM

Experimentar como um SPA se comporta para o usuário final e, em seguida, inspecionar a página de SPA ajuda a entender melhor como um aplicativo SAP funciona com o Editor de SPA na AEM.

Uso de um aplicativo SPA

1. Carregue o aplicativo de Journal We.Retail no servidor de publicação ou usando a opção Visualização como Publicado do menu Informações da página no editor de páginas.

   /content/we-retail-journal/react.html

   

   Observe a estrutura das páginas, incluindo navegação para páginas filhas, widget meteorológico e artigos.

2. Navegue até uma página secundária usando o menu e veja se a página é carregada imediatamente sem a necessidade de uma atualização.

   

3. Abra as ferramentas integradas do desenvolvedor do navegador e monitore a atividade da rede à medida que você navega nas páginas secundárias.

   

   Há muito pouco tráfego à medida que você muda de página para página no aplicativo. A página não é recarregada e somente as novas imagens são solicitadas.

   O SPA gerencia o conteúdo e o roteamento totalmente no lado do cliente.

Então, se a página não é recarregada ao navegar pelas páginas secundárias, como ela é carregada?

A próxima seção, Carregando um aplicativo SPA, aprofunda os mecanismos de carregamento do SPA e como o conteúdo pode ser carregado de forma síncrona e assíncrona.

Carregando um aplicativo SPA

1. Se ainda não tiver sido carregado, carregue o aplicativo Journal We.Retail no servidor de publicação ou usando a opção Visualização como Publicado do menu Informações da página no editor de páginas.

   /content/we-retail-journal/react.html

   

2. Use a ferramenta integrada do seu navegador para visualização da fonte da página.

3. Observe que o conteúdo da fonte é extremamente limitado.

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

   A página não tem nenhum conteúdo em seu corpo. Ele é formado principalmente por folhas de estilo e uma chamada para um script React, we-retail-journal-react.js.

   Esse script React é o principal driver desse aplicativo e é responsável pela renderização de todo o conteúdo.

4. Use as ferramentas incorporadas do seu navegador para inspecionar a página. Consulte o conteúdo do DOM totalmente carregado.

   

5. Alterne para a guia Rede no Inspetor e recarregue a página.

   Ignorando solicitações de imagem, observe que os recursos primários carregados para a página são a própria página, o CSS, o Javascript React, suas dependências, bem como os dados JSON para a página.

   

6. Carregue react.model.json em uma nova guia.

   /content/we-retail-journal/react.model.json

   

   O AEM SPA Editor aproveita AEM Content Services para fornecer todo o conteúdo da página como um modelo JSON.

   Ao implementar interfaces específicas, os Modelos Sling fornecem as informações necessárias para o SPA. O delivery dos dados JSON é delegado para baixo em cada componente (da página, ao parágrafo, ao componente, etc.).

   Cada componente escolhe o que expõe e como é renderizado (no lado do servidor com HTL ou no lado do cliente com React). É claro que este artigo foca na renderização do lado do cliente com React.

7. O modelo também pode agrupar as páginas para que elas sejam carregadas de forma síncrona, reduzindo o número de recarregamentos de página necessários.

   No exemplo do Journal We.Retail, as páginas home, blog e aboutus são carregadas de forma síncrona, uma vez que os visitantes visitam geralmente todas essas páginas. No entanto, a página weather é carregada de forma assíncrona, já que os visitantes têm menos probabilidade de visitá-la.

   Este comportamento não é obrigatório e é totalmente definível.

   

8. Para visualização dessa diferença de comportamento, recarregue a página e limpe a atividade da rede do inspetor. Navegue até o blog e sobre as páginas de nós no menu da página e veja se não há atividade de rede reportada.

   Navegue até a página do tempo e veja se weather.model.json é chamado de forma assíncrona.

   

Interação com o Editor de SPA

Usando a amostra do aplicativo Journal We.Retail, fica claro como o aplicativo se comporta e é carregado quando publicado, aproveitando os serviços de conteúdo para o delivery de conteúdo JSON, bem como o carregamento assíncrono de recursos.

Além disso, para o autor do conteúdo, a criação de conteúdo usando um editor de SPA é perfeita dentro da AEM.

Na seção a seguir, exploraremos o contrato que permite ao Editor de SPA relacionar componentes dentro do SPA a componentes AEM e obter essa experiência de edição contínua.

1. Carregue o aplicativo Journal We.Retail no editor e alterne para o modo Pré-visualização.

   https://localhost:4502/editor.html/content/we-retail-journal/react.html

2. Usando as ferramentas de desenvolvedor incorporadas do seu navegador, inspecione o conteúdo da página. Usando a ferramenta de seleção, selecione um componente editável na página e visualização os detalhes do elemento.

   Observe que o componente tem um novo atributo de dados data-cq-data-path.

   

   Por exemplo

   data-cq-data-path="root/responsivegrid/paragraph_1

   Esses caminhos permitem a recuperação e a associação do objeto de configuração de contexto de edição de cada componente.

   Este é o único atributo de marcação necessário para que o editor reconheça isso como um componente editável dentro do SPA. Com base nesse atributo, o Editor de SPA determinará qual configuração editável está associada ao componente, para que o quadro, a barra de ferramentas etc. estejam corretos. está carregado.

   Alguns nomes de classe específicos também são adicionados para marcar espaços reservados e para a funcionalidade de arrastar e soltar do ativo.

   OBSERVAÇÃO

   Essa é uma alteração no comportamento de páginas renderizadas do lado do servidor no AEM, onde há um elemento cq inserido para cada componente editável.

   Essa abordagem no SPA elimina a necessidade de inserir elementos personalizados, contando somente com um atributo de dados adicional, tornando a marcação mais simples para o desenvolvedor principal.

Próximas etapas

Agora que você entende a experiência de edição de SPA em AEM e como um SPA se relaciona ao Editor SPA, aprofunde o entendimento de como um SPA é criado.

• Introdução ao SPA no AEMmostra como um SPA básico foi criado para funcionar com o SPA Editor no AEM
• SPA Editor Visão geral aprofunda o modelo de comunicação entre AEM e o SPA.
• Desenvolver SPA para o AEM descreve como envolver desenvolvedores front-end para desenvolver uma SPA para AEM, bem como como como SPA interagir com AEM arquitetura.