Introduction à Haml
Bonjour Rubyistes,
ça faisait un moment que je vous ai pas écrit et je vous demande pardon. Ce n'est pas évident de travailler toute la semaine, organiser des événements les weekend, préparer des talks et pouvoir se mettre devant mon clavier et partager avec vous :)
Et pour la reprise, nous allons faire de belles choses. Nous allons voir ensemble comment écrire des applications WEB Mobiles en utilisant Haml, jQTouch et Sinatra.
Le but de cette série d'articles est de nous permettre d'écrire des applications WEB Mobiles pour rendre "nos" applications WEB plus à la portée de nos visiteurs, clients et collaborateurs.
L'avantage des applications WEB mobiles par rapport aux applications WEB "simples" est qu'elles ont un look d'applications natives. De ce fait, le visiteur se sent déjà "chez lui".
Je travaille pour une entreprise en tant que développeur d'applications WEB (mobile et standard). Et sur la demande de nos collaborateurs, nous devrions avoir une application mobile pour chaque plateforme ( Android, Iphone, BlackBerry, Windows Mobile, Symbian et Palm Os ). Oui c'est beaucoup d'applications qui sont toutes identiques ! La solution que nous avons finalement adoptée c'est avoir une seule et unique application utilisable sur toutes ces plateformes : une application WEB mobile.
Et après une comparaison des différents outils permettant le développement d'applications WEB mobiles, mon choix ( justifié ) s'est porté sur jQTouch (jQuery mobile ). L'application a été développée en Python ( Django ).
Après avoir découvert certaines belles choses, j'ai pensé à vous :)
Now vous savez pourquoi j'ai écrit cet article. Mais vous savez toujours pas pourquoi j'ai choisi HAML ???
HAML est un langage de templating ( pour créer ou générer des pages HTML ) tout comme le ERB, Slim et autres langages de templating. Son avantage par rapport aux autres c'est le DRY ! ( Don't Repeat Yourself ), la structation qu'il vous impose et sa Rubyesque syntaxe.
Installation de HAML
Haml est une GEM qui s'installe comme toutes les autres !
> gem install haml
haml : Basics
Haml vous permet de gérer les contenus statique et dynamique de vos pages HTML en mettant à votre disposition des "méthodes" d'accès aux éléments du document HTML.
Sur cette image on a les différentes "méthodes" d'accès et d'utilisation des tag et blocks du document HTML.
Toutes les balises HTML sont précédées d'un %, les class CSS par un "." et les ID par un "#". C'est toutce qu'il faut savoir sur les parties statiques de votre HTML.
haml : Syntaxe
Exemple : index.haml
!!! Strict
%html
%head
%body
%h1
Bonjour tout le monde
On "compile" tout ça :
> haml index.haml
Et le résultat est :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head></head>
<body>
<h1>
Bonjour tout le monde
</h1>
</body>
</html>
très simple et super cool ! Pour ceux qui aiment avoir des widgets sur leurs pages web, Haml est vraiment le truc qu'il faut.
Et maintenant ajoutons un peu de contenu dynamique !
- @text = "Ruby is awesome"
!!! Strict
%html
%head
%body
%h1
Bonjour tout le monde !
- if 1 < 2
=@text
Et le résultat est :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head></head>
<body>
<h1>
Bonjour tout le monde !
Ruby is awesome
</h1>
</body>
</html>
Un essai avec les div !
- @maclasse = "rouge rounded"
- @text = "c'est super ça "
!!! Strict
%html
%head
%body
%h1
Bonjour tout le monde !
%div{ :class => @maclasse }
=@text
à vous de me dire à quoi ressemblera le résultat HTML.
Haml est très simple, intuitif et amusant. Dans le prochain article, nous allons utiliser Haml dans une application Sinatra. D'ici là amusez vous bien avec Haml et n'hésitez pas à poser vos questions et/ou faire part de vos critiques/suggestions.
PS : Haml vient avec son propre moteur de CSS appelé SASS ! Mais vous pouvez l'utiliser avec le CSS standard. On fera un tour sur le SASS. Promis :)
à Lundi prochain inchaallah.
