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.

Sean Lang

$26.99

4.3 (4 Ratings)

Paperback Mar 2014 80 pages Edition

Sean Lang

$26.99

4.3 (4 Ratings)

Paperback Mar 2014 80 pages Edition

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

View table of contents

Preview Book

Web Development with Jade

Chapter 1. What is Jade?

Jade is a templating language and a shorter, more elegant way to write HTML. If you are just looking for a good way to create templates, or you want to ditch HTML's ugly syntax, Jade can help you.

Markup like poetry

Let's start with the following simple example. First, we have the HTML code and then the same thing rewritten in Jade:

HTML

Jade

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Meet Jade</h1>
    <p>
      A simple Jade example.
      You'll learn to write
      all of this in ch 2.
    </p>
    <p>Jade FTW!</p>
  </body>
</html>

doctype html
html
  head
  body
    h1 Meet Jade
    p.
      A simple Jade example.
      You'll learn to write
      all of this in ch 2.
    p Jade FTW!

Both of the preceding code examples mean the exact same thing, except one is much shorter. This is Jade, a powerful, terse templating language that is compiled into HTML. In addition to the syntactical improvements, Jade lets you simplify redundant markup with programmed logic. Also, it allows you to create templates that can take in and display data.

Why should I preprocess?

Jade really is just one option in a whole class of preprocessors. To have a complete understanding of Jade, we should understand why this class of languages was created.

Preprocessors are high-level languages that offer syntactical and functional improvements over their "vanilla" (non-preprocessed) counterparts. These high-level languages allow you to write the markup in a better language that is compiled down to normal (vanilla) HTML. Thus, they are there purely to improve your productivity, without affecting their compatibility with existing technologies.

Preprocessing, in general, offers many benefits over writing vanilla HTML. Standard Generalized Markup Language (SGML), the predecessor of HTML, was created to be robust and easy to parse at the expense of being clean and easy to write. Because of this, a variety of preprocessors have emerged that offer a more terse syntax.

Occasionally, people will avoid preprocessing because it adds another step, that is, another layer of abstraction to the end result. However, improvements in code readability and ease of writing far outweigh the inconvenience of this additional step. Furthermore, anything more complex than a static site will require a "build" step anyway, to inject whatever dynamic content the site has.

How Jade preprocesses

In the case of Jade, this preprocessing is done by compiling templates into JS and then rendering them to HTML, as shown in the following diagram:

Because Jade's compiled templates really are just JavaScript functions that output HTML, they can be rendered on both the server and in the browser.

Comparison with other preprocessors

As I mentioned earlier, there are many preprocessors and templating solutions, so it is worth discussing why those may be inadequate.

HAML

HAML is a very popular, beautiful templating language that was made to replace ERB (Ruby's default templating system) with a more beautiful abstracted markup language. In fact, HAML was one of the major influences on the creation of Jade and can be thanked for many of its features.

However, HAML does have a few problems. It lacks useful features such as mixins and block operations such as extend, and it has a slightly more verbose syntax.

The original implementation of HAML also had the disadvantage of not compiling into JS, so it couldn't be used to write templates that are evaluated on the client side. However, now there are several JS implementations of HAML, the most popular being haml-js (https://github.com/creationix/haml-js).

PHP

PHP does not offer any syntactical improvements and must be rendered on the server side, so it may not be the first thing that comes to mind when discussing these types of languages. However, it is currently the most popular HTML preprocessor; sadly, it is also the worst.

It can hardly be considered a templating language because it has overgrown the scope of a typical templating language and has gained the features of a complete object-oriented programming language. This is a major issue because it encourages the mixing of business logic with templating logic. Combining this with PHP's already awful design, it makes for some pretty horrific code.

Jinja2

Jinja2 is a templating language for Python. Like PHP, it doesn't have any syntactical improvements and must be rendered on the server side. Unlike PHP, it has a sensible language design, supports block-based operations, and it encourages you to keep most of the logic outside of templates. This makes it a good, general-purpose templating language, but it lacks the HTML-specific syntax optimizations that Jade and HAML have.

Mustache

Mustache is another JS-based templating language, and like Jade, it compiles into JavaScript, meaning it can be rendered on the client side. However, it too lacks HTML-specific syntactical improvements.

There are many other templating languages, but they all suffer from pretty much the same issues, or they just haven't gained a large enough supporting community to be recognized as a major language yet.

Installation instructions

To install the Jade compiler, you first need to have Node.js installed. This is a JavaScript interpreter based on V8 that lets you run JS outside of the browser. The installation instructions are available at http://nodejs.org/. Once you have Node.js installed, you can use npm (Node.js Package Manager) to install Jade from the terminal as follows:

$ npm install jade -g

(The -g command installs Jade globally—without it, you wouldn't be able to use the jade command)

Compiling Jade

Now that you have Jade installed, you can use the jade command to compile Jade files. For example, if we put some Jade in a file:

$ echo "h1 Some Jade" > file.jade

Then we can use the jade command to render that file.

$ jade file.jade

  rendered file.html

This will create file.html, as shown:

$ cat file.html
<h1>Some Jade</h1>

By default, jade compiles and renders the file, but if we only want it to compile into JS, we can use the --client argument, as shown:

$ jade --client file.jade

  rendered file.js

$ cat file.js
function anonymous(locals) {
jade.debug = [{ lineno: 1, filename: "file.jade" }];
try {
var buf = [];
jade.debug.unshift({ lineno: 1, filename: jade.debug[0].filename });
jade.debug.unshift({ lineno: 1, filename: jade.debug[0].filename });
buf.push("<h1>");
jade.debug.unshift({ lineno: undefined, filename: jade.debug[0].filename });
jade.debug.unshift({ lineno: 1, filename: jade.debug[0].filename });
buf.push("Some Jade");
jade.debug.shift();
jade.debug.shift();
buf.push("</h1>");
jade.debug.shift();
jade.debug.shift();;return buf.join("");
} catch (err) {
  jade.rethrow(err, jade.debug[0].filename, jade.debug[0].lineno,"h1 Some Jade\n");
}
}

This results in some very ugly JS, mostly due to the debugging information. We can remove that debugging information with the --no-debug argument.

$ jade --client --no-debug file.jade

  rendered file.js

$ cat file.js
function anonymous(locals) {
var buf = [];
buf.push("<h1>Some Jade</h1>");;return buf.join("");
}

The JS resulting from that could still be optimized a little bit more (and likely will be in future versions of the compiler), but because it's just machine-generated JS, it's not a huge issue. The important part is that this JS can be executed on the client side to render templates dynamically. This will be covered more in Chapter 4, Logic in Templates.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

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

Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free ~~$6.95~~

Premium delivery 6 - 9 business days

$21.95

(Includes tracking information)

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

Getting Started with Grunt: The JavaScript Task Runner

$38.99

$26.99

$54.99

Total $ 120.97

FAQs

What is the delivery time and cost of print book?

Shipping Details

USA:

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.

Unfortunately, due to several restrictions, we are unable to ship to the following countries:

Afghanistan
American Samoa
Belarus
Brunei Darussalam
Central African Republic
The Democratic Republic of Congo
Eritrea
Guinea-bissau
Iran
Lebanon
Libiya Arab Jamahriya
Somalia
Sudan
Russian Federation
Syrian Arab Republic
Ukraine
Venezuela

What is custom duty/charge?

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order?

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges?

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.

How can I cancel my order?

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy?

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged?

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use?

You can pay with the following card types:

Visa Debit
Visa Credit
MasterCard
PayPal

What is the delivery time and cost of print books?

Shipping Details

USA:

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Unfortunately, due to several restrictions, we are unable to ship to the following countries:

Afghanistan
American Samoa
Belarus
Brunei Darussalam
Central African Republic
The Democratic Republic of Congo
Eritrea
Guinea-bissau
Iran
Lebanon
Libiya Arab Jamahriya
Somalia
Sudan
Russian Federation
Syrian Arab Republic
Ukraine
Venezuela

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 Print?

Web Development with Jade

Chapter 1. What is Jade?

Markup like poetry

Why should I preprocess?

How Jade preprocesses

Comparison with other preprocessors

HAML

PHP

Jinja2

Mustache

Installation instructions

Compiling Jade

Tip

Summary

Page 1 of 4

What you will learn

Product Details

What do you get with Print?

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 Print?

Contact Details

Shipping Address

Billing Address

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

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