the skinny on slim
TRANSCRIPT
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.
| <p>A paragraph.</p>Outputs:
<p>A paragraph</p>
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:
<!-- This line will be displayed as an HTML comment →
/[if IE] p Some paragraph.Outputs:
<--![if IE]--><p>Some paragraph</p><![endif]-->
DOCTYPE:HTML doctypes:
XML doctypes:
doctype htmldoctype 5Outputs:
<!DOCTYPE html>
doctype 1.1Outputs:
<!DOCTYPE html PUBLIC - “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
doctype xmlOutputs:
<?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 linkOutputs:
<ul class=”alert alert-danger”>
<li><a href=”/”>First link</a></li>
</ul>
a href=”/” rel=”nofollow” Link Texta[href=”/” rel=”nofollow”] Link Texta(href=”/” rel=”nofollow”) Link Texta{href=”/” rel=”nofollow”} Link TextOutputs:
<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 TextOutputs:
<a href=”/” rel=”nofollow”>Link Text</a>
a href=root_path Link TextOutputs:
<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:
<p>Welcome Eric Mulligan</p>
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: <p id=”example” class=”slim-example” role=”admin”>Some Text</p>
○ 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.)
Bootstrap Navbar in ERB
Bootstrap Navbar in HAML
Bootstrap Navbar in Slim
➢ Performance:○ Slim is much faster to compile than HAML.○ ERB is much faster to compile than Slim & HAML.
Slim vs ERB & HAML (cont.)
Ruby / Rails Perspective
Demo
References:http://slim-lang.comhttp://github.com/slim-lang/slimhttp://rubydoc.info/gems/slim/frameshttp://sephinrothcn.wordpress.com/2014/04/14/slim-vs-haml-performance-perspectivehttp://haml.info
Contact Me:Email: [email protected]: @EricPMulliganGithub: https://github.com/EricPMulligan
That’s It!