Ruby Unconf 2019

Rails Slim, An Introduction

Ruby Unconf 2019

00:00:05 I'm from Wisconsin in the United States. I was talking to someone earlier at the conference yesterday, and I told him how much I loved Rails Slim. They said they hadn't heard of it, and I thought, 'I use this every day and I love it so much.' So, I thought I'd pull together something quick about it because I just think it's incredibly interesting. We are lucky enough to be joined by one of the maintainers, Zuv.
00:00:21 A little bit about me: I'm actually a current student pursuing my bachelor's degree in software engineering in Milwaukee, Wisconsin. I'm currently working at Phrase in Hamburg. I'm a huge fan of Python, Kotlin, and of course, Ruby. That being said, I've been told I have a very heavy American accent, so if you can't understand what I'm saying, just make a weird hand movement, and I'll try to speak better.
00:00:54 I love Ruby, but my issue with it is embedded Ruby. I can't stand the syntax of it and I find it very confusing. I had worked with PHP previously and used embedded PHP, where I had the same issue. PHP actually has a similar solution to Rails Slim, and I really like Rails Slim a lot. It's cleaner and neater, and I don't have to hit the % symbol so many times, which is absolutely amazing for me.
00:01:38 So, what is Slim? According to the Rails Slim documentation, it's a fast, lightweight templating engine with support for Rails 3 and later. I had read somewhere in the documentation that their driving question was, 'What's the minimum required to make this work?'. Once we see some examples of code snippets later, you can see it's much more than that. I don't want to say it's condensed because 'condensed' implies messy; it's condensed but very clean, brief, and beautiful. Personally, I think it's beautifully readable markup.
00:02:11 So what constitutes beautiful markup? Here is some embedded Ruby. It includes everything we're used to with HTML, such as the wonderful percent signs and angle brackets. Now, at the bottom, here is Rails Slim. I think it really condenses everything nicely. We don’t need the little angle brackets to include the head; we can include links to stylesheets simply with the equal sign. We avoid all those angle brackets and percent signs. We can use the angle equal sign for almost all elements in a header or navbar.
00:02:38 In the sample, we see how we can combine classes together, so we don't need to have a cumbersome class structure. Instead of having multiple class declarations, we can separate them with a period. This maintains the general layout we are used to, while taking up much less space.
00:03:01 Personally, I think this makes the code incredibly more readable. For example, here we have the navigation class. It’s a div, but we don't need to declare the div explicitly because we avoid unnecessary minimalistic types. We have this div with a class of 'nav', and we can see our list items and links clearly following a straightforward path, which is easy to follow as I read from left to right.
00:03:30 So, here’s the power of the dash in Rails Slim. I hastily put together this presentation after realizing I really wanted to share this information. It's not a huge code example, but with the dash, you can access anything in Ruby directly in your Slim document.
00:04:06 In this example, let's say I have my show method back in the controller, and I have to find a variable called 'values'. Accessing it is very similar to embedded Ruby, but it's more succinct. You access it much like embedded Ruby, but I can do it more cleanly with just a dash, making it more readable.
00:04:39 We use Rails Slim at work, and I use it every day. It's self-documenting code, as it's clear what it's doing. For instance, you can iterate through each value without having to parse through the different syntactically complex elements that embedded Ruby presents.
00:05:36 Some advantages of Rails Slim include the absence of closing tags, which really shortens the amount of space used. In general, it leads to fewer lines of code to look at. This makes pull requests clearer, as you can easily see what’s happening, making the code more readable.
00:06:03 Without angle brackets, you can simply write what you want. For instance, I can specify an 'h' tag directly with a class name, making it very succinct and compact, without needing to declare unnecessary divs unless absolutely necessary.
00:06:52 This is by no means a bash on Haml or any other Ruby templating tool. I'm just not a fan of the % symbol. Coming from an American QWERTY keyboard, accessing it usually requires a shift, which can be cumbersome in time-sensitive situations—like during a hack day project I once participated in. It was quite frustrating.
00:07:26 However, Slim is a very valuable solution overall. I believe Rails Slim offers a more elegant and succinct alternative. You can use Rails Slim without logic, of course, solely for HTML elements. However, if you want to incorporate Ruby logic, you definitely want some conditional statements.
00:08:09 Because I put this presentation together in a hurry, I made a simple show method with a variable called 'secret_condition'. If I wanted to include something in Slim with this, it's very similar to embedded Ruby. I can use an if statement just with a dash and call 'secret_condition'. I can link to internationalization or simply render the form based on this condition.
00:09:20 Rendering is also easy, as both 'link_to' and 'render' come after the equal sign. There's no need for prefacing or closing tags as required in embedded Ruby. It's clean and simple. I find that smooth syntax appealing, just as I do with Python, which feels elegantly structured.
00:09:53 Here, on the left, we have a common example of HTML that isn’t very clean or aesthetically pleasing. My eyes tend to get lost in such markup. On the right, however, is the Slim version. You can define IDs using hashes, making the code more succinct.
00:10:23 If I want a div with an ID for 'top_div', we don't need to explicitly declare that div. Using an octothorpe makes the declaration clean right next to the class name. This way, we can declare the ID alongside any element efficiently, ensuring the code remains compact.
00:11:06 So, if I have a beautiful header element with an ID of 'my_awesome_header', you can see how easily this can become a single, compact line of code. Instead of three lines for simple text, we can just define the ID and the text in one line.
00:11:28 Concerning tags, on the left, you see an unordered list in HTML. On the right is the Slim version, which condenses it down effectively, removing the need for angle brackets and reducing the number of lines required to create a simple list.
00:12:05 So, in the Slim approach, we have a more efficient way of merging attributes. When defining a header with a class of 'header_message', you have the option to choose where you put your class in relation to the ID—before or after, but it remains compact either way.
00:12:40 Ultimately, Rails Slim offers a neat way of compacting your markup. It provides a more streamlined syntax than embedded Ruby and is very readable. The aesthetic is minimal, and there's no requirement for minimalistic selectors.
00:13:10 It allows for logical flow in the code, which is easily understandable. You can write plugins and extensions for it, and it has automatic HTML escaping by default, making it scalable.
00:13:28 And that is it.