In the last post I mentioned that when you start using Express, you are nudged towards Jade to create your HTML.
At its simplest, Jade provides a way to make your HTML more terse. To produce HTML like this:
We would only need to enter Jade like this:
We can break up the contents of our pages, so in this example the head contents are defined in a different file and can be shared across multiple pages. The syntax is very simple, indentation is used to nest elements within each other and you can add ID, class and other attributes with simple markup.
But really the power is that you can also do simple scripting inside the Jade file. So you can conditionally load chunks of the page based on data that you pass into the page. And then you can also pass in variables to the Jade template to be used when building the HTML. In the example above, the title is passed into the page as a variable from the route configuration.
Of course you can bind field onto your database using similar techniques.
The momentum in the web development world is very much towards AngularJS at the moment which doesn’t really sit with Jade too well. It is possible to use both but they tread on each others toes rather a lot so it may end up being more trouble than it’s worth. But for my purposes Jade and jQuery are working well together for me at the moment.
There’s a fundamental difference here I think: jade + jQuery are an excellent combination and will suit a lot of simple web app use cases. Where the web app is considerably more complex — perhaps with a lot of user interaction and state changes within a page, I’d be tempted to look at AngularJS instead, as that’s what it’s geared up for (and the level of DOM manipulation would be tedious, jQuery notwithstanding).
Another great post Matt!