Great HTML markup should be clean and readable, however when you need to intermingle HTML with scripting code for server side rendering, this can be a bit difficult. One needs to look no further than the mess of PHP and HTML inside of a WordPress view to see the truth in this. Luckily, many frameworks implement some sort of templating system for easier to read and write views. By default Rails uses ERBs and many developers use the HAML gem to simplify view syntax even more, but today we will discuss the lesser used Slim gem.

First, a demonstration of the syntax:

body 
  h1 This is a page
  #main
     - @thing.each do | t |
         .title = t.title

The first thing to take note of when using Slim is that it relies heavily on proper indentation for nesting tags. Any minor indentation mistake will cause the view to break and cause a ‘Malformed indentation error.’ So something like this won’t work:

 body 
  h1 This is a page
#main 
  [email protected] do | t |

This is a somewhat trivial example, as it is pretty obvious that the #main tag should be a child of the body tag; however, sometimes tracking down indentation errors can be a little trickier, such as accidentally inserting a tab somewhere instead of spaces. While initially this can be frustrating, it goes a long way toward forcing the developer to create well structured markup.

Anytime you need to use Ruby code that will not output anything to the page, you use a dash. In this case we used the dash to iterate through the @thing object. Notice in the example there is no ‘end’ to denote the end of the .each block, rather indentation is used to to define where a block begins and ends. The dash is used for any control code, so another example would be using an if statement to check if the user is logged in before rendering user options. For example:

-if user.logged_in?
   li 
     a href=user_show_path Your Profile

If output from Ruby is needed, the equal sign is used. In the first example, the title property of the ‘thing’ object is outputted to a ‘div’ with the ‘title’ class. No tag name you say? That’s the other thing, just a period or hashtag can be used to denote a ‘div’ with the specified class or id. This can be very handy when using Bootstrap, which relies on a lot div tags with multiple classes applied to them. I find using using Bootstrap considerably less of headache when using Slim. Consider using Bootstrap for a form:

<form>
  <div class=’form-group’>
      <input type=’text’ class=’form-control’  placeholder=’something’>
  </div>
  <button type=’submit’ class= ‘btn btn-default’>Submit</div>
</form>

which becomes:

 form 
   .form-group
      input.form-control(type=’text’ placeholder=’something’)
    button.btn.btn-default(type=’submit’)

Although, some of this is very similar to HAML, in my mind Slim is cleaner and simpler to follow; anything without a dash or equal sign is generally HTML. A div that has many classes applied to it can be defined with each of those classes separated with a period. Say you needed a bunch of column classes for Bootstrap:

.col-md-2.col-sm-4.col-xs-6

Considering how complicated a responsive view may get when using Bootstrap, such as multiple column sizes, complicated navigation bars, hidden elements on smaller devices, etc; Slim becomes very invaluable in the amount of time in saves in writing markup and keep your collaborators sane by keeping your markup easy to follow.

You may think all of this fancy parsing comes with a price, but Slim actually has been built with performance in mind. Some enterprising sorts have done benchmark tests showing that Slim is a bit faster than HAML. Slim even makes inline JavaScript easy, if you are into that sort of thing:

body
  javascript:
     alert(‘Here is some javascript being used’);

So, why not give it shot? Slim down those views.