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>
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:
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.