Hoje apresentarei um íncrivel template engine para node.js, seu nome se chama Jade. Digo íncrivel por que com ele será possível desenvolver códigos html com uma síntaxe muito limpa, com regras de identação semelhantes a linguagem Python (através de espaçamentos ou tabulações de código, porém jamais tente as duas regras no mesmo código!), integração com comandos do servidor e trabalhando de forma otimizada reaproveitando e extendendo trechos das views.

O Jade é um template engine exclusivo para Node.js, inspirado no Haml do Ruby, sua sintaxe é totalmente diferente do HTML convencional, veja o código abaixo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script>
      if (foo) {
        bar();
      }
    </script>
  </head>
  <body>
    <h1>Template engine</h1>
    <div id="container">
      <p>Jade</p>
    </div>
  </body>
</html>

Ele foi substituído pelo código abaixo:

!!! 5
html(lang="en")
  head
    title Jade
    script
      if (foo) {
        bar();
      }
  body
    h1 Template engine
    #container
      p Jade

Algo que melhora drasticamente a legibilidade do código, permitindo que você desenvolva mais com menos esforço. Outro destaque do Jade é a possibilidade de trabalhar com código server-side junto ao código client-side, ou seja, código javascript server-side misturado com código html ou javascript client-side, para isso é necessário utilizar alguns comandos para "escapar" determinado comando de forma que o Jade reconheça quem é quem. Um bom exemplo disso é o código abaixo:

!!! 5
html(lang="en")
  head
    title Jade
    script
      // #{usuario.nome} é uma variável do server-side.
      var nome = '#{usuario.nome}'; 
      // Nome é variável client-side 
      alert(nome); 
  body
    #container
      // Comando server-side para exibição do nome do usuário.
      if(usuario)
        p #{usuario.nome}
      else
        p Não informado.

O Jade possui alguns shortcuts-commands, que visam agilizar e reduzir a complexidade do seu código, abaixo listarei alguns comandos e seus respectivos shortcuts:

  • div(id='containter', class='menu') ---> #container.menu
  • doctype 5 ---> !!! 5
  • p= nome ---> p #{nome}

Trabalhando com Jade é possível desenvolver views reaproveitáveis, evitando o desperdício de repetir código em diversas partes do layout da aplicação.

// header.jade
header
  h1 Hey this is Jade!
// footer.jade
footer
  small Bye! See you later!
// main.jade
!!! 5
html
  head
    title This is Jade
  body
    include header
    section
      p This is a post about jade template engine, enjoy it!
    include footer

Repare que no código main.jade reaproveitamos o header e footer que são arquivos separados, e a inclusão foi feita através do método include. Outro meio de reaproveitar código é através dos comandos extends e block, que geralmente são utilizados para trabalhar com o conceito de layout, onde criamos uma página principal que receberá em alguns pontos outras views.

// main.jade
!!! 5
html
  head
    title Jade
  body
    block body

Todas as demais views serão incluídas através do body via comando block, abaixo segue um exemplo em que a página extende o layout para ela mesma.

// list.jade
extends main_layout
block body
  ul
    li Jade
    li Template
    li Engine
    li For
    li Node.js

Basicamente extendemos o main_layout.jade para o list.jade em que incluímos os componentes do html dentro do block body. Podemos até misturar ambos os comandos include, extends e block, fazendo com que o list.jade fique dessa maneira:

extends main_layout
block body
  include header
  section
    ul
      li Jade
      li Template
      li Engine
      li For
      li Node.js
  include footer

Agora listarei algumas dicas, que serão essenciais para trabalhar de forma produtiva com Jade:

  • Respeite a regra de identação utilize espaçamento ou tabulação e NUNCA os dois no mesmo código.
  • Código Javascript client-side também precisa respeitar a regra de identação para evitar problemas com Jade.
  • Utilize comandos shortcuts-commands na medida do possível, para diminuir o número de códigos.
  • Trabalhe com os comandos include, block e extends para separar códigos que possam ser reaproveitados em mais de uma view, para isso, identifique em suas views quais trechos de código html ou javascript se repetem com frequência e aplique esses conceitos de extensão e reaproveitamento das views.

Voltando a nossa mini-aplicação de cadastro de clientes, agora implementaremos as views utilizando o Jade no lugar do atual EJS. O primeiro passo é configurar no Express o template engine Jade. Execute o comando no terminal console ou prompt de comando:

npm install jade

E modifique o app.js:

app.configure(function(){
  app.set('views', __dirname + '/views');
  // Apenas modifique de ejs para jade.
  app.set('view engine', 'jade'); 
  app.set('view options', {layout: false});
  app.use(express.bodyParser());
  app.use(express.methodOverride());
});

Agora vamos alterar as atuais views, primeiro renomeie as extensões dos arquivos: index.ejs, edit.ejs, 500.ejs e 404.ejs para .jade, e agora mãos a obra!

// index.jade
!!! 5
html
  body
    h1 Cadastro de cliente
    form(action="/cliente", method="post")
      label Nome:
        input(type="text", name="cliente[nome]")
      label Idade:
        input(type="text", name="cliente[idade]")
      button(type="submit") Enviar
    h1 Lista de clientes
    ul
      each cliente, i in clientes
        li #{cliente.nome} - #{cliente.idade} 
          a(href="/cliente/#{i}/editar") Editar
          a(href="/cliente/#{i}") Excluir
// edit.jade
!!! 5
html
  body
    h1 Editar dados do cliente: #{cliente.nome}
    form(action="/cliente/#{id}", method="post")
      input(type="hidden", name="_method", value="put")
      label Nome:
        input(type="text", name="cliente[nome]", value="#{cliente.nome}")
      label Idade:
        input(type="text", name="cliente[idade]", value="#{cliente.idade}")
			button(type="submit") Enviar
// 404.jade
!!! 5
html
  head
    title Página não encontrada.
  body
    h1 Página não encontrada.

Para finalizar os refactorings de views...

// 500.jade
!!! 5
html
  head
    title Erro na aplicação.
  body
    h1 Erro na aplicação.
    h3 Detalhes: #{error.message}

E finalizamos mais uma saga dessa consagrada série de mini-curso Node.js para leigos.

Ajude o blog clicando neste anúncio :)

Quero propor um desafio para vocês!

Refaçam esses layouts tornando-os reaproveitáveis. Utilizam qualquer um dos comandos que citei: extends, block ou include.

Dica: identifique os possíveis pontos que podem futuramente se repetir ou simplesmente separe cada componente em arquivos diferentes com o intuito de organizar suas views. Por exemplo: separe em um arquivo o form e em outro arquivo você lista todos os clientes e no final unifique-os numa mesma view.

Até a próxima pessoal e um grande abraço a todos!