Nesta seção opcional da jornada de desenvolvedor headless do AEM, saiba como o AEM pode combinar a entrega headless com os recursos tradicionais de CMS de pilha completa e como criar SPAs editáveis usando a estrutura do editor de SPA do AEM, bem como integrar SPAs externos, habilitando recursos de edição conforme necessário.
A esta altura, você deve ter completado toda a Jornada de desenvolvedor headless do AEM e compreendido as noções básicas de entrega headless no AEM, e deve entender sobre:
Então, atualmente você já ativou seu primeiro projeto do AEM Headless ou tem todo o conhecimento necessário para isso. Parabéns!
Sendo assim, por que você está lendo essa seção adicional e opcional da jornada? Provavelmente você se lembra que na Introdução discutimos brevemente sobre como o AEM não apenas é compatível com a entrega headless e os modelos de pilha completa tradicionais, mas também permite o uso de modelos híbridos que combinam as vantagens de ambos. Embora não sejam o modelo tradicional para headless, esses modelos híbridos podem oferecer uma flexibilidade sem precedentes a certos projetos.
Este artigo baseia-se no seu conhecimento do AEM Headless, explorando detalhadamente como você pode criar seus próprios aplicativos de página única (SPAs) que são editáveis no AEM. Dessa forma, você pode criar conteúdo e enviá-lo através do método headless para um SPA, enquanto esse SPA permanece editável no AEM.
Este documento ajuda você a entender como aplicativos de página única são desenvolvidos usando a estrutura do editor de SPA do AEM. Depois de ler este documento, você deverá:
Há uma série de requisitos antes de começar a trabalhar com SPAs no AEM.
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 do 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.
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.
Para obter uma descrição completa dos SPAs e por que usá-los, consulte a seção de recursos adicionais que contém links para uma documentação mais detalhada.
O desenvolvimento de aplicativos de página única no AEM parte do princípio de que o desenvolvedor de front-end segue as práticas recomendadas padronizadas ao criar um SPA. Se, como desenvolvedor de front-end, você seguir essas práticas recomendadas gerais, bem como alguns princípios específicos do AEM, seu SPA funcionará bem com o AEM e seus recursos de criação de conteúdo.
Para obter uma descrição completa de como o AEM lida com SPAs, consulte a seção de recursos adicionais que fornece links para uma documentação mais detalhada.
Sites criados usando estruturas de SPA comuns, como React e Angular, carregam seu conteúdo dinamicamente via JSON e não fornecem a estrutura de HTML necessária para que o editor de página do AEM possa estabelecer controles de edição.
Para habilitar a edição de SPAs no AEM, é necessário um mapeamento entre a saída JSON do SPA e o modelo de conteúdo no repositório do AEM para salvar as alterações no conteúdo.
A compatibilidade com SPA no AEM apresenta uma camada de JS sutil que interage com o código JS do SPA quando ele é carregado no editor de página através do qual os eventos podem ser enviados, sendo assim, o local dos controles de edição pode ser ativado para permitir a edição de acordo com o contexto. Esse recurso tem como base o conceito do ponto de acesso da API de serviços de conteúdo, pois o conteúdo do SPA precisa ser carregado por meio dos serviços de conteúdo.
Para obter uma descrição completa do editor de SPA do AEM, consulte a seção de recursos adicionais que fornece links para uma documentação mais detalhada.
Se você tiver um SPA existente, o AEM permite a sua integração para que ele seja disponibilizado aos autores de conteúdo no Editor AEM. Isso pode ser muito útil para que eles possam visualizar o conteúdo que estão criando por meio de fragmentos de conteúdo no contexto do aplicativo final, onde ele será consumido.
Além disso, com algumas pequenas alterações, é possível conceder determinada capacidade de edição para o SPA externo no Editor AEM.
O componente RemotePage permite a renderização de um SPA externo no AEM.
Para obter uma descrição completa de como tornar um SPA externo editável no AEM, consulte a seção de recursos adicionais que fornece links para uma documentação mais detalhada.
Para começar a desenvolver seus próprios SPAs para o AEM, revise os seguintes documentos:
Se precisar adaptar um SPA existente para usá-lo no AEM, revise os seguintes documentos:
Veja abaixo os recursos adicionais que abordam tópicos relacionados a SPA no AEM com mais detalhes.
Veja a seguir alguns recursos adicionais que explicam melhor alguns conceitos mencionados neste documento.