Over the past 20 years the Internet has dramatically changed. We went from very basic and fully static websites to advanced web-based apps, with beautiful designs and intuitive UI.

HTML has been the foundation for the Web till the day one. Even though it went through multiple revisions, adding new features and “extensions,” the basic structure remained the same. Of course, it’s an application of SGML, but we don’t want to go that deep. It’s just a tool for developers and designers to create great projects.

So what’s wrong with this tool? Nothing in particular, actually. But the development model has changed over the past years, with the rise of indentation-based languages, such as Python, Ruby, CoffeeScript and others. Now we expect the same kind of convenience from our “templating” engines, too.

So here comes Jade:

nav.navbar.navbar-default.navbar-fixed-top
  .container
    .navbar-header.pull-left
      a.btn.btn-default.btn-xs.navbar-btn(href='/') Orders
      a.btn.btn-default.btn-xs.navbar-btn(href='/manage_orders') Manage
      a.btn.btn-default.btn-xs.navbar-btn(href='/users') Users
    .navbar-header.pull-right
      a.btn.btn-default.btn-xs.navbar-btn(data-method='delete' href='/users/sign_out' rel='nofollow') Logout

The same code in HTML:

<nav class='navbar navbar-default navbar-fixed-top'>
  <div class='container'>
    <div class='navbar-header pull-left'>
      <a class="btn btn-default btn-xs navbar-btn" href="/">Orders</a>
      <a class="btn btn-default btn-xs navbar-btn" href="/manage_orders">Manage</a>
      <a class="btn btn-default btn-xs navbar-btn" href="/users">Users</a>
    </div>
    <div class='navbar-header pull-right'>
      <a class="btn btn-default btn-xs navbar-btn" data-method="delete" href="/users/sign_out" rel="nofollow">Logout</a>
    </div>
  </div>
</nav>

Jade vs HTML: see the difference? It’s also much more error-proof, given that you don’t need to use closing tags. And it looks cleaner. Compare these two Meteor templates:

HTML

<head>
  <title>Leaderboard</title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
</head>

<body>
  <div class="outer">
    {{> leaderboard}}
  </div>
</body>

<template name="leaderboard">
  <div class="leaderboard">
    {{#each players}}
      {{> player}}
    {{/each}}
  </div>

  {{#if selected_name}}
  <div class="details">
    <div class="name">{{selected_name}}</div>
    <button class="inc">Give 5 points</button>
  </div>
  {{else}}
  <div class="none">Click a player to select</div>
  {{/if}}
</template>

<template name="player">
  <div class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
  </div>
</template>

Jade

head
  title Leaderboard
  meta(name='viewport' content='width=device-width, user-scalable=no')
body
  .outer
    +leaderboard
template(name='leaderboard')
  .leaderboard
    each players
      +player
  if selected_name
    .details
      .name {{selected_name}}
      button.inc Give 5 points
  else
    .none Click a player to select
template(name='player')
  .player(class="{{selected}}")
    span.name {{name}}
    span.score {{score}}

Unfortunately, browsers can’t render Jade directly, but there are different tools available, for different platforms, that can either pre-process or real-time convert Jade to HTML. Given that Jade is always converted to HTML in production environments, there are no performance costs.

Here are the tools that will help you started with Jade for different platforms and languages:

You can also find online HTML to Jade converter with Meteor Spacebars support here.

Happy coding! :)