O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Web Development with Jade

Book Description

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.

In Detail

Jade is a template engine for node.js and the default rendering engine for the Express web framework. It is a new, simplified language that compiles into HTML and is extremely useful for web developers. Jade is designed primarily for server-side templating in node.js, but it can also be used in a variety of other environments to produce XML-like documents such as HTML and RSS.

This practical, example-oriented guide will teach you how to write Jade, utilize its features, and recognize the best ways to organize templates in your projects. With this book, you will avoid the common pitfalls and issues with sparse documentation, allowing you to learn Jade faster and use it more effectively.

To understand Jade, we will first examine the reasons for its design and how these translate into a tool that can provide real benefits to you. You will develop confidence with each of the features of the language with the help of practical examples and thorough explanations. We will cover preprocessors, basic syntax, feeding data into templates, and incorporating logic. By the end of this book, you will be able to effectively use essential features such as filters and mixins as well as template inheritance through a block system. To tie it all together, we will also look at some of the best practices to follow when organizing your Jade projects.

Use this comprehensive guide to the Jade language to help you become a more efficient web developer.

What You Will Learn

  • Write cleaner, indentation-based 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 Jade-based projects
  • Apply shorthand for brevity
  • Utilize Jade for client-side templates
  • Employ techniques like filters to quickly mock-up web pages in higher level languages like stylus or coffeescript

Table of Contents

  1. Web Development with Jade
    1. Table of Contents
    2. Web Development with Jade
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. What is Jade?
      1. Markup like poetry
        1. Why should I preprocess?
        2. How Jade preprocesses
        3. Comparison with other preprocessors
          1. HAML
          2. PHP
          3. Jinja2
          4. Mustache
        4. Installation instructions
      2. Compiling Jade
      3. Summary
    9. 2. Basic Syntax
      1. Significance of whitespace
      2. Tags
        1. Text and blocks of text
          1. Text on the same line
          2. Text blocks
          3. Shorthand text blocks
      3. Inline HTML
      4. Attributes
        1. Passing objects as attributes
      5. Shorthands
        1. IDs and classes
        2. Automatic div
        1. Single line
        2. Block comments
      7. Block expansion
      8. Doctypes
      9. Summary
    10. 3. Feeding Data into Templates
      1. Syntax
      2. Defining variables
      3. Interpolation everywhere!
      4. Using variables without interpolation
      5. Escaping
      6. Sending the variables to the compiler
        1. Compiler arg
        2. Programmatically
      7. Summary
    11. 4. Logic in Templates
      1. Adding logic with JavaScript
        1. If/else
        2. For loops
        3. Complex operations
      2. Built-in logical operators
        1. If / else / else if
        2. Unless
        3. Cases
        4. Each loops
        5. While loops
      3. A warning about interpolation
      4. Summary
    12. 5. Filters
      1. The full list
        1. Template engines
        2. Stylesheet languages
        3. Minifiers
        4. Others
      2. Examples
        1. Markdown
        2. CoffeeScript
        3. Stylus
      3. Passing arguments
      4. Summary
    13. 6. Mixins
      1. Syntax and mechanics
        1. Defining mixins
        2. Calling mixins
        3. Passing blocks
      2. Another warning about interpolation
      3. The arguments object
      4. Summary
    14. 7. Template Inheritance
      1. Blocks
        1. Blocks don't provide encapsulation
      2. Extends
        1. Replace
        2. Append
        3. Prepend
        4. Incompatibility
        5. Extra things in extenders
      3. Includes
        1. Static
        2. Filtered
        3. Jade
      4. Summary
    15. 8. Organizing Jade Projects
      1. General best practices
        1. Keeping logic out of templates
        2. Inlining
        3. Minification
        4. Removing style-induced redundancy
        5. Semantic divisions
        6. Server-side versus client-side rendering
          1. Client-side rendering
          2. Server-side rendering
        7. Build systems
      2. Summary
    16. A Closing Note – Contributing Back to Jade
    17. Index