Jade
Writing HTML can be a chore – making sure elements are closed properly can be annoying without proper IDE support, and CSS markup often requires repeated patterns of nested divs and spans in order to get the layout working properly.
There are various templating languages and engines available for dealing with this problem. Probably my favourite is Jade, due to its minimalist syntax and availability over a bunch of different languages and frameworks. It’s basically like LESS but for HTML. Also, Forbes Lindesay (ex-intern, new developer) is the maintainer!
Jade makes writing HTML a lot more efficient. For example, this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <style type="text/css"> /* some css */ </style> </head> <body> <div> some text <img src="foo.png" /> </div> <body> </html> |
becomes this:
|
1 2 3 4 5 6 7 8 |
doctype html html head include styles.css body .mydiv | some text img(src="foo.png") |
Most elements are written using just their names, and their contents are indented below them. Elements beginning with a dot or hash are a shorthand for div elements with that class or id respectively.
The other main feature is mixins. These are similar to LESS mixins in that they define pseudo-functions that let you avoid repeated bits of markup. For example,
|
1 2 3 4 5 6 7 8 9 10 11 |
mixin infobox(name, description, link, linkname, logo) .infoboxouter .infoboxinner if name h3 #{name} if logo img.logo(src="#{logo}") p(style="min-height:4em;") #{description} p a(href="#{link}") | #{linkname} |
defines a mixin that could be used like so:
|
1 2 3 |
.tips +infobox("tip #1", "google for stuff", "http://google.com/", "google.com") +infobox("tip #2", "jade is awesome", "http://jade-lang.com/", "jade-lang.com", "jade.png") |
Note the basic control flow available. Jade has similar semantics to javascript – for example, missing parameters are “undefined” and evaluate to false. Jade can also iterate over lists, do switch statements and access properties of objects passed in from the framework hosting it.
Jade also has the ability to define templates by using certain named areas, called blocks. These are used by creating a second file that references the first and defines what content should be in each of the blocks. For example, a layout file might define the general page layout, and put blocks in place of areas such as the navigation and main content. Pages using that layout would then declare that they extend the layout file and just have to define what goes in each block.
Jade can be run locally to generate static html pages, or in a framework such as Flask or Django (for Python) or Express (for Node.js). There is even an (apparently limited) implementation for ASP.NET MVC in the Spark view engine.
Useful links
Jade language reference (with online demo): jade-lang.com/
Spark view engine: nuget.org/packages/Spark/
with some examples of using Jade vs. Razor in Spark: gist.github.com/loudej/2371061
and the SQL Automation Pack Intro app, which we wrote using Jade: tinyurl.com/sqlautomationpack
You may also like
Blog
Behind Redgate Monitor’s Curtain: Eight Engineering Teams, One Customer-Centric Vision
Blog
Using the new Flyway Diff commands
Blog