Ember + Emblem JS = Happiness

December 31, 2014 • Damien White

I’ve talked about Ember in my past few posts, and figured I would continue. Today we’ll look at an alternative templating library to Handlebars, Emblem.js.

Alternate Templating Engines

If you work with Ember, you’re very familiar with Handlebars. Handlebars makes it easy for us to add expressions to HTML. Writing HTML is great and all, but it’s very verbose. There are alternate templating engines available for server-side frameworks like ASP.NET MVC, and Rails. Two of these templating engines are Ruby Slim and HAML, both of which allow you to write slimmed down versions of HTML. But of course all of the engines render straight HTML as that is what browsers understand. Writing slimmed down HTML is advantageous for a few reasons. It definitely saves typing and thus time. Both Ruby Slim and HAML are sensitive to whitespace, meaning that your markup needs to be properly indented as indentation is important to determining hierarchy. With HTML, you can write all sorts of messed up code and how fun is that to maintain? We as developers usually try to keep our code properly indented, but these alternative templating engines, force us to maintain that standard. Finally, these alternate templating engines just make your code look nicer as well as easier to maintain. Why should the server get all the templating love? Now if only there were just a client-side version of something like Ruby Slim ;)

Introducing Emblem JS

Emblem JS takes the concepts from the above templating engines, and brings it to our client-side templates. Its syntax is very similar to Ruby Slim. In fact when editing Emblem templates inside Sublime Text (my editor of choice for a good portion of my development; sorry Visual Studio), you can use the Ruby Slim package to get syntax highlighting inside your Emblem files.

If you’ve worked in the Rails world and have used Ruby Slim or HAML, you’re going to love Emblem. For those of you not familiar with Rails/Slim/HAML, once you start writing using their style, you won’t want to go back.

Let’s look a few examples.

Here’s a simple menu, done with Handlebars

<ul>
  <li>{{#link-to "index"}}Home{{/link-to}}</li>
  <li>{{#link-to "about"}}About Us{{/link-to}}</li>
</ul>

And now for Emblem

ul
  li = link-to "index" | Home
  li = link-to "about" | About Us

Our code is much cleaner with Emblem than Handlebars. How about one more example? First Handlebars:

<img {{bind-attr src="logoUrl"}} alt="Logo">

Now Emblem:

img src=logoUrl alt="Logo"

You have to agree, that is much, much cleaner!

I could go on and on with examples, but I’m not looking to replicate the awesome documentation that Emblem has on its site. Check out the Syntax and Idioms for a better idea of what Emblem brings to the table.

You’re Sold!

Ok, you’re sold on the idea and want to give Emblem a try. Well, I’ve got you covered. A few posts ago, I wrote about using Emblem with Ember-CLI.

Wait, you aren’t using Ember-CLI? Really? You should be if you’re developing an Ember application. It brings excellent conventions to the table and makes your Ember app easy to follow for new developers. I really encourage you to check it out. Alas, there are plenty of other ways you can install Emblem in your application as outlined in the documentation.

Welcome to the world of client-side templating, we have cookies!

Posted in ember and tagged with ember, ember-cli, emblem, handlebars

Damien White

I am a software architect with over 16 years of experience. I simply love coding! I have a driving passion for computers and software development, and a thirst for knowledge that just cannot be quenched. I'm happy to share what I know in my quest to learn as much as possible. I focus most of my time on web development using Ruby on Rails, Ember.js, and ASP.NET MVC.

comments powered by Disqus