SPA Introdução e Apresentação

Aplicativos de página única (SPAs) podem oferecer experiências interessantes para usuários de sites. Os desenvolvedores desejam criar sites usando estruturas SPA e os autores desejam editar o conteúdo com facilidade no AEM para um site criado usando essas estruturas.

O Editor de SPA oferece uma solução abrangente para oferecer suporte à 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 Editor SPA subjacente.

Introdução

Objetivo do artigo

Este artigo apresenta os conceitos básicos de SPA antes de levar 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 de SPA se relaciona e interage com o Editor de SPA de AEM.

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

A apresentação é baseada na funcionalidade de AEM padrão e no aplicativo de projeto SPA WKND de amostra. Para seguir em frente, baixe e instale o aplicativo SPA projeto WKND de amostra do GitHub aqui.

ATENÇÃO

Este documento usa o aplicativo SPA projeto WKND somente para fins de demonstração. Não deve ser utilizado para qualquer trabalho de projeto.

DICA

Qualquer projeto AEM deve aproveitar o AEM Arquétipo de projeto, que suporta projetos SPA usando React ou Angular e aproveita o SDK SPA.

O que é um SPA?

Um aplicativo de página única (SPA) é diferente de uma página convencional, na medida em que é renderizado no cliente e é principalmente orientado por Javascript, dependendo das 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 é contínua, rápida e se parece mais com uma experiência de aplicativo nativo.

O Editor de SPA de AEM permite que desenvolvedores de front-end criem SPA que possam ser integradas a um site de AEM, permitindo que os autores de conteúdo editem o conteúdo de SPA da mesma forma que 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.

benefícios SPA

Visitantes

  • Os visitantes desejam experiências nativas quando interagem com o conteúdo.
  • Há dados claros de que quanto mais rapidamente uma página for exibida, mais provavelmente ocorrerá uma conversão.

Profissionais de marketing

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

Desenvolvedores

  • Os desenvolvedores desejam uma separação clara das preocupações entre conteúdo e apresentação.
  • A separação limpa torna o sistema mais extensível e permite um desenvolvimento front-end independente.

Como funciona um SPA?

A ideia principal por trás de um SPA é que as chamadas e a dependência em um servidor sejam reduzidas para minimizar os atrasos causados pela latência do servidor, de modo que o 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. Pode ser necessário realizar chamadas adicionais, pois o visitante interage com elementos na página. Essas várias chamadas podem dar uma sensação de atraso ou atraso, pois a página precisa acompanhar as solicitações do visitante.

Experiências sequenciais versus fluidas

Para uma experiência mais fluida, que se aproxima do que um visitante espera de aplicativos móveis e 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, os elementos da página reagem 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.

DICA

Para obter detalhes técnicos sobre como SPA trabalhar no AEM, consulte os artigos:

Para uma análise mais detalhada do design, arquitetura e fluxo de trabalho técnico do Editor de SPA, consulte o artigo:

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

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

  1. Edite o aplicativo SPA projeto WKND no AEM.

    http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html

    Página inicial do projeto SPA WKND

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

    Selecionar componente de texto

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

    Editar texto

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

    Soltar um ativo de imagem

  5. A alteração é persistente.

    Imagem persistente

Outras ferramentas de criação, como arrastar e soltar componentes adicionais na página, reorganizar componentes e modificar o layout, são compatíveis como em qualquer aplicativo AEM que não seja SPA.

OBSERVAÇÃO

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 Editor SPA.

Aplicativos SPA e o Editor de SPA AEM

Usar o comportamento de um SPA 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 em AEM.

Uso de um aplicativo SPA

  1. Carregue o aplicativo SPA projeto WKND no servidor de publicação ou usando a opção Exibir como publicado do menu Informações da página no editor de páginas.

    http://<host>:<port>/content/wknd-spa-react/us/en/home.html

    Visualização da página inicial do Projeto SPA WKND

    Observe a estrutura das páginas, incluindo a navegação para páginas filhas, menu e cartões de artigo.

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

    WKND SPA Project Página 1

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

    Atividade de rede

    Há muito pouco tráfego ao mover 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.

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

A próxima seção, Loading a SPA Application, 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 SPA projeto WKND no servidor de publicação ou usando a opção Exibir como publicado do menu Informações da página no editor de páginas.

    http://<host>:<port>/content/wknd-spa-react/us/en/home.html

    Pré-visualização SPA projeto WKND

  2. Use a ferramenta incorporada do seu navegador para visualizar a fonte da página.

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

    • A página não tem conteúdo em seu corpo. Ele é composto principalmente de folhas de estilos e uma chamada para vários scripts, como clientlib-react.min.js.
    • Esses scripts são os principais drivers desse aplicativo e são responsáveis pela renderização de todo o conteúdo.
  4. Use as ferramentas internas do seu navegador para inspecionar a página. Veja o conteúdo do DOM totalmente carregado.

    DOM do projeto SPA WKND

  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 React Javascript, suas dependências, bem como dados JSON para a página.

    WKND SPA atividade de rede do projeto

  6. Carregue o home.model.json em uma nova guia.

    http://<host>:<port>/content/wknd-spa-react/us/en/home.model.json

    JSON da página inicial do Projeto SPA WKND

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

    Ao implementar interfaces específicas, os Modelos do Sling fornecem as informações necessárias para o SPA. A entrega dos dados JSON é delegada em baixo a 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 ou Angular). Este artigo foca na renderização do lado do cliente com o 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 aplicativo SPA projeto WKND, as páginas home, page-1, page-2 e page-3 são carregadas de forma síncrona, já que os visitantes normalmente visitam todas essas páginas.

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

    WKND SPA Agrupamento de itens do projeto

  8. Para visualizar essa diferença de comportamento, recarregue a página home e limpe a atividade de rede do inspetor. Navegue até page-1 no menu da página e veja que a única atividade de rede é uma solicitação para a imagem de page-1. page-1 ela mesma não precisa carregar.

    WKND SPA Projeto página-1 atividade de rede

Interação com o Editor de SPA

Usando o exemplo de aplicativo WKND SPA Project, está claro como o aplicativo se comporta e é carregado quando publicado, aproveitando os serviços de conteúdo para a entrega de conteúdo JSON, bem como o carregamento assíncrono de recursos.

Além disso, para o autor de conteúdo, a criação de conteúdo usando um editor de SPA é contínua no AEM.

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

  1. Carregue o aplicativo SPA Projeto WKND no editor e alterne para o modo Visualização.

    http://<host>:<port>/editor.html/content/wknd-spa-react/us/en/home.html

  2. Usando as ferramentas do 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 exiba os detalhes do elemento.

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

    Inspecionando elementos SPA projeto WKND

    Por exemplo

    data-cq-data-path="/content/wknd-spa-react/us/en/home/jcr:content/root/responsivegrid/text

    Esse caminho permite a recuperação e a associação do objeto de configuração de contexto de edição de cada componente.

    Esse é o único atributo de marcação necessário para que o editor reconheça esse componente como editável no 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. é 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

    Esse comportamento difere das páginas renderizadas do lado do servidor no AEM, onde há um elemento cq inserido para cada componente editável.
    Essa abordagem no Editor de SPA remove a necessidade de inserir elementos personalizados, confiando apenas em um atributo de dados adicional, tornando a marcação mais simples para o desenvolvedor principal.

Cabeça e Sem Cabeça em AEM

SPA pode ser ativado com níveis flexíveis de integração dentro do AEM incluindo SPA desenvolvido e mantido fora do AEM. Além disso, SPA pode ser aproveitado no AEM, além de usar AEM para fornecer conteúdo a endpoints adicionais sem interrupções.

DICA

Consulte o documento Cabeçalho e Sem Cabeça em AEM para obter mais informações.

Próximas etapas

Agora que você entende a experiência de edição de SPA no AEM e como uma SPA se relaciona ao Editor de SPA, aprofunde-se para entender como uma SPA é criada.

Nesta página