Коротке введення в шаблонізатор Slim

Давно хотів написати статтю про Haml, та все ніяк не доходили руки. Починаючи з 1.2 Sinatra підтримує новий шаблонізатор Slim. Вирішив познайомитися з ним, і він мені відразу сподобався. Slim взяв найкраще від Haml, і основне його завдання - зменшити об'єм коду. Шаблони Slim можуть виглядати як Haml, використовуючи ярлики id і class, але їх використання не є обов'язковим. Як і в Haml форматування тут відбувається відступами.

Ось так виглядає приклад шаблону з використанням Slim:

	doctype html
	html
	head
	title Slim Test
	meta name="keywords" content="slim, syntax"
	javascript:
	$(function() {
	alert('Hello World');
	});
	haml:
	#someid.someclass{:this => 'test'} Content in haml
	erb:
	<%= some_method(@request) %>
	body
	/ comment block
	with multiple lines
	This is another line
	h1 = @page_title
	p#notice.message
	| Welcome to the the syntax test.
	This file is to exercise the various markup.
	This is another line
	- unless @users.empty?
	table
	- for user in users do
	tr
	td.user id=some_ruby('ere', @rme) data-test="some text #{with @ruby}" = @post.name
	- else
	p There are no users.
	/ Single comment line
	#content Hello #{@user.name}! Welcome to the test page!
	Try out Slim!
	= function_with_many_parameters(:a, @variable, :option => 1)
	p.text
	' Another text block
	with multiple lines
	= link_to('Test', @site)
	.text#footer
	' Footer text block
	with multiple lines

view raw example.slim hosted with ❤ by GitHub

Якщо Haml – це HTML на стероїдах, тоді Slim – це Haml на дієті.

Інсталяція:

$ gem install slim

 

Список операторів:

|	Вертикальна риска повідомляє шаблонізатору, що потрібно просто вивести текст. При цьому всі "небезпечні" символи фільтруються.
'	Одинарна лапка працює як і попередній оператор, але додає в кінці пробіл.
-	Дефіс працює як в Haml, використовується для циклів, умов та іншого.
=	Знак рівності використовується для виводу результату виконання коду Ruby в html.
='	Працює як і попередній оператор, але додає в кінці пробіл.
==	Працює як і знак рівності, але виводить текст "як є", без обробки методом escape_html
=='	Працює як і попередній оператор, але додає в кінці пробіл.
/	Код не буде виконуватись і не потрапить в html взагалі.
/!	Знак для html коментарів (<!-- -->), які потраплять у вивід.

 

Атрибути та коментарі.

Позначати id і class можна ось так:

	blockquote id="quote-#{@quote.id}" class="quote"
	p class="title" = @quote.title
	p style="padding:1em;" = @quote.body

view raw id-class.slim hosted with ❤ by GitHub

Для порівняння в Haml:

	%blockquote{:id => "quote-#{@quote.id}", :class => "quote"}
	%p{:class="title"}= @quote.title
	%p{:style => "padding:1em;"}= @quote.body

view raw id-class.haml hosted with ❤ by GitHub

Крім того, Slim допускає кілька варіантів синтаксису:

	/ Ці два рядки ідентичні
	#nav.top
	div id="nav" class="top"

view raw syntax_01.slim hosted with ❤ by GitHub

Допускається на вибір використання наступних обгорток для атрибутів: {...}, [...], (...)

	/ Допускається будь-який варіант
	h1 class=page_header_class = page_header
	h1{class=page_header_class} = page_header
	h1[class=page_header_class] = page_header
	h1(class=page_header_class) = page_header
	/ При використанні обгортки, атрибути можуть займати кілька рядків
	h1( class=page_header_class
	id="myid")= page_header

view raw attribute_wrappers.slim hosted with ❤ by GitHub

Ще одна приємна штука - динамічний контент в атрибуті. Якщо в атрибуті не вказані лапки, буде використана змінна.

	a href="#{url_for @user}" = @user.name
	a href=url_for(@user) = @user.name

view raw dynamic_content.slim hosted with ❤ by GitHub

Подобається, як працюють коментарі. Якщо є блок коду, який потрібно закоментувати, достатньо додати всього один рядок, що вплине на весь блок:

	/ Блок нижче закоментований і не буде виведений
	/.comments
	- @comments.each do |comment|
	= comment

view raw comments.slim hosted with ❤ by GitHub

Завдяки Tilt, Slim має підтримку інших шаблонізаторів:

Двигун	Фільтр	Необхідні бібліотеки
Ruby	ruby:	none
Javascript	javascript:	none
CSS	css:	none
ERB	erb:	none
Haml	haml:	haml
Sass	sass:	haml/sass
Scss	scss:	haml/sass
LessCSS	less:	less
Builder	builder:	builder
Liquid	liquid:	liquid
RDiscount	markdown:	rdiscount/kramdown
RedCloth	textile:	redcloth
RDoc	rdoc:	rdoc
Radius	radius:	radius
Markaby	markaby:	markaby
Nokogiri	nokogiri:	nokogiri
CoffeeScript	coffee:	coffee-script (+node coffee)

На сам кінець кілька слів про продуктивність. Інформація взята з офіційної сторінки автора stonean.com/slim-update:

                           user     system      total        real
 erb                    0.560000   0.010000   0.570000 (  0.574373)
 erubis                 0.480000   0.000000   0.480000 (  0.501512)
 fast erubis            0.470000   0.000000   0.470000 (  0.481918)
 slim                   0.610000   0.000000   0.610000 (  0.612794)
 haml                   3.930000   0.010000   3.940000 (  3.939419)
 haml ugly              3.790000   0.010000   3.800000 (  3.798528)
 erb (cached)           0.190000   0.000000   0.190000 (  0.188593)
 erubis (cached)        0.160000   0.000000   0.160000 (  0.159869)
 fast erubis (cached)   0.140000   0.000000   0.140000 (  0.135476)
 slim (cached)          0.150000   0.000000   0.150000 (  0.153698)
 haml (cached)          0.430000   0.000000   0.430000 (  0.436980)
 haml ugly (cached)     0.370000   0.000000   0.370000 (  0.372770)

Корисні посилання:

• slim-lang.com — офіційна сторінка
• github.com/stonean/slim — сторінка на GitHub