HAML. Prolongez la vie de votre clavier

2009-05-27 13:13:10 UTC

Klimt, Salomé Je suis encore au stade de test avec HAML. Il faut un délais d'apprentissage pour penser et éditer dans l'esprit de Haml. Mais vous allez vous rendre compte suite aux exemples ci-dessous du pragmatisme poussé de ce moteur de template. Il est déja à sa version "HAML 2.0". Il existe aussi des versions pour PHP et ASP (sans commentaire)

- Installation (RoR)

gem install haml

pour ajouter HAML comme plugin à votre application:

haml --rails /chemin/de/votre/application

J'ai oublié de vous dire qu'avec HAML vous venez aussi d'installer son compagnon SASS détaillé dans cet article.

Une fois le plugin installé, vous pouvez utiliser directement un template en Haml en changeant l'extension de la vue:

/app/view/exemple/vue.html.erb -> /app/view/exemple/vue.html.haml

- Utilisation

Je mettrais des exemples qui sont plus parlant qu'une description technique

avant :

<strong><%= item.title %></strong>

après :

%strong= item.title

Comme vous voyez le principe est simple, mais peut être pas encore convainquant, le suivant !!! ...

avant :

<div id='content'>
  <div class='title'>
    <h1><%= @table.titre %></h1>
    <%= link_to 'Home', home_url %>
    <p class="paraf"><%= @table.contenu %></p>
  </div></div>

après :

#content .title
   %h1= @table.title
   = link_to 'Home', home_url
   %p.paraf= @table.contenu

Pause!..., bon, rien que là, je pense que vous êtes entrain de penser aux kilomètres de balises html que vous avez tapez durant toute votre vie de développement web, au temps passé à chercher la balise de fermeture perdue dans le fleuve de codes.

Continuons...

avant:

<ul id="menu" class="decomenu">
  <%- @tirets.each do |i| %>
    <li><%= i.nom %></li>
 <%- end %>

après

%ul#menu.decomenu
  - @tirets.each do |i|
    %li= i.nom

Comme vous voyez, pas besoin du "end" de la boucle, il est bien clair avec le décalage vers la droite (deux caractéres espace) qui indique la structure de l'arborescence.

Ainsi, pour commenter et décommenter du code, ça devient plus simple et plus rapide

avant :

<h2>sous-titre</h2>
<div>
  <!-- Une ligne à commenter -->
  le reste du texte non-commenté</div>
<!--
  <p>plus qu'une ligne à commenter</p>
  <div>
    <h1>il n'est pas à sa place</h2>
  </div>
-->

après :

%h2 sous-titre
%div
  / Une ligne à commenter
  le reste du texte non-commenté
/
  %p plus qu'une ligne à commenter
  %div
    %h1 il n'est pas à sa place

Voyant des petits clins-d'oeil pour raccourcir les entêtes des templates

!!! 1.1

ca donne !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

encore un autre

/[if IE]
  %a{ :href => 'http://www.mozilla.com/en-US/firefox/' }
    %h1 Get Firefox

ça génére

<!--[if IE]>
  <a href='http://www.mozilla.com/en-US/firefox/'>
    <h1>Get Firefox</h1>
  </a><![endif]-->

Il me faut peut-être encore 2 ans de pratique autour de Haml pour ne plus me rendre compte de la quantité de code économisée, en même temps haml nous oblige à générer du code html bien structuré à la sortie

1 Commentaires :

railsman
2009-06-06 17:32:10 UTC

interessant!, bien expliqué

Ajouter un Commentaire

Auteur

Commentaire

-->