Nov 23, 2015

JADE give you a beer

When I had started my front-end development last year, I think it’s a easy job, how to code HTML and managing CSS, but after a several months of development, I feel like a stupid rather than a front-end developer, working on the same stuff repeatedly which are commonly used especially HTML, and it’s wasting effort to act as a robot, that’s frustrating and a huge barrier to other deserve and innovative development. After a few days of research, I found my shiny gem, JADE.

I don’t know how to describe JADE is the best way, but I will simply say OOHTML/OOJADE to my colleague. Talking about OO (Object Oriented) every backend developers will have a light bulb above their head as they can write JADE in a structural way to compile HTML dynamically.

DRY (Don’t repeat yourself), time deserve for more.

There are many common elements are widely used on our web, we have button, dropdown, form… etc. Let’s take a closer look on button.

Refer to Bootstrap, we have 3 elements to represent a button:

<button>button text</button>

<a>button text</a>

In JADE syntax, we can written in:

button button text

| button text

input(value=”button text”)

You will see the syntax is much more minimal than HTML, no more closing tag and symbols, it’s greatly prevented human mistakes and writing effort.

In this 3 elements, they have some common attributes which have id, class, type…, and some are tag specific, anchor have href and value for input, why don’t we write the button to a more semantic method to let us use it in a more convenient way? Let’s try something like this:

+btn(‘button text’, ‘button’)

+btn(‘button text’, ‘a’)

+btn(‘button text’, ‘input’)

On above, we have 3 lines of code to create 3 buttons, they are having same button text in the first argument, and the tag element on behind. Who guess we can add 3rd argument or using JSON format configuration for some large scale and long term development? Chill with the beer and share your ideas, JADE is over five years of development and maybe a JADE framework like Bootstrap will happen soon.