This week I made an important addition to my tool kit. In the past I’ve focused primarily on ways to streamline backend development using tools like django_compressor, Sentry, and Fabric. More recently, however, I’ve taken a turn and began focusing on ways to bring my frontend up to speed.

My initial focus was on incorporating new tools and resources like SASS, HTML5, Markdown and microdata (blog posts to follow). I’d like to focus here, though, on my latest addition, Jade.

Jade is a HTML preprocessor that dramatically reduces the bloat and messiness of your code. It uses indented syntax(hey, kind of like Python!) and is extremely easy to learn. Also, thanks to some terrific work by Syrus Akbary who ported Jade to Python, it integrates easily with Django.

To get the full experience you will need PyJade by Syrus, and the Python Markdown library (if you plan to use Markdown, which I highly recommend). Both are available on PyPi.

pip install Markdown
pip install pyjade

Install pygments also if you plan on publishing code—see my post on syntax highlighting with Markdown.

Enabling Jade couldn’t be easier. PyJade comes with a Django “extension” which features a template loader. The loader wraps your existing loaders. This allows PyJade to do the Jade preprocessing first, before handing the template off to the usual suspects. All it takes a simple modification to your settings.py TEMPLATE_LOADERS variable.

TEMPLATE_LOADERS = (
    ('pyjade.ext.django.Loader', (
        'django.template.loaders.filesystem.Loader',
        'django.template.loaders.app_directories.Loader',
        'django.template.loaders.eggs.Loader',
    )),
)

With the loader in place, any ‘.jade’ template you use in Django will be intercepted by PyJade and preprocessed. Here is an example “base.jade”:

!!! 5
html
    head
        title
            block title
                | My Website
    body
        header
            h1 My Website
            nav
                a(href!='{% url home %}') Home
                a(href!='{% url blog:index %}') Blog
                a(href!='{% url about %}') About Me
        #main(role='main')
            block content
                p Welcome to my website
        footer
            p All content copyright by me.

Then I can do an about page. First, in urls.py:

from django.views.generic.simple import direct_to_template

urlpatterns = patterns('',
    url(
        r'^about/$', 
        direct_to_template, 
        {'template': 'about.jade'}, 
        name='about'
    ),
    ...

And create about.jade which might look something like this:

extends base

block title
    | About Me

block content
    article
        header
            h1 About Me
        :markdown
            This is a page about me.  Be sure to check
            out my [Facebook Profile][1] where I post lots
            of crazy pictures!

            [1]: http://facebook.com/dustinfarris

Because Jade is so easy to learn and use, the time investment really pays off. I personally love how it feels sort of Pythonic with regards to indented syntax, and kicking out templates has certainly received a speed boost!