Introdução e passo a passo do SPA spa-introduction-and-walkthrough

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

O editor de SPA oferece uma solução abrangente para permitir o uso de SPAs no AEM. Este artigo aborda o uso de um SPA básico para criação e mostra como ele se relaciona ao editor de SPA integrado do AEM.

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

Introdução introduction

Objetivo do artigo article-objective

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

A meta desta introdução e passo a passo é demonstrar a um desenvolvedor do AEM por que SPAs são relevantes, como eles geralmente funcionam, como um SPA é manipulado pelo editor de SPA do AEM e como ele é diferente de um aplicativo padrão do AEM.

Requisitos requirements

O passo a passo é baseado na funcionalidade padrão do AEM e no aplicativo de exemplo Projeto SPA WKND. Para acompanhar esse passo a passo, você deve ter o seguinte disponível.

CAUTION
Este documento usa o Aplicativo WKND Spa Project apenas para fins de demonstração. Não use para nenhum trabalho de projeto.
Qualquer projeto AEM deve usar o Arquétipo de projeto AEM, que apoia projetos SPA usando o React ou o Angular e usa o SDK do SPA.

O que é um SPA? what-is-a-spa

Um aplicativo de página única (SPA) é diferente de uma página convencional, no sentido de que ele é renderizado no lado do cliente e orientado principalmente por Javascript, dependendo das chamadas Ajax para carregar dados e atualizar dinamicamente a página. A maior parte ou todo o conteúdo é recuperado uma vez em um único carregamento de página, com os recursos adicionais sendo 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 do AEM permite que desenvolvedores de front-end criem SPAs que possam ser integrados a um site do AEM, possibilitando que os autores de conteúdo editem o conteúdo do SPA tão facilmente quanto qualquer outro conteúdo do AEM.

Por que um SPA? why-a-spa

Devido a ser mais rápido, fluido e semelhante a um aplicativo nativo, um SPA apresenta uma experiência muito atrativa não apenas para o visitante da página da web, mas também para profissionais de marketing e desenvolvedores, devido à natureza do funcionamento dos SPAs.

screen_shot_2018-08-20at135550

Visitantes

  • Os visitantes desejam experiências nativas quando interagem com o conteúdo.
  • Dados claros informam que quanto mais rapidamente uma página é exibida, maior é a possibilidade de uma conversão.

Profissionais de marketing

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

Desenvolvedores

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

Como funciona um SPA? how-does-a-spa-work

A ideia principal por trás de um 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 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. Chamadas adicionais podem ser necessárias conforme o visitante interage com elementos na página. Essas várias chamadas podem criar uma sensação de defasagem ou atraso na página, pois ela precisa acompanhar as solicitações do visitante.

screen_shot_2018-08-20at140449

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

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

NOTE
Para obter detalhes técnicos sobre como o SPA funciona no AEM, consulte o artigo SPA Introdução ao AEM.
Para obter mais informações sobre design, arquitetura e fluxo de trabalho técnico do Editor de SPA, consulte o artigo Visão geral do editor de SPA.

Experiência de edição de conteúdo com SPA content-editing-experience-with-spa

Quando um SPA AEM é criado para usar o Editor de SPA, o autor de conteúdo não percebe diferença ao editar e criar conteúdo. A funcionalidade comum do AEM pode ser utilizada e nenhuma alteração no fluxo de trabalho do autor é necessária.

  1. Edite o aplicativo Projeto SPA WKND no AEM.

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

    Etapa 1

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

    Etapa 2

  3. Edite o conteúdo como de costume dentro do AEM. As alterações são persistentes.

    Etapa 3

    note note
    NOTE
    Consulte a Visão geral do editor de SPA para obter mais informações sobre o editor de texto in-loco e o SPA.
  4. Use o Navegador de ativos para arrastar e soltar uma nova imagem em um componente de imagem.

    Etapa 4

  5. A alteração é mantida.

    Etapa 5

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

NOTE
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: SPAs e o editor de SPA do AEM.

SPAs e o editor de SPA do AEM spa-apps-and-the-aem-spa-editor

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

Usando um SPA using-an-spa-application

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

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

    Etapa 1

    Observe a estrutura das páginas, incluindo a navegação para páginas secundárias, widget de tempo e artigos.

  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.

    Etapa 2

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

    Etapa 3

    Há muito pouco tráfego ao mudar de uma página para outra 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.

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

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

Carregar um SPA loading-an-spa-application

  1. Se ainda não o tiver carregado, carregue o aplicativo Projeto SPA WKND no servidor de publicação ou usando a opção Exibir como publicado, no menu Informações da página do editor de páginas.

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

    Etapa 1

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

  3. O conteúdo da fonte é extremamente limitado.

    • A página não possui conteúdo em seu corpo. Ele é composto principalmente de folhas de estilo e uma chamada para vários scripts, como clientlib-react.min.js.
    • Esses scripts são os principais acionadores desse aplicativo e são responsáveis por renderizar 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.

    Etapa 4

  5. Alterne para a Rede das ferramentas do desenvolvedor e recarregue a página.

    Ignorando solicitações de imagem, os principais recursos carregados para a página são a própria página, CSS, o JavaScript React, suas dependências e dados JSON para a página.

    Etapa 5

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

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

    Etapa 6

    O editor de SPA do AEM utiliza os serviços de conteúdo do AEM 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 de cima para baixo a cada componente (da página, ao parágrafo, ao componente, e assim por diante).

    Cada componente escolhe o que expõe e como é renderizado (do lado do servidor com HTL ou do lado do cliente com React). Este artigo se concentra 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 Projeto SPA 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 configurável.

    Etapa 7

  8. Para visualizar essa diferença de comportamento, recarregue a página e limpe a atividade de rede das ferramentas do desenvolvedor. Navegue para page-1 no menu da página e veja que a única atividade de rede é uma solicitação de imagem da page-1. A page-1 em si não precisa ser carregada.

    Etapa 8

Interação com o editor de SPA interaction-with-the-spa-editor

Usando o aplicativo de amostra Projeto SPA WKND, fica claro como o aplicativo se comporta e é carregado quando publicado, usando serviços de conteúdo para entrega de conteúdo JSON e carregamento assíncrono de recursos.

Além disso, para o autor de conteúdo, a criação de conteúdo no editor de SPA é realizada sem interrupções no AEM.

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

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

    http://<host>:<port>/editor.html/content/wknd-spa-react/us/en/home.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 visualize os detalhes do elemento.

    O componente tem um novo atributo de dados data-cq-data-path.

    Etapa 2

    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 correto, a barra de ferramentas e assim por diante sejam carregados.

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

    note note
    NOTE
    Isso é uma mudança de comportamento das páginas renderizadas do lado do servidor no AEM, em que há uma cq elemento inserido para cada componente editável.
    Essa abordagem no SPA elimina a necessidade de inserir elementos personalizados, confiando apenas em um atributo de dados adicional, tornando a marcação mais simples para o desenvolvedor de front-end.

Próximas etapas next-steps

Agora que você entende a experiência de edição de SPA no AEM e como um SPA se relaciona ao editor de SPA, aprofunde-se ainda mais para entender como um SPA é criado.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2