Essentials and future of web development, HAML, Jade, Emmet & Slim.

Earlier in my previous blog post, we have gone through why haml is taking lead over simple HTML syntax, but some geeks (specially over linkedIn group “HTML5 / CSS3 / Javascript”) shared their thoughts and compared other engines. Some of them i was aware and some of them was new to me too, So in this post i tried covering the major topics with some practical guide. Hopefully this could give you some insights.

Mentioning some techies whom i tried to answer in this post:

Michael Mikowski, Dejan Ristic, Patrick de Bie, Rémi Rémino, Jeffrey Gochin, Joshua Barker, Felix Deimling, Alan Reid, Ilton Sequeira, Marcos Méndez Filesi, Luca Cavallin, Nicolai Moraru, Koen Cornelis, Nejc Vukovic, Jory Braun, Eddie Ebeling, Vladimir Parchev, Dong Zhu, Riccardo Ratini, Riccardo Ratini, Martin Rios Reynoso, Gabriel Meola, Kartik Jagdale.

In previous post we saw the syntax and usage of HAML, so a bit intro about how to compile and practically usage guide of acquiring HAML.

HAML IN ACTION:

As Haml requires Ruby to be compiled to HTML, so the first step to using it is to ensure that Ruby is installed. Confirm whether Ruby is installed then geminstall haml command needs to be run from the command line, using Terminal or the alike command line program, to install Haml.

gem install haml

Files written in the Haml markup should be saved with the file extension of .haml. To convert these files from Haml to HTML the haml command below needs to be run to compile each individual file.

haml index.haml index.html

Above, the file index.haml is converted to HTML and saved as index.html within the same directory. This command has to be run within the same directory the files reside in. Should the command be run outside this directory the path where the files reside need to be included within the command. At any time the command haml --help may be run to see a list of different available options.

Watching a File or Directory

Haml doesn’t provide a way to watch a file, or directory, for changes but using of another dependency we can do so.

Inside of a Rails application a Haml dependency may be added in the Gemfile, thus automatically compiling Haml files to HTML upon any changes. There are a few desktop applications available for those not using Rails, one of the more popular being CodeKit.

Something about SLIM:

As Haml and Jade, slim is also allows you to write very minimal templates which are easy to maintain and make you sure about producing well-formatted HTML and XML.

Definitely, SLIM is faster and that differentiate is from other engines.

Slim is a fast, lightweight templating engine with support for Rails 3 and 4.

How to start?

Install Slim as a gem:

gem install slim

Include Slim in your Gemfile with gem 'slim' or require it with require 'slim'. That’s all! Just use the .slim extension and it’s good to go.

Haml & Slim

I got to know, how slim is better then haml like,

Slim is about 8 times faster than Haml and Slim supports HTTP streaming

But these points comes into consideration while creating full scalable webapp, but not basic applications.

HTML is perfect if you just need a simple website. But if you’re getting into more complicated projects a templating language is great – especially if you already use SCSS or LESS.

All templating languages require time so expect to set aside practice sessions. Ultimately these are all great choices and your decision should be based on which processor you feel most comfortable using. If you like Ruby then Haml is a great choice. If you like Node.js then Jade is also fantastic.

Analysis of Slim vs. Haml Project Health

Analyze here

Emmet

An alternative to writing Haml/Jade is to use an Emmett plugin for your text editor, which takes syntax like Haml/Jade but will turn it into HTML which you save. If you’re writing a lot of HTML, but don’t want  to learn Haml/Jade, Emmett could be a good option.

Emmet support for ATOM

You can install the latest Emmet version manually from console:

cd ~/.atom/packages
git clone https://github.com/emmetio/emmet-atom
cd emmet-atom
npm install

Learn Official emmet usage : here

JADE

Jade – robust, elegant, feature rich template engine for Node.js

With Jade, you can create config files, “blocks” of code, inheritance of different files using “include”, and most interestingly effective of all, usage of javascript code seamlessly on HTML pages.

Jade is designed primarily for server side templating in node.js, however it can be used in many other environments. It is only intended to produce XML like documents (HTML, RSS etc.) so don’t use it to create plain text/markdown/CSS/whatever documents.

Go through the Jade Syntax Documentation (30 min). here

Setting up jade in the project: Standalone Jade Usage

HAML AND JADE:

I wrote “and” between them, don’t know but i don’t wanted to write “vs” in between.

Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node and browsers.

In this small post its not possible to define all engines briefly but it contains the intro and their usage, Your comments and suggestions are welcome.

Hope you liked it!!