Book Review: Web Development with Jade

Packt Publishing recently published Web Development with Jade by Sean Lang. The subtitle of this book is "Utilize the advanced features of Jade to create dynamic web pages and significantly decrease development time."

Web Development with Jade is a relatively short book coming in at under 60 pages of main content divided into eight chapters and a one-page appendix. As is the case with most Packt Publishing books, the Preface contains useful information for people trying to decide whether to purchase the book. The Preface describes Jade as "a templating engine for Node.js" that is a "new, simplified language that compiles into HTML and is extremely useful for web developers." About Web Development with Jade, the Preface states, "This book is an introduction to Jade, and it will provide readers a with faster and cleaner way to write HTML that is more maintainable and automates redundant markup."

The Preface of Web Development with Jade states that the book is designed for "web developers with at least a basic understanding of HTML and JavaScript" and that readers of the book should have access to Node.js and a text editor.

Chapter 1: What is Jade?

The initial chapter of Web Development with Jade introduces Jade as "a templating language and a shorter, more elegant way to write HTML." The chapter discusses preprocessors in general before describing use Jade preprocessing specifically. The early part of this chapter also compares Jade to potential alternates HAML, PHP, Jinja2, and Mustache.

The first chapter moves to discussion of installing Jade by downloading Node.js and using the Node.js Package Manager (npm) to install Jade from the command line. With Jade installed, the chapter concludes with examples of compiling Jade template code into JavaScript and HTML.

Chapter 2: Basic Syntax

The second chapter of Web Development with Jade begins coverage of Jade syntax by explaining that indentation is used in Jade rather than opening and closing tags and braces like some other languages and templating tools use. This chapter does a nice job of presenting the basics of Jade syntax in an approachable manner. Seeing is believing and it's this chapter filled with simple examples that really "sells" one on the expressiveness of Jade better than any amount of descriptive text could.

Chapter 3: Feeding Data into Templates

Web Development with Jade's third chapter begins by demonstrating that JavaScript code can be executed within Jade templates by prefixing the JavaScript code with a hyphen and a space. The chapter describes and illustrates with examples how to use interpolation and escaping in Jade. The chapter also discusses and demonstrates providing data to a Jade template being compiled via compiler argument using --obj and via programmatic application of client-side Jade utilities in runtime.js.

Chapter 4: Logic in Templates

Chapter 4 of Web Development with Jade begins by introducing JavaScript-based logic (if/else, for, etc.) added to Jade templates. The chapter then moves to coverage of built-in Jade logical operators (if/else/else if, unless, cases, each, while) that read cleaner than embedded JavaScript.

Chapter 5: Filters

The fifth chapter of Web Development with Jade discusses use of other preprocessed languages within Jade by taking advantage of Jade filters and the underlying transformers library. The chapter provides a lengthy list of supported template engines along with lists of supported stylesheet languages, minifiers, and a miscellaneous category of supported preprocessor languages. The author then demonstrates embedding a subset of these (Markdown, CoffeeScript, and Stylus) into Java via code examples.

Chapter 6: Mixins

Web Development with Jade's sixth chapter covers Jade mixins and describes mixins as "small, encapsulated pieces of code that are reusable throughout the template" that "allow you to reduce redundancy" and to "make code easier to understand by providing good names." The chapter introduces mixin syntax, demonstrates passing of values and blocks of code to a mixin via arguments, and warns again regarding use of interpolation with mixins.

Chapter 7: Template Inheritance

Chapter 7 of Web Development with Jade covers insertion of "interchangeable blocks into templates" to "prevent you from needing to repeat [a base page layout] in every single file." The chapter describes and illustrates using the block keyword to designate Jade blocks. The chapter includes concise descriptions and short, clear example of how to extend, replace, append and prepend template blocks.

The seventh chapter also describes and provides examples of using Jade's support for includes, which it describes as the "simplest way" to "insert content from another file," but which is "the least dynamic because you cannot change/generate the name of the file you want to include." Static assets, filters, and including external Jade files are demonstrated and discussed as types of includes.

Chapter 8: Organizing Jade Projects

The eighth chapter of Web Development with Jade covers applying "conventions and best practices" when developing with Jade. After pointing out that most HTML conventions and best practices apply to Jade as well, the author discusses "more Jade-specific" practices.

The use of JSON to separate business logic from presentation is covered and the author recommends using JSON Schema. The section of this chapter on inlining explains the advantages of not inlining source code, but inlining compiled code. This section references Yahoo! Developer Network's Best Practices for Speeding Up Your Web Site and the assetgraph optimization framework (the latter of which is also recommended for minification).

Other practices discussed in Chapter 8 include use of mixins to remove redundant style specifications, "dividing templates into separated mixins and blocks," selecting between client-side rendering and server-side rendering, and build systems (Grunt, roots, and make).

Other Observations

• Web Development with Jade is, at times, an opinionated book. Examples of this include the author calling angle brackets used in HTML/XML "lame and ugly" and stating that "PHP's already awful design" combined with ability to easily mix presentation and business logic "makes for some pretty horrific code." I don't mind this kind of opinionated writing (even if I don't always fully agree with it), but some readers might be put off by it.
• The code examples in the PDF version of Web Development with Jade feature color coded syntax, making the code easier to read.
• There are a few basic graphics in Web Development with Jade. Although all of these are pretty basic in terms of aesthetics (they look like simple diagrams drawn in PowerPoint), they do a great job of communicating the message they are intended to communicate.
• Although I had never seen Jade before reviewing this book, I quickly became comfortable with Jade's syntax and prime uses after the quick read of the relatively short Web Development with Jade. Although Jade is not particularly complex and seems easy to pick up, there does appear to me to be a dearth of introductory Jade resources. LearnJade.com has some good introductory Jade material. The Jade Language Reference provides some nice code examples minimal explanations, but the Jade Tutorial is still lacking quite a bit of content. Web Development with Jade combines tutorial information, basic language reference information, and additional usage explanations in a single easy-to-read and convenient location.
• The examples are simple and only a rudimentary knowledge of HTML, CSS, and JavaScript is needed to understand the discussion and examples.

Conclusion

Web Development with Jade is an excellent introduction to Jade. Web Development with Jade concisely and clearly outlines the basics of Jade and provides some thoughts on how Jade might be applied in web development. Jade seems to be a templating language that is easy to learn and Web Development with Jade appears to me to be the most efficient available approach for quickly learning this templating language.