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.
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).
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:
Este documento usa o Aplicativo de Journal We.Retail apenas para fins de demonstração. Não deve ser utilizado para qualquer trabalho de projeto.
Qualquer projeto AEM deve aproveitar o AEM Project Archetype, que suporta projetos SPA usando React ou Angular e aproveita o SPA SDK.
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.
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
Profissionais de marketing
Desenvolvedores
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.
Para obter detalhes técnicos sobre como SPA trabalhar no AEM, consulte o artigo Introdução ao SPA em AEM.
Para uma análise mais detalhada do design, arquitetura e fluxo de trabalho técnico do Editor de SPA, consulte o artigo SPA Visão geral do Editor.
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.
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:
Edite o aplicativo Journal We.Retail no AEM.
https://localhost:4502/editor.html/content/we-retail-journal/react.html
Selecione um componente de cabeçalho e observe que uma barra de ferramentas aparece como para qualquer outro componente. Selecione Editar.
Edite o conteúdo como normal no AEM e observe que as alterações são persistentes.
Consulte SPA Visão geral do editor para obter mais informações sobre o editor de texto no local e SPA.
Use o Navegador de ativos para arrastar e soltar uma nova imagem em um componente de imagem.
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.
O Editor de SPA não modifica o DOM do aplicativo. O próprio SPA é responsável pelo DOM.
Para ver como isso funciona, prossiga para a próxima seção deste artigo SPA Aplicativos e o AEM SPA Editor.
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.
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.
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.
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.
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
Use a ferramenta integrada do seu navegador para visualização da fonte da página.
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.
Use as ferramentas incorporadas do seu navegador para inspecionar a página. Consulte o conteúdo do DOM totalmente carregado.
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.
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.
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.
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.
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.
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
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.
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.
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.