The Skinny on Slim Template Engine

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 Template Engine

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to The Skinny on Slim Template Engine

Similar to The Skinny on Slim Template Engine (20)

Recently uploaded

Recently uploaded (20)

The Skinny on Slim Template Engine