Practical Jade 2

Eclectic Boogaloo

Last year, I wrote about the practicality of using Jade on a project.If you are unsure whether Jade is right for your project, I suggest you read that article first. This post is about concepts to use in your project.

Patterns

Patterns, to me, are pieces of code that is sort of invisible. It exists, but only when called. Things I qualify as patterns for Jade would be functions or mixins. I opt to have a dedicated pattern folder for every project and include the files into my alpha layout(more on this later). This allows me to bundle them in a known area and use them anywhere on the site. The hardest part of patterns is deciding whether something will be repeated.

One of the most important patterns files I use is one I call "control". This files houses a lot of variables. Things like default titles, arrays for navigation items, possibly taglines or other brand specific things. It allows me to quickly make changes to important things that get repeated quite often in the site.

Patterns are a very simple thing, but the need might not be apparent right off the bat. They are probably the single most important part of my Jade project structure.

Currying

Currying is a practice commonly used in JavaScript. It is using one function to return another.

// Currying Example
var menu = {}
function menuItem(mealType){
   return function(name, price){
     if(menu[""+mealType] === undefined){
         menu[""+mealType] = [];
     }
     menu[""+mealType].push({name: name, price: "$"+price})
   }
}

var breakfastItem = menuItem("breakfast");
var lunchItem = menuItem("lunch");
var dinnerItem = menuItem("dinner");

breakfastItem("Eggs and Bacon", "1.50");
breakfastItem("Eggs and Sausage", "1.50");
breakfastItem("Eggs and Ham", "1.50");
lunchItem("Broccoli Soup", "1.50");
lunchItem("Grilled Cheese", "4.00");
lunchItem("Chicken Burrito", "6.00");
lunchItem("Hamburger", "6.00");
dinnerItem("Meatloaf", "7.50");
dinnerItem("Chicken and Vegetables", "8.00");
dinnerItem("Speghetti and Meatballs", "7.00");

In the example above, I have a function called menuItem that takes a parameter and returns another function that requires two more parameters. The first function, or alpha function, accepts and menu type while the child function accepts a meal name and price. It allows me to reuse the functionality of the nested function without repeating it.

I use currying mostly with layouts in jade. This allows me to use one major layout, and several minor layouts. I use a similar set up on this very site, with the article layout inheriting the alpha layout, but adding things like my author bio, along with other things.

Alpha layout - The main layout for the site

//layout-alpha.jade
include patterns/_controls
include patterns/_article-heros
include patterns/_get-date
doctype html
html
   head
       block head
       include modules/_global-head
   body
       include modules/_global-header
       main
       block content
       include ./modules/_global-footer

Article layout - layout used exclusively for articles.

//layout-article.jade
extend layout-alpha
block content
	article.article-single
		block article
		div.wrapper
			include ./modules/_article-footer

And those are my tips for efficient and productive Jade code. If you have any suggestions, or just want to say hi, shoot me a message on twitter!

Comments