/Desenvolvimento

voltar
/Desenvolvimento

Brincando com o template engine Jade

PorCaio Ribeiro Pereira em

jade

O uso de template engines no desenvolvimento de aplicações web permite manipular e organizar conteúdo HTML de forma dinâmica. Neste artigo, vou apresentar um framework fortemente utilizado em projetos Node.js, chamado de Jade.

O Jade é muito popular em projetos Node.js, mas possui também suporte a outras linguagens de programação. Ele permite construir conteúdo dinâmico de forma clean e enxuta, e a única regra necessária em seu uso é respeitar o espaçamento entre as tags do HTML, separando cada tag por tabulação ou por espaços. Não, o Jade não compila uma página que utiliza os dois tipos de espaçamentos, ou é um ou é outro.

O Jade foi inspirado no template engine Haml, que é um framework famoso na comunidade Ruby. A diferença é que o Jade surgiu com algumas melhorias, como a exclusão de alguns caracteres especiais utilizados pelo Haml e a eliminação do uso do caractere %, que representa uma tag do HTML no Haml.

Abaixo segue uma pequena comparação entre HTML vs Haml vs Jade.

HTML

<html>
  <head>
    <title>HTML :(</title>
  </head>
  <body>
    <h1>HTML :(</h1>
  </body>
</html>

Haml

%html
 
  %head
    %title Haml :|
  %body
    %h1 Haml :|

Jade

doctype html
html
  head
    title Jade :)
  body
    h1 Jade :)

Uma técnica muito utilizada com Jade é a separação/inclusão de partials, em que na prática você cria pedaços reaproveitáveis de template e em seguida adiciona-os em uma página principal. Isso é muito utilizado quando se precisa incluir conteúdo dinâmico. Para exemplificar esse conceito, crie o arquivo index.jade; com o código a seguir:

doctype html
html
  head
    title Meu site
  body
    h1 Meu site

Em seguida, crie dois novos templates – o primeiro é o arquivo _header.jade e o segundo é o_footer.jade, veja abaixo:

_header.jade

header
  h1 Olá seja bem-vindo!

_footer.jade

footer
  p Gostou do meu site?

Para incluir esses partials dentro da página principal index.jade basta utilizar a função != partial("nome_do_partial"). Veja abaixo como fica:

doctype html
html
  head
    title Meu site
  body
    != partial("_header")
    != partial("_footer")

Dessa forma, é possível fragmentar uma página permitindo organizar seu layout em componentes.

Outra técnica que é bastante útil é a inclusão de comandos de linguagem server-side dentro do layout, ou seja, o uso de comandos if, else, for dentro da página, fazendo com que o Jade processe-os em tempo de compilação dos templates.

Volte para página index.jade e faça as seguintes alterações:

doctype html
html
  head
    title Meu site
  body
    != partial("_header")
      section
        if (Date.now.getHour() > 8 && Date.now.getHour() <= 18)
          p Bom dia!
        else
          p Boa noite!
    != partial("_footer")

Para finalizar, caso você precise executar um código in-line do JavaScript ou CSS, utilize as tagsscript. ou style. (isso mesmo! Tem um ponto final!), lembrando que esse ponto deve ser usado somente se for declarar um código in-line. Se for carregar um script ou css externo, você não precisa usar este ponto. Veja o exemplo abaixo:

doctype html
html
  head
    title Página principal
    link(href="main.css", rel="stylesheet")
    style.
      body {
        background: #999;
        color: #FFF;
      }
    script(src="main.js", type="text/javascript")
    script.
      (function() {
        alert("Seja bem vindo!");
      })();
  body
    != partial("_header")
      section
        if (Date.now.getHour() > 8 && Date.now.getHour() <= 18)
          p Bom dia!
        else
          p Boa noite!
    != partial("_footer")

Esse foi alguns exemplos básicos do que se pode fazer usando o Jade. Para conhecer a fundo, recomendo que acesse seu site oficial, para saber como usá-lo em um framework web Node.js, além de aprender outras técnicas mais avançadas.

Até a próxima!

Deixe um comentário! 2

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Comentando como Anônimo

  1. Olá Jim. Parabéns pelas explicações.

    Fiquei com dúvida no seguinte: porque você utilizou ‘!= partial(“_header”)’ ao invés de ‘include _header’?

    Abs!

  2. Olá Caio. Parabéns pelas explicações.

    Fiquei com dúvida no seguinte: porque você utilizou ‘!= partial(“_header”)’ ao invés de ‘include _header’?

    Abs!

leia mais