The Skinny on Slim

The Skinny On Slim
Presentation by Eric Mulligan

➢ What Is Slim?
➢ Why Slim?
➢ Syntax
➢ Features
➢ Slim vs HAML & ERB
➢ Demo
Outline

➢ A template engine for Ruby.
➢ Developed by Daniel Mendler in 2010.
➢ Similar to HAML & Jade (JavaScript).
➢ Supports Rails 3 & 4, Sinatra and other Rack-based
web frameworks.
➢ Tested on all major Ruby implementations.
What Is Slim?

➢ Core syntax is guided by one thought:
“What is the minimum required to make this work?”
➢ Allows us to write minimal templates.
➢ Syntax is aesthetically pleasing which makes it fun to
write templates.
➢ Designed with performance in mind.
➢ Guarantees well-formed HTML and XML.
➢ Faster to compile than HAML.
Why Slim?

Installation:
From the command line:
From a Gemfile:
Verbatim Text:
‘|’ tells Slim to copy the line and does no
processing. You can even embed HTML and it
will simply output it as is.
Syntax
gem install slim
gem ‘slim’
| This is some random text.
Outputs:
This is some random text.
| A paragraph.
Outputs:
A paragraph

Control Code:
The ‘-’ denotes control code such as
conditionals and loops. ‘end’ is forbidden as
blocks are defined by indentation only.
Dynamic Content:
The ‘=’ outputs the result of the Ruby call and
adds the output to the buffer.
The ‘==’ is the same as ‘=’, however, all HTML
is not escaped which is perfect for ‘yield’ and
‘render’ method calls.
- if @users.empty?
- @users.each do |user|
| I am a user.
= javascript_include_tag ‘application’
p = link_to ‘Link’, ‘#’
== yield
== render ‘partials/form’, locals: { user: @user }
Syntax (cont.)

Comments:
‘/’ does not output any markup.
‘/!’, however, outputs HTML comments.
‘/[if IE]’ outputs IE conditional comments.
Syntax (cont.)
/ This line won’t be displayed.
/! This line will be displayed as an HTML comment.
Outputs:
Some paragraph<![endif]-->

DOCTYPE:
HTML doctypes:
XML doctypes:
doctype html
doctype 5
Outputs:
<!DOCTYPE html>
doctype 1.1
Outputs:
<!DOCTYPE html PUBLIC - “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
doctype xml
Outputs:
<?xml version=”1.0” encoding=”UTF-8” ?>
Syntax (cont.)

Inline Tags:
Adding ‘:’ between tags allows us to add
multiple tags in one single line.
Attributes:
Wrapping attributes is not required, but it does
improve readability. We can wrap attributes
with ‘{}’, ‘()’ and ‘[]’.
ul.alert.alert-danger: li: a href=”/” First link
Outputs:
<ul class=”alert alert-danger”>
<li><a href=”/”>First link</a></li>
</ul>
a href=”/” rel=”nofollow” Link Text
a[href=”/” rel=”nofollow”] Link Text
a(href=”/” rel=”nofollow”) Link Text
a{href=”/” rel=”nofollow”} Link Text
Outputs:
<a href=”/” rel=”nofollow”>Link Text</a>
Syntax (cont.)

Attributes (cont.):
Slim permits us to wrap attributes with ‘*{}’
which allows us to use a Ruby Hash-style
syntax.
Slim allows attribute values to be Ruby code
that outputs a string.
a*{:href => ‘/’, rel: ‘nofollow’} Link Text
Outputs:
<a href=”/” rel=”nofollow”>Link Text</a>
a href=root_path Link Text
Outputs:
<a href=”/”>Link Text</a>
Syntax (cont.)

Text Interpolation:
Slim allows the use of Ruby string interpolation
in attribute values as well as in the text
content.
img src=”/images/example.png” alt=”Welcome
#{user.name}” /
Outputs:
<img src=”/images/example.png” alt=”Welcome Eric
Mulligan” />
p Welcome #{user.name}
Outputs:
Welcome Eric Mulligan
Syntax (cont.)

➢ Outputs:
○ Pretty HTML in Development.
○ Ugly HTML in Production.
○ Valid XHTML.
➢ Sorts attributes by name.
➢ Automatic HTML escaping by default.
➢ Unicode support for element and attribute names.
➢ Support for Embedded Engines such as Ruby,
CoffeeScript, JavaScript, Markdown, etc.
Features

➢ To configure:
○ Create slim.rb in “config/initializers”.
○ Slim::Engine.set_options({...configuration hash…})
○ shortcut: { ‘@’ => { attr: ‘role’ } }:
■ p#example.slim-example@admin Some text
■ Outputs: Some Text
○ format: :html:
■ Outputs HTML 5 markup instead of the default XHTML.
○ pretty: true:
■ Outputs pretty HTML instead of ugly HTML regardless of the environment.
Features (cont.)

➢ Embedded Ruby (ERB):
○ Ruby code is embedded in HTML markup.
○ Easier to use in projects where web designers have little to no
coding experience.
○ Faster to compile than Slim.
○ Recommended by David Heinemeier Hansson (aka DHH)
(Rails Creator & Basecamp Founder).
Slim vs ERB & HAML

➢ HTML Abstraction Markup Language (HAML):
○ Created by Hampton Catlin (Sass) in 2006.
○ Slim is influenced by HAML.
○ Slight syntax difference between HAML and Slim.
■ HTML/XML elements start with %
● %html, %body, %h1, etc.
■ () used for HTML-style attributes.
● %a(href=”http://google.com”)
Slim vs ERB & HAML (cont.)

➢ Performance:
○ Slim is much faster to compile than HAML.
○ ERB is much faster to compile than Slim & HAML.
Slim vs ERB & HAML (cont.)

References:
http://slim-lang.com
http://github.com/slim-lang/slim
http://rubydoc.info/gems/slim/frames
http://sephinrothcn.wordpress.com/2014/04/14/slim-vs-haml-performance-perspective
http://haml.info
Contact Me:
Email: eric.pierre.mulligan@gmail.com
Twitter: @EricPMulligan
Github: https://github.com/EricPMulligan
That’s It!

The Skinny on Slim

More Related Content

What's hot (20)

Similar to The Skinny on Slim (20)

Recently uploaded (20)

The Skinny on Slim