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 de AEM local usando suas habilidades de 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 são analisadas com mais detalhes.

A tabela a seguir resume as bibliotecas de clientes. Mais detalhes sobre incluindo as Bibliotecas de Clientes podem ser encontrados aqui.

Observe que clientlib-site e clientlib-dependencies são ignorados do controle do código-fonte. Isso ocorre por design, 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.

Abrir o arquivo main.scss

main.scss é o ponto de entrada para os arquivos Sass no módulo ui.frontend. Ele inclui o arquivo _variables.scss, que contém uma série de variáveis de 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.

Inspect 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.

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

Esses arquivos definem estilos para elementos globais no modelo, como o Cabeçalho, Rodapé e o contêiner de conteúdo principal. As regras de CSS nesses arquivos se destinam a diferentes elementos de 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 mapeia para um Componente Principal como o Componente Acordeão. Cada Componente principal é criado com o Modificador de elemento de bloco ou a notação BEM para facilitar o direcionamento a classes CSS específicas com regras de estilo. Os arquivos abaixo de /components foram removidos pelo Arquétipo de Projeto AEM com as diferentes regras BEM para cada componente.

Baixe o arquivo de Estilos Base WKND wknd-base-style-src-v3.zip e unzip.

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

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

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

Inspect os arquivos alterados para ver detalhes da implementação do estilo 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 clientlib-dependencies no módulo ui.apps que é sincronizado automaticamente com o AEM.

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

Inspect 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.

Inspect 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ê deve ver os estilos atualizados do artigo. Talvez seja necessário fazer uma atualização permanente para limpar todos os arquivos CSS armazenados em cache pelo navegador.

Está começando a parecer muito mais perto dos modelos!

No, o módulo ui.frontend abre 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 AEM para ver as atualizações:

Reverta a alteração para a cor $brand-primary e pare 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 para 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 final do corpo. Você pode listar explicitamente o JavaScript clientlib a ser carregado no Cabeçalho da página. Este é o caso para wknd.dependencies.

Navegue até a página LA Skateparks criada usando 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 Exibir como publicada para abrir a página do artigo fora do Editor de AEM.

Exiba 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 de clientlib 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 clientlibs estão usando o ponto de extremidade proxy /etc.clientlibs. Você também deve 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 de artigo LA skatepark 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 no 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>

Remova essas referências porque 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ê deve ver automaticamente as alterações refletidas automaticamente no navegador em http://localhost:8080.

Revise o arquivo /aem-guides-wknd.ui.frontend/webpack.dev.js. Contém a configuração de webpack usada para iniciar o webpack-dev-server. Ela faz proxy dos caminhos /content e /etc.clientlibs de uma instância de 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 de webpack a partir da linha de comando digitando CTRL+C.