Tuesday, January 7, 2014

Hey Jade

Its been a few years but I think the romance is finally over, i'm breaking up with Jade. At first I thought Jade was weird, she was mostly naked and always very strict about her structure. After a couple of weeks of prodding by my peers I learned to like and even fall in love with Jade. I took her everywhere and to every company and start-up I could. I introduced her to E-Commerce, Financial Services, Security platforms and even a charity or two but she was always a bit out of place.After a while of enjoying her nakedness and terse nature things started to fall apart - it's not me, it's you.

I'm sure you all know that i'm really talking about the Jade template engine and syntax which is the nom de plume of folks building products with Express.js. I'll discuss what I've chosen to move to shortly but more of the pain after many years of joy.

Technology needs to get out of our way, it should be the tool we use and not the focus of the product we are trying to build. In short technology decisions, especially at the markup level, should enable and not become the conversation. Over the past year we've worked with UX experts, designers, front-end engineers as well as a top creative agency and in every situation I needed to make excuses for Jade. I would be heard saying "It's just like HAML, don't worry" or "just give us the HTML and we'll convert it to Jade". That last one really struck me, why are we obfuscating something as ubiquitous as HTML. For all of its tending towards verbosity HTML is simple and understood by the non-coders in your life. But us cool kids wanted to make it more expressive and cut out any unnecessary noise. Instead I'm afraid we've screwed the pooch by creating yet another esoteric piece of kit as we worship at the alter of technology progress and change in spite of users, in this case my users were the UX & design talent we've employed. So I decided today to stop the insanity and switch our front-end markup code base back to HTML while taking advantage of Swig templates.

<h1>{{ pagename|title }}</h1>
{% for author in authors %}
  <li{% if loop.first %} class="first"{% endif %}>
    {{ author }}
{% endfor %}
Enter Swig, its HTML with handlebars style syntax, custom tag creation & fast server side rendering with pre-compilation options. I've converted over one mobile app and one web app so far and really am grokking its ease and HTML structure.

{% if foo %}bar{% endif %}

// Create a list of people, only if there are items in the people array
{% for person in people %}
  {% if loop.first %}<ol>{% endif %}
  <li>{{ person.name }}</li>
  {% if loop.last %}</ol>{% endif %}
{% endfor %}
I can now call on UX & front-end talent not worrying about making excuses for my odd companion named Jade, we had a good run. I am still dating CoffeeScript though, perhaps she'll also get thrown under the bus someday, probably once ES6 is a browser standard.

No comments:

Post a Comment