Desenvolvimento de front-end com o Arquétipo de projeto do AEM front-end
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.
Desenvolvimento de front-end e back-end do AEM front-end-back-end
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.
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 determining-markup
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 possible-workflows
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 using-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.
- Pré-visualize a página no AEM usando o modo de pré-visualização da página ou transmitindo
wcmmode=disabledno URL - Visualize a fonte da página e salve como HTML estático no módulo ui.front-end
- Inicie o Webpack e comece a criar o estilo e a gerar o JavaScript e o CSS necessários
- Execute o
npm run devpara 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.
Uso do Storybook using-storybook
Com o Storybook você pode executar mais desenvolvimento atômico de front-end. Embora o Storybook não esteja incluído no Arquétipo de projeto do AEM, você pode instalá-lo e armazenar seus artefatos do Storybook no módulo ui.frontend. Quando tudo estiver pronto para ser testado no AEM, eles podem ser implantados como clientlibs executando o npm run dev.
Visão geral das clientlibs clientlibs
O módulo de front-end é disponibilizado usando uma clientlib do AEM.. Ao executar o script de criação do NPM, o aplicativo é criado e o pacote aem-clientlib-generator pega a saída de build resultante e a transforma em uma clientlib.
Uma clientlib consistirá nos seguintes arquivos e diretórios:
css/: Arquivos CSS que podem ser solicitados no HTMLcss.txt: Informa ao AEM a ordem e os nomes dos arquivos emcss/para que eles possam ser mescladosjs/: Arquivos JavaScript que podem ser solicitados no HTMLjs.txt: Informa ao AEM a ordem e os nomes dos arquivos emjs/para que eles possam ser mescladosresources/: Mapas de origem, partes de código sem ponto de entrada (resultantes da divisão de código), ativos estáticos (por exemplo, ícones) etc.