Bibliotecas de clientes e fluxo de trabalho de front-end client-side-libraries

Confira a ramificação tutorial/client-side-libraries-start do GitHub

$ cd aem-guides-wknd
$ git checkout tutorial/client-side-libraries-start

Implante a base de código em uma instância do AEM local, usando as suas habilidades do Maven:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Usando o VSCode ou outro IDE, abra o módulo ui.apps.

Expanda o caminho /apps/wknd/clientlibs para exibir as clientlibs geradas pelo arquétipo.

Na seção abaixo, essas clientlibs serão analisadas mais a fundo.

A tabela a seguir resume as bibliotecas de clientes. Mais detalhes sobre a inclusão de bibliotecas de clientes podem ser encontrados aqui.

Observe que clientlib-site e clientlib-dependencies são ignorados no controle do código-fonte. Isso é intencional, já que são gerados no momento da compilação pelo módulo ui.frontend.

Abra o módulo ui.frontend e navegue até src/main/webpack/site.

Abra o arquivo main.scss

main.scss é o ponto de entrada para arquivos Sass no módulo ui.frontend. Ele inclui o arquivo _variables.scss, que contém uma série de variáveis da marca a serem usadas em diferentes arquivos Sass no projeto. O arquivo _base.scss também está incluído e define alguns estilos básicos para elementos HTML. Uma expressão regular inclui os estilos de componentes individuais em src/main/webpack/components. Outra expressão regular inclui os arquivos em src/main/webpack/site/styles.

Inspecione o arquivo main.ts. Ele inclui main.scss e uma expressão regular para coletar quaisquer arquivos .js ou .ts no projeto. Este ponto de entrada é usado pelos arquivos de configuração do webpack como ponto de entrada para todo o módulo ui.frontend.

Inspecione os arquivos abaixo de src/main/webpack/site/styles:

Estes arquivos definem estilos para elementos globais do modelo, como cabeçalho, rodapé e container de conteúdo principal. As regras de CSS nesses arquivos destinam-se a diferentes elementos HTML: header, main e footer. Esses elementos HTML foram definidos por políticas no capítulo anterior, Páginas e modelos.

Expanda a pasta components em src/main/webpack e inspecione os arquivos.

Cada arquivo é mapeado para um componente principal, como o componente de acordeão. Cada componente principal é criado com o Modificador de elementos de bloco ou a notação BEM para facilitar o direcionamento a classes de CSS específicas com regras de estilo. Os arquivos abaixo de /components foram compactados pelo arquétipo de projeto do AEM com as diferentes regras de BEM para cada componente.

Baixe o arquivo de estilos básicos da WKND wknd-base-style-src-v3.zip e descomprima o arquivo.

Para acelerar o tutorial, vários arquivos Sass que implementam a marca da WKND com base nos componentes principais e na estrutura do modelo de página de artigo são fornecidos.

Substitua o conteúdo de ui.frontend/src pelos arquivos da etapa anterior. O conteúdo do zip deve substituir as seguintes pastas:

/src/main/webpack
         /components
         /resources
         /site
         /static

Inspecione os arquivos alterados para ver os detalhes da implementação do estilo da WKND.

Abra um terminal de linha de comando e instale o módulo ui.frontend, usando o comando npm install:

$ cd ~/code/aem-guides-wknd/ui.frontend
$ npm install

Abra ui.frontend/package.json e, no comando scripts start, adicione --env writeToDisk=true.

{
  "scripts": {
    "start": "webpack-dev-server --open --config ./webpack.dev.js --env writeToDisk=true",
  }
}

Inicie o servidor de desenvolvimento do webpack no modo watch, executando o seguinte comando:

$ npm run watch

Isso compila os arquivos de origem do módulo ui.frontend e sincroniza as alterações com o AEM em http://localhost:4502

+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies
http://admin:admin@localhost:4502 > OK
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
http://admin:admin@localhost:4502 > OK

O comando npm run watch preenche o clientlib-site e as clientlib-dependencies no módulo ui.apps, que é sincronizado automaticamente com o AEM.

Inspecione o arquivo site.css abaixo de ui.frontend/dist/clientlib-site/site.css. Este é o CSS compilado com base nos arquivos Sass de origem.

Inspecione o arquivo ui.frontend/clientlib.config.js. Este é o arquivo de configuração de um plug-in npm, aem-clientlib-generator, que transforma o conteúdo de /dist em uma biblioteca do cliente e a move para o módulo ui.apps.

Inspecione o arquivo site.css no módulo ui.apps, em ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css. Esta deve ser uma cópia idêntica do arquivo site.css do módulo ui.frontend. Agora que está no módulo ui.apps, ele pode ser implantado no AEM.

Abra o artigo “LA Skatepark” no AEM, em: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

Agora você verá os estilos atualizados no artigo. Talvez seja necessário fazer uma atualização permanente para limpar todos os arquivos CSS armazenados em cache pelo navegador.

Está começando ficar muito parecido com as simulações!

No módulo ui.frontend, abra o arquivo: ui.frontend/src/main/webpack/site/_variables.scss.

Atualize a variável de cor $brand-primary:

//== variables.css

//== Brand Colors
$brand-primary:          $pink;

Salve as alterações.

Retorne ao navegador e atualize a página do AEM para ver as atualizações:

Reverta a alteração para a cor $brand-primary e interrompa a compilação do webpack, usando o comando CTRL+C.

Navegue até o modelo de página de artigo em http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html

Clique no ícone Informações da página e, no menu, selecione Política da página para abrir a caixa de diálogo Política da página.

Informações da página > Política da página

Observe que as categorias de wknd.dependencies e wknd.site estão listadas aqui. Por padrão, as clientlibs configuradas por meio da política da página são divididas para incluir o CSS no cabeçalho da página e o JavaScript no fim do corpo. Você pode listar explicitamente que o JavaScript da clientlib seja carregado no cabeçalho da página. Esse é o caso de wknd.dependencies.

Navegue até a página LA Skateparks criada com o Modelo de página de artigo: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

Clique no ícone Informações da página e, no menu, selecione Visualizar como publicada para abrir a página do artigo fora do editor do AEM.

Visualize a origem da página de http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled, e você poderá ver as seguintes referências das clientlibs no <head>:

<head>
...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-78fb9cea4c3a2cc17edce2c2b32631e2-lc.min.css" type="text/css">
...
</head>

Observe que as clientlibs estão usando o ponto de acesso de proxy /etc.clientlibs. Você também verá que a seguinte clientlib inclui na parte inferior da página:

...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-7157cf8cb32ed66d50e4e49cdc50780a-lc.min.js"></script>
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-base.lc-53e6f96eb92561a1bdcc1cb196e9d9ca-lc.min.js"></script>
...
</body>

Copie a origem da página do artigo “LA Skateparks” em http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled.

Reabra o IDE. Cole a marcação copiada do AEM no index.html do módulo ui.frontend, abaixo de src/main/webpack/static.

Edite a marcação copiada e remova todas as referências a clientlib-site e clientlib-dependencies:

<!-- remove -->
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.css" type="text/css">
...
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-site.js"></script>

Essas referências precisam ser removidas, pois o servidor de desenvolvimento do webpack gera esses artefatos automaticamente.

Inicie o servidor de desenvolvimento do webpack a partir de um novo terminal, executando o seguinte comando no módulo ui.frontend:

$ cd ~/code/aem-guides-wknd/ui.frontend/
$ npm start

> aem-maven-archetype@1.0.0 start code/aem-guides-wknd/ui.frontend
> webpack-dev-server --open --config ./webpack.dev.js

Isso deve abrir uma nova janela do navegador em http://localhost:8080/ com marcação estática.

Edite o arquivo src/main/webpack/site/_variables.scss. Substitua a regra $text-color pela seguinte:

- $text-color:              $black;
+ $text-color:              $pink;

Salve as alterações.

Você verá as alterações refletidas automaticamente no navegador, em http://localhost:8080.

Revise o arquivo /aem-guides-wknd.ui.frontend/webpack.dev.js. Ele contém a configuração do webpack usada para iniciar o webpack-dev-server. Ele atua como proxy dos caminhos /content e /etc.clientlibs de uma instância do AEM em execução localmente. É assim que as imagens e outras clientlibs (não gerenciadas pelo código ui.frontend) são disponibilizadas.

Você pode parar o servidor do webpack por meio da linha de comando, digitando CTRL+C.