Autre

V comme Vitesse ?
Gagner en productivité sur les vues HTML et les

feuilles de style
Nicolas Mérouze
nicolas@yeastymobs.com
Boldr
Blog sur Ruby On Rails
Yeasty Mobs
Société spécialisée dans la création d’applications web
avec Ruby On Rails
On passe du temps sur
les vues
Et surtout avec un framework comme Rails
Comment gagner du
temps dessus ?
Constat
Le HTML est lent à écrire
ERB est donc lent à
écrire
<div id="content">
<div class="entry">
<h2>ERb</h2>
<p><%= @entry.body %></p>
</div>
</div>
Changer de système de
templates
<repeat attr="comments">
<div class="comment">
<div class="date">Posté à <show attr="created_at"/></div>
<div class="body"/><show attr="body"/></div>
</div>
</repeat>
DRYML ?
Complexe à apprendre
<html mv:generate="layouts/product.rhtml">
<title>Hello</title>
<body>
<div mv:replace="@content_for_layout">
<div mv:generate="product/new.rhtml">
<form></form>
</div>
</div>
</body>
</html>
Master View ?
Aussi complexe que DRYML
html do
head do
title action_name
stylesheet_link_tag 'scaffold'
end
body do
p flash[:notice], :style => "color: green"
self << @content_for_layout
end
end
Markaby ?
Tout en ruby mais peu performant
HAML ?
Rapide à écrire mais syntaxe inhabituelle
Vraiment inhabituelle ?
Syntaxe inspirée de
CSS
HAML ERB
<div id="content">
#content <div class="entry">
.entry <h2>Syntaxe HAML</h2>
%h2 Syntaxe HAML <p><%= @entry.body %></p>
%p= @entry.body </div>
</div>
#content
Crée une balise <div> avec l’ID “content”
.entry
Crée une balise <div> avec la classe “entry”
%h2
Crée une balise <h2>
%input{ :type =>
“text” }
Crée une balise avec des attributs
!!!
Crée un DOCTYPE 1.0 Transitionnal
%ul#nav.clear
Crée une balise <ul> avec l’ID “nav” et la classe “clear”
= @entry.body
Equivalent de <%= @entry.body %> en ERB
- if @entry.published?
Equivalent de <% if @entry.published? %> en ERB
Indentation
Pythonesque
ERB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<%= title :site => "V comme Vitesse", :separator => "-" %>
</head>
<body>
<% if flash[:notice] != nil -%>
<p><%= flash[:notice] %></p>
<% end -%>
<% @entries.each |entry| do %>
<p><%= link_to entry.name, entry_path(entry) %></p>
<% end -%>
</body>
</html>
HAML
!!!
%html{html_attrs}
%head
%meta{"http-equiv" => "Content-type", :content => "text/html; charset=utf-8"}
= title :site => "V comme Vitesse", :separator => "-"
%body
- if flash[:notice] != nil
%p= flash[:notice]
- @entries.each |entry| do
%p= link_to entry.name, entry_path(entry)
80% de la syntaxe
apprise
Extension
.haml avec Rails 1.x, .format.haml avec Rails 2.0
Possibilité de remplacer
Builder par HAML
Avec l’extension .xml.haml au lieu de .xml.builder
Et pour les feuilles de
style ?
SASS
Syntactically Awesome StyleSheets
SASS : CSS en mieux
Plus d’accolades ni de point-virgules, des variables, et
des selectors emboîtés
SASS CSS
!default_font = Lucida Grande, Helvetica,

Arial, Verdana, sans-serif
#content {
#content
width: 950px; }
width: 950px
#content .entry {
font: normal 1em Lucida Grande,
.entry
Helvetica, Arial, Verdana, sans-serif; }
font = normal 1em !default_font
#content .entry h2 {
color: red; }
h2
#content .entry p {
color: red
line-height: 1.5em; }
p
line-height: 1.5em
On peut aussi utiliser
un framework CSS
Par exemple Blueprint
Les avantages de
Blueprint
Moins de règles à écrire, compatibilité avec les
navigateurs optimale : plus de temps gagné
Le Ruby peut vite
devenir une plaie
Il faut rester DRY !
Merci HAML, mais il reste encore du chemin à
parcourir
Helpers
Vos vues sont-elles
lisibles ?
<div class="empty" style="margin-bottom:20px">
<% unless params[:filter] %>
You have no articles. <%= link_to "Create one now
»", :action => "new" %>
<% else %>
You don't seem to have any articles matching that criteria.
<% end %>
</div>
Vraiment ?
<%
odd_or_even = 0
for block in @access_blocks
odd_or_even = 1 - odd_or_even
%>
<tr class="listLine<%= odd_or_even %>">
<%
for language in @g_language
id_language=String(block.id) + '-' + language.id
checked=""
if id_language==session[:id_language]
checked=' checked="checked"'
end
%>
<td>
<input type="radio" id="id_language" name="id_language" value="<%= id_language %>"<%= checked %> />
</td>
<%
end
%>
<td>
<%= block.location + block.name %>
</td>
<td style="width: 80px; text-align: center">
<%= l("block_list_status_" + block.status) %>
</td>
<td style="width: 80px; text-align: center">
<%= link_to (l("delete"), {:action=>"delete_block", :id=>block.id}, {:class=>"warning", :confirm => "Are you sure?"}) %>
</td>
</tr>
<%
end
%>
Refactoring urgent !
La vue
%p
- if not @product.published_at.blank? and @product.quantity.size > 0
= link_to @product.name, product_path
- else
= name
Le modèle
class Product < ActiveRecord::Base

def is_available?
not published_at.blank? and quantity.size > 0
end
end
Le Helper
module ProductHelper
def product_link(product)
if product.is_available?
link_to name, product_path(product)
else
name
end
end
end
Résultat
%p= product_link(@product)
Utiliser HAML dans les
Helpers
Le Helper
module ProductHelper
def product_infos(product)
open :div, :class => "product" do
open :dl do
open(:dt) { puts product.name }
open(:dd) { puts product.description }
end
end
end
end
La vue
= product_infos(@product)
%p= product_link(@product)
Au final
<div class="product">
<dl>
<dt>Marmotte</dt>
<dd>La marmotte est un mammifère fouisseur de
l'ordre des rongeurs, du genre Marmota.</dd>
</dl>
</div>
<p><a href="/products/1">Marmotte</a></p>
La logique des vues ne
devrait pas être dans
les modèles
Presenters
Le presenter
class ProductPresenter < ActionPresenter::Base
def name
h(@source.name)
end
def link
if is_available?
link_to name, product_path(@source)
else
name
end
end
def is_available?
not @product.published_at.blank? and @product.quantity.size > 0
end
end
La vue
%p= @product.p.link
Vues plus claires avec
les Helpers et les
Presenters
Récapitulatif
• Passage de ERb à HAML
• Utilisation de SASS
• Utilisation de Blueprint
• Code réutilisable dans les Helpers
• Logique des vues dans les Presenters
• Utiliser des plugins
Gains
• Ecriture plus rapide

• Fichiers plus courts
• Maintenance plus simple
Liens
• HAML et SASS : http://haml.hamptoncatlin.com
• ActionPresenter : http://svn.boldr.net/rails/plugins/
action_presenter/trunk
• Boldr : http://blog.boldr.fr
• Headliner : http://the.railsi.st/svn/repo/plugins
Des questions ?

Autre

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Autre

Transféré par

Droits d'auteur :

Formats disponibles

V comme Vitesse ?

Gagner en productivité sur les vues HTML et les

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

!default_font = Lucida Grande, Helvetica,

class Product < ActiveRecord::Base

• Ecriture plus rapide

• HAML et SASS : http://haml.hamptoncatlin.com

Vous aimerez peut-être aussi