Desenvolvimento de front-end com o Arquétipo de projeto do AEM

Última atualização: 12 de julho de 2024

Criado para:

  • Desenvolvedor
  • Administrador

O Arquétipo de projeto do AEM inclui um mecanismo de build de front-end opcional e dedicado com base no Webpack. O módulo ui.frontend torna-se, portanto, o local central para todos os recursos de front-end do projeto, incluindo arquivos JavaScript e CSS. Para aproveitar ao máximo esse recurso útil e flexível, é importante entender como o desenvolvimento de front-end se encaixa em um projeto do AEM.

Este documento se concentra nos padrões de uso geral do módulo de criação de front-end e no que ele faz por você. Para obter opções de criação detalhadas e instruções técnicas, consulte a documentação no repositório do GitHub do arquétipo.

TIP
O Arquétipo de projeto do AEM mais recente e a documentação técnica associada podem ser encontrados no GitHub.

Desenvolvimento de front-end e back-end do AEM

Em termos simplificados, pode-se dizer que os projetos do AEM são constituídos por duas partes distintas, mas relacionadas:

  • Desenvolvimento de back-end, que orienta a lógica do AEM e produz bibliotecas Java, serviços OSGi etc.
  • Desenvolvimento de front-end, que direciona a apresentação e o comportamento do site resultante e produz bibliotecas JavaScript e CSS

Uma vez que esses dois processos de desenvolvimento se concentram em diferentes partes do projeto, o desenvolvimento de back-end e front-end pode ocorrer paralelamente.

diagrama de fluxo de trabalho de front-end

No entanto, qualquer projeto final tem de utilizar os resultados de ambos os esforços de desenvolvimento, ou seja, tanto de back-end como de front-end.

Escolha da marcação

Qualquer que seja o fluxo de trabalho de desenvolvimento do front-end que você decida implementar para seu projeto, os desenvolvedores de back-end e os de front-end devem primeiro concordar sobre a marcação. Normalmente, o AEM define a marcação, que é fornecida pelos componentes principais. No entanto, isso pode ser personalizado, caso necessário.

Possíveis fluxos de trabalho de desenvolvimento de front-end

O módulo de build de front-end é uma ferramenta útil e flexível, mas não impõe nenhuma opinião específica sobre como ele deve ser usado. Veja a seguir dois exemplos de uso possível, mas suas necessidades de projeto individuais podem ditar outros modelos de uso.

Uso do Servidor de desenvolvimento estático do Webpack

Com o Webpack, é possível criar estilos e desenvolver com base na saída estática de páginas da Web no módulo ui.front-end.

  1. Pré-visualize a página no AEM usando o modo de pré-visualização da página ou transmitindo wcmmode=disabled no URL
  2. Visualize a fonte da página e salve como HTML estático no módulo ui.front-end
  3. Inicie o Webpack e comece a criar o estilo e a gerar o JavaScript e o CSS necessários
  4. Execute o npm run dev para gerar clientlibs

Nesse fluxo, um desenvolvedor do AEM pode executar as etapas um e dois e transmitir o HTML estático para o desenvolvedor de front-end que se desenvolve com base na saída HTML do AEM.

TIP
Também é possível usar a Biblioteca de componentes para capturar amostras da saída de marcação de cada componente para funcionar no nível do componente, em vez do nível da página.