Nesta continuação opcional do AEM Jornada de desenvolvedor sem periféricos, saiba como o AEM pode combinar a entrega sem periféricos com os recursos tradicionais de CMS de pilha completa e como criar SPA editáveis usando AEM estrutura SPA Editor, bem como integrar SPA externos, permitindo recursos de edição, conforme necessário.
Nesse momento, você deve ter completado o jornada do desenvolvedor sem periféricos do AEM e compreender as noções básicas de entrega sem interface no AEM incluindo uma compreensão de:
Então agora você já foi ao vivo com seu primeiro projeto sem Cabeça de AEM ou tem todo o conhecimento que é necessário para isso. Parabéns.
Então por que você está lendo essa continuação adicional e opcional da jornada? Provavelmente você se lembra disso no Introdução discutimos brevemente como o AEM não só suporta o delivery sem interface e os modelos de pilha completa tradicionais, como também pode suportar modelos híbridos que combinam as vantagens de ambos. Embora não o modelo tradicional sem cabeça, 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 (SPA) que são editáveis na AEM. Dessa forma, você pode criar conteúdo e enviá-lo sem interrupções para um SPA, mas 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 Editor de SPA AEM. Após ler este documento, você deve:
Há vários requisitos antes de começar a trabalhar com SPA no AEM.
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.
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.
Para obter uma descrição completa dos SPA e por que usá-los, consulte a recursos adicionais para obter links para mais documentação detalhada.
O desenvolvimento de aplicativos de página única no AEM parte do princípio de que o desenvolvedor front-end cumpre as práticas recomendadas padrão ao criar um SPA. Se, como desenvolvedor front-end, você seguir essas práticas recomendadas gerais, bem como alguns princípios específicos de AEM, seu SPA funcionará com AEM e seus recursos de criação de conteúdo.
Para obter uma descrição completa de como o AEM manipula SPA, consulte o recursos adicionais para obter links para mais documentação detalhada.
Sites criados usando estruturas SPA comuns, como o React e o Angular, carregam seu conteúdo via JSON dinâmico e não fornecem a estrutura de HTML necessária para o Editor de página AEM poder colocar controles de edição.
Para habilitar a edição de SPA no AEM, é necessário um mapeamento entre a saída JSON do SPA e o modelo de conteúdo no repositório AEM para salvar as alterações no conteúdo.
SPA suporte no AEM introduz uma fina camada JS que interage com o código JS SPA quando carregado no Editor de páginas com o qual os eventos podem ser enviados e o local dos controles de edição pode ser ativado para permitir a edição no contexto. Esse recurso tem como base o conceito de Ponto de extremidade da API dos 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 de AEM, consulte o recursos adicionais para obter links para mais documentação detalhada.
Se você tiver um SPA existente, o AEM suporta a incorporação no AEM para que fique visível para os autores de conteúdo no editor de AEM. Isso pode ser muito útil para visualizar o conteúdo que eles estão criando por meio dos Fragmentos de conteúdo no contexto do aplicativo final, onde ele será consumido.
Além disso, com apenas pequenas alterações, é possível habilitar determinada capacidade de edição para o SPA externo no editor de 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 o recursos adicionais para obter links para mais documentação detalhada.
Para começar a desenvolver seu próprio SPA para AEM, reveja os seguintes documentos:
Se precisar adaptar um SPA existente para usá-lo no AEM, revise os seguintes documentos:
Veja abaixo para recursos adicionais que pode aprofundar SPA tópicos em AEM.
Veja a seguir alguns recursos adicionais que explicam melhor alguns conceitos mencionados neste documento.