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.

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.

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.

Visitantes

Profissionais de marketing

Desenvolvedores

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.

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.

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.

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.

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

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

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.

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.