Use modelos com barras de guia em Express.js

O uso de templates tornou-se uma necessidade no mundo das aplicações web, isso porque nos ajuda a separar a lógica de programação de sua apresentação. Toda essa separação e o aumento da recepção desse estilo de desenvolvimento levaram ao surgimento de um grande número de frameworks no mercado que nos ajudam a assumir a responsabilidade de gerenciar modelos.
Em caso de Expressar, este vem originalmente com um motor de templates chamado JadePorém, muitos desenvolvedores já vêm com experiência em outros e não seria justo que eles tivessem que se ajustar novamente a um novo motor, isso não é ruim, mas não é do gosto de todos.
É por isso que Expressar nos permite configurar a estrutura para que possamos trabalhar com diferentes motores de modelo, como Guidão que é uma extensão de Mustache.js e é um mecanismo de modelagem muito popular, pois se baseia em JavaScript e podemos usá-lo tanto no lado do servidor quanto no cliente.
RequisitosPara cumprir alguns dos exemplos mostrados aqui, precisamos ter instalado e acesso a Node.js, e ter instalado anteriormente Expressar. Um editor de texto e um aplicativo Expressar eles são desejáveis ​​para que possam incorporar os conceitos explicados no tutorial.
Desvantagens de não usar um mecanismo de templateA não utilização de um template engine acarreta uma série de desvantagens que podem afetar a velocidade de desenvolvimento de nossa aplicação, vamos listar essas desvantagens para que, quando pensarmos que não precisamos do template engine, vejamos o contrário.
O risco de fazer HTML malformado é muito maior, portanto, obter certificações para nosso código pode ser difícil.
O código resultante pode ser difícil de documentar e compartilhar com outros desenvolvedores.
Se usarmos código para gerar HTML, sempre será desconfortável trabalhar com caracteres especiais.
Há uma tendência de não separar a lógica do aplicativo da apresentação.
Como podemos ver existem muitas desvantagens que embora não sejam graves e não façam com que a nossa aplicação não funcione se reduz a possibilidade de sermos mais produtivos.
Vantagens de usar um mecanismo de templateAgora vamos ver o que ganharemos com a implementação de soluções como barras de guia em nossos aplicativos com Express:
O código resultante é mais organizado e temos a garantia de que não haverá HTML malformado.
Podemos separar nossa equipe em duas, trabalhando interfaces de usuário sem a necessidade de desenvolver no Back-End.
Os mecanismos de modelo nos permitem reutilizar seções de código, ajudando assim a manter nosso projeto otimizado.
Existem muitos utilitários que nos ajudam a proporcionar uma melhor interação com a parte visual de nossos aplicativos.
A forma como vemos o que os templates engines nos oferecem é poder separar, otimizar e organizar o nosso código, isso traz como consequência direta a melhoria da eficácia, eficiência e produtividade geral da nossa equipa de desenvolvimento.
No início do tutorial, mencionamos que Jade era o motor padrão, então por que procuramos outro motor? A resposta é muito simples, a forma como funciona Jade está tentando diminuir a quantidade de HTML que escrevemos, isso pode ser um pouco confuso, pois temos que aprender praticamente uma nova forma de linguagem para o nosso A parte dianteira.
Na imagem a seguir, veremos um código de modelo de Jade para que possamos ver um exemplo de sua sintaxe:

Podemos notar que a diferença com o código HTML O padrão é péssimo e, embora o código seja menor, a quantidade de pensamento envolvida é um pouco maior.
Guidão é uma história diferente de Jade, sua maneira de trabalhar é semelhante a outros motores, como Jinja2 ou Gole, uma vez que nos permite escrever rótulos HTML e depois, com nosso próprio código de mecanismo, podemos definir o que ele imprime a partir do contexto e a maneira como o faz.
Por exemplo, se sabemos que vamos imprimir algo que um usuário escreveu, podemos escapar automaticamente dos caracteres especiais e, assim, evitar a injeção de código, mas se sabemos que é o nosso próprio código, podemos expressá-lo para Guidão que não escapa do texto.
Servidor ou ClienteOutro aspecto de Guidão é que ele pode funcionar de duas maneiras, do lado do servidor ou do lado do cliente. Esta versatilidade significa que podemos decidir melhor como queremos realizar as nossas aplicações, já que se é um SPA o Aplicativo de página única, talvez a abordagem do lado do cliente seja mais simples e mais útil, mas se quisermos um site, talvez gerar tudo no servidor seja mais útil.
Para instalar Guidão no lado do servidor é muito fácil, só temos que usar npm em nosso console e assim obteremos os pacotes necessários, vamos ver o que temos que escrever:

 npm install --save express-handlebars

Com ele npm Vai baixar todos os componentes necessários para que possamos incorporar este motor em nosso projeto, no final devemos obter um resultado semelhante ao seguinte em nosso console:

Então, em nosso arquivo, onde começamos nosso aplicativo Expressar Devemos dizer a ele para usar isso como o mecanismo de modelo, para isso, simplesmente temos que escrever o seguinte código:

 var handlebars = require ('express-handlebars') .create ({defaultLayout: 'main'}); app.engine ('handlebars', handlebars.engine); app.set ('view engine', 'handlebars');

O que permaneceria em nosso arquivo seria o seguinte:

Sintaxe básica do guiadorGuidão Ele tem sua própria sintaxe muito limpa que nos permite incorporar um pouco de lógica de visualização ao modelo, podemos incorporar comentários, iterar sobre listas e blocos, escapar ou não seções de texto. Por isso é importante conhecer os mais básicos para que possamos expressar nossas ideias de maneira mais confortável e assim tirar o máximo proveito, vamos ver o mais básico do motor abaixo.
Como resultado, nossa visão gera dados que devemos mostrar ao usuário, passamos esses dados através do contexto para nosso modelo e é aqui que os imprimimos. Para imprimir isso, simplesmente temos que colocar a variável ou o elemento entre colchetes, como a seguir:

 {{Nome}}

Isso nos leva a ver o conteúdo de "Nome" que definimos em nossa visão, essas chaves duplas escapam automaticamente aos caracteres, de forma que não resulte na impressão de código que não é permitida por padrão do desenvolvedor.
Agora, se quisermos imprimir um texto sem escapar, devemos usar colchetes triplos, isso diz Guidão que nada deve escapar, vamos ver o exemplo:

 {{{Nomes}}}

Isso se nos permitir imprimir o código HTML, caracteres especiais e até JavaScript sem intervenção do nosso motor.
O comentários no modelo são vitais, pois nos permitem identificar seções, adicionar informações importantes e documentar nossa inscrição. Se colocarmos um comentário diretamente em HTML no formulário: acaba sendo visível para quem inspeciona o código da nossa página, portanto nos limita no que podemos deixar documentado.
Mas se usarmos comentários em Guidão, sempre podemos vê-los no código-fonte, mas o motor ao gerar o que o usuário vê o omite, e então quando inspecionarmos o código da web ou da aplicação não veremos nada. Para escrever um comentário sobre Guidão devemos fazer o seguinte:

 {{! nosso comentário}}

Isso significa que o conteúdo do comentário nunca é gerado no resultado visível aos nossos usuários, tornando o que escrevemos um segredo para quem está fora de nossa equipe de desenvolvimento.
Algo que não devemos esquecer é que não temos que nos limitar ao que está no convencional, existem muitas opções que podem ser melhores para o estilo de desenvolvimento de cada pessoa, por isso é vital pesquisar e não ter medo de experimentar coisas novas.
Com isso terminamos este tutorial, tivemos uma introdução pequena, mas bastante enriquecedora sobre o que significa o uso de modelos e como incorporar um novo motor em Expressar.
Sim, bem Guidão é muito mais extenso, mas com esses conceitos-chave e nossa aplicação Expressar poderemos realizar coisas muito interessantes em pouco tempo.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo