What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!

Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!

50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

Thousands of reference materials covering every tech concept you need to stay up to date.

Subscribe now

View plans & pricing

Web Development with Jade

Chapter 2. Basic Syntax

Now that you know what Jade actually is, let's enter that part of the book where you start to learn how to write Jade.

Inline HTML

It's also perfectly fine to put inline HTML in any of those text blocks, as shown in the following example:

Jade	HTML
p. This is a <i> demonstration</i> of Jade's <b>text blocks</b>	<p> This is a <i> demonstration</i> of Jade's <b>text blocks</b> </p>

Attributes

Attributes are also pretty important, so here's how to write those:

Jade	HTML
p(id="hello") Hello Word!	<p id="hello">Hello Word!</p>

That's right! They're pretty similar to the way you write attributes in HTML, except they're surrounded by a pair of parentheses. Also, if you have multiple attributes, they're delimited by commas, rather than just spaces. An example of this is as follows:

Jade	HTML
p(id="hello", class="world")	<p id="hello" class="world"> </p>

Tip

Jade 0.35.0 (released on August 21, 2013) added support for space-separated attributes. Soon, this will be supported by syntax highlighters, syntax checkers, and related tools like html2jade; but until then, you may wish to stick with the comma-delimited syntax. For this reason, the rest of this book will use comma-delimited attributes.

Passing objects as attributes

In Jade, you can easily pass strings as attributes, but if you pass objects, they will be turned into the most useful representation for...

Shorthands

IDs and classes

IDs and classes are both pretty common attributes, so Jade gives us a shorthand method for writing them. This is similar to the way CSS selectors are written. An example of this is as follows:

Jade	HTML
p#hello Hello Word!	<p id="hello">Hello Word!</p>
p#hello.world	<p id="hello" class="world"></p>

Pretty familiar, eh? IDs are just prefixed with a # (pound symbol) and classes are prefixed with . (a period). These may be put in any order after the tag name with any number of classes.

Automatic div

Because the div tags are used so frequently, Jade offers a shorthand way for writing them; by omitting the tag, Jade assumes you want to use a div tag; therefore, the following code:

Jade	HTML
div#hello Hello Word!	<div id="hello"> Hello Word! </div>

It can also be rewritten as:

Jade	HTML
#hello Hello Word!	<div id="hello"> Hello Word! </div>

However, this is possible only as long as there is an ID and/or class where the tag name...

Comments

Single line

Normal HTML comments are pretty verbose, so Jade offers us a much shorter way to write them that looks similar to JavaScript comments.

Jade	HTML
//a single line comment	<!-- a single line comment-->

Also, if you don't want your comments to show up in the compiled HTML, you can use silent comments by adding a - (hyphen) after //.

//- a silent single line comment

Block comments

But of course, we need to be able to comment out multiple lines too; for that, we use block comments. If you indent a block after a comment, that block will be added to the comment too. An example of this is as follows:

Jade	HTML
// a block comment h1 Now I'm Commented Out. p And me too.	<!-- a block comment h1 Now I'm Commented Out. p And me too.-->

As you can see, the first line of the comment becomes a text block, and the indented block is not parsed. However, the first line is entirely optional and is generally just used to note what was commented out. We can omit it if we want to...

Block expansion

When each tag only has one tag nested under it, it can be a little annoying to have a new line for each one of them:

ul
  li.first
    a(href='#') foo
  li
    a(href='#') bar
  li.last
    a(href='#') baz

So, Jade has a feature called block expansion that lets us put those tags on the same line, meaning we can rewrite the preceding example as the following:

ul
  li.first: a(href='#') foo
  li: a(href='#') bar
  li.last: a(href='#') baz

The : (colon) after the tag name and attributes indicates that there is another tag following that one. We can even make really long chains of tags:

Jade	HTML
ul: li.first: b: a(href='#') foo	<ul> <li class="first"> <b> <a href="#">foo</a> </b> </li> </ul>

But that is really hard to read, so please, never do that unless you have a very good reason.

What you will learn

Write cleaner, indentationbased markup

Use logical statements to format data for display on the Web

Avoid repetition by eliminating redundant operations

Divide your templates into logical sections with blocks

Avoid common organizational pitfalls when designing Jadebased projects

Apply shorthand for brevity

Utilize Jade for clientside templates

Employ techniques like filters to quickly mockup web pages in higher level languages like stylus or coffeescript

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!

Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!

50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

Thousands of reference materials covering every tech concept you need to stay up to date.

Subscribe now

View plans & pricing

Frequently bought together

Getting Started with Grunt: The JavaScript Task Runner

NZ$56.99

NZ$39.99

NZ$80.99

Total NZ$ 177.97

Dustin Marx Apr 30, 2014

Web Development with Jade is a relatively short book of approximately 60 pages of substantive content. The book consists of eight short chapters that briefly introduce the benefits of Jade, explain why Jade may be considered superior to some of its alternatives, introduce Jade syntax, and describe packaging of Jade source. The short chapters make for quick reads and each chapter is easily understood because of the straightforward explanations. Jade is not the most complex language (even template language) that one is going to run into and Web Development with Jade reflects this simplicity nicely and does not add unnecessary complexity in its explanations.The examples in Web Development with Jade are clear and easy to understand. Lots of white space makes these examples stand out nicely and text is relatively concise while still managing to communicate sufficient detail for learning Jade.I have read the PDF version of the book and appreciate the color coded syntax of its code listings. The overall presentation of Web Development with Jade makes it easy to read and learn from.Basic knowledge of HTML, JavaScript, and CSS would benefit of a reader of Web Development with Jade, but this does not need to be deep knowledge or lengthy experience with these technologies. Minimal awareness of what HTML, JavaScript, and CSS are and the ability to recognize basic constructs of each and how they relate to each other should be sufficient for most readers to be able to learn about Java from reading Web Development with Jade.Web Development with Jade has a few quotations expressing strong opinions of the author. Although not all of these are backed up, there are only a few of them that really stand out and, for the most part, they don't impact the transfer of information about applying Jade in web development.There are online resources regarding Jade, but I'm not aware of any single resource online that presents everything covered in Web Development with Jade or that presents an overview of Jade with this level of detail in such a presentable form. Packt Publishing provided me a copy of this book in electronic (PDF) form and it is that edition that is reviewed here.

Amazon Verified review

Ionut-Cristian Florescu Apr 29, 2014

Over the last two years I've been building commercial and open-source Node.js projects and I've been using the Jade template engine almost exclusively ever since.That is why I've got so used with it that I now find writing plain old "vanilla" HTML code rather cumbersome and unproductive.That's also why, even since the early days of the project, I've introduced support for compiling Jade templates in ASPAX, arguably the simplest Node.js asset packager you can use (aspax.github.io).Until recently I've been under the impression that there's not much more I can learn about it - until I found Sean's excellent book.While the "official" Jade website is pretty good, this book will also give you, in Chapter 1, a brief overview of the current markup preprocessor engines landscape and a nice explanation of how Jade really works, in both pictures and code. It will also show you why Jade is so cool compared to other alternatives out there, due to its concision and clarity.Chapters 2 through 7 will teach you everything about writing Jade code, starting with the basic syntax, working with data, flow control logic and even touching advanced topics like filters, mixins and template inheritance.Chapter 8, undoubtedly one of the most valuable pieces of information in the book, will teach you how to structure the presentation-related code in your application.So, if you're looking to become a professional JavaScript/Node.js developer or you already are one but you're looking for a well-written Jade reference to consolidate your skills, you should definitely have a look at "Web Development with Jade".

W Boudville May 01, 2014

Some readers will be frustrated by the perhaps awkward syntax of HTML. But what can you do? Just put up with all those wretched tags? Well, Jade presents itself as a more compact alternative. It lets you write without the tags, in a style akin almost to free form poetry, as alluded to early in the text. This is input in Jade, which spits out correctly written HTML.You do not have to know the innards of Jade. The book talks briefly about how it works. You can probably skip that if you wish. And you have undoubtedly noticed the brevity of the narrative. A good sign that you can rapidly learn to use it. Less than a day to experienced coders.There is even provision for simple logic in Jade templates. Ok a programmer using to procedural languages like C or Fortran would laugh at the functionality here. But all this sits on top of HTML, which is a declarative language. So the amount of logic Java furnishes should not be deprecated.

Wouter Blancquaert May 30, 2014

Web Development with Jade, a book provided by Packt Publishing is one of those small books for web developers willing to learn more about Jade, but are no longer interested in the basic details. It is short, meaning it goes fast. Don’t expect an introduction to HTML5, CSS, JavaScript or Node.js. This book is for those already having a good background on these topics and are willing to learn Jade fast.The book itself covers more or less the syntactic ground of the Jade templating engine, and that’s about it. One small introductory chapter giving a little hint of existing templating engines, and a final chapter about how a Jade project structure should look like. This doesn’t mean this book isn’t worth buying, but know what to expect.I would advise this book to web developers with at least some experience, but certainly not for designers new to the web development landscape.

Web Development with Jade: Knowing Jade makes life simpler and more productive for web developers, and this book will teach you the language concisely and thoroughly using lots of practical examples and best practices for a solid grounding.

What do you get with a Packt Subscription?

Web Development with Jade

Chapter 2. Basic Syntax

Significance of whitespace

Tags

Text and blocks of text

Text on the same line

Text blocks

Inline HTML

Attributes

Tip

Passing objects as attributes

Shorthands

IDs and classes

Automatic div

Comments

Single line

Block comments

Block expansion

Doctypes

Summary

Page 1 of 10

What you will learn

Product Details

What do you get with a Packt Subscription?

Product Details

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs

Web Development with Jade: Knowing Jade makes life simpler and more productive for web developers, and this book will teach you the language concisely and thoroughly using lots of practical examples and best practices for a solid grounding.

What do you get with a Packt Subscription?

What you will learn

Product Details

What do you get with a Packt Subscription?

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs