Introdução a linguagem Jade

Como decidi mudar meus planos de estudos para 2016, tive que revisar algumas linguagens que já não estava praticando muito, e o Jade é uma delas. Aproveitei para fazer um post de introdução/revisão da linguagem para compartilhar com vocês.


Introdução

Jade é uma linguagem de programação que basicamente serve para otimizar o desenvolvimento de códigos HTML. Quem já programa para web, sabe que a linguagem HTML é cheia de redundâncias que hoje podem ser abstraídas. Coisas como fechar tags, utilizar a indentação logicamente, ajuda e muito a otimizar o desenvolvimento, e é justamente isso que conseguimos com o Jade.

Quem já utilizou o Emmet, que é um plugin para editores de texto que habilita o uso de shortcodes para agilizar o desenvolvimento, vai se familiarizar com o Jade e seus recursos.

Post de introdução ao Emmet

Até mesmo quem já está acostumado com os pré processadores CSS (Sass, Less, Stylus). A ideia é a mesma, utilizar uma nova linguagem com auxílio da lógica para otimizar a produção.

Post de introdução a linguagem Sass/Scss

Qual a vantagem?

Basicamente as vantagens são:

  • Código organizado – consequentemente contribui para uma produção mais ágil.
  • O código é gerado a partir de templates .jade.
  • Lógica aplicada a sintaxe – é como se pudesse colocar lógica na linguagem HTML, por padrão.
  • E no fim não é necessário tanto código, com tanta indentação e 9999 linhas.

As desvantagens são:

  • Não deixa de ser algo novo para aprender.
  • É necessário gerar o output do código com um compilador ou, configurar um servidor para executar arquivos .jade.

Na minha opinião, vale a pena aprender pois é um recurso novo, simples, com foco na eficiência do trabalho. Existem diversos programas para Windows que compilam arquivos .jade, e diversas soluções para o NodeJS (multi plataforma). Além de soluções e serviços online, como o HTML2Jade e o CodePen.

Exemplos de utilização

Alguns exemplos de utilização da linguagem. O output representa o código Jade compilado.

Código Jade

body
  div
    h1 revisando/estudando Jade
    p introdução
  div
    footer ©
Output HTML

<body>
  <div>
    <h1>revisando/estudando Jade</h1>
    <p>introdução</p>
  </div>
  <div>
    <footer>&copy;</footer>

Código Jade

ul
  li
  li
  li  
table
  tr
    td
Output HTML

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
<table>
  <tr>
    <td></td>
  </tr>
</table>


Configurando o ambiente de desenvolvimento

Como o Jade utiliza um compilador, precisamos configurar nosso ambiente de trabalho. Para facilitar, vamos utilizar o CodePen, basta mudar a configuração da área HTML conforme a imagem abaixo.

Introdução e revisão da linguagem Jade by Web Social Dev

Se desejar, pode utilizar o compilador via linha de comando (cmd/terminal), que requer o NodeJS instalado. Recomendo a utilização do serviço c9.io, caso queira testar o recurso através da linha de comando.

No terminal, basta executar comando:

$ npm install jade

Agora, para compilar um arquivo, basta apontar o terminal para a pasta onde o arquivo se encontra, e executar o comando:

$ jade [opcoes] [pasta|arquivo...]

Para mais informações, acesse a documentação do Jade.

Também criei um repositório no GitHub, com os arquivos utilizados durante todo o processo, quem quiser testar, basta clonar o git no c9 e o ambiente está pronto.

Nos próximos tutoriais vamos analisar a sintaxe e os recursos que o Jade tem a oferecer.

Qualquer dúvida estou a disposição nos comentários.