Intégration: Installation et utilisation de Slim

Suite à votre demande sur Facebook, voilà le premier d’une série d’articles sur l’intégration. Au programme: Installation de Slim et de templates pour un développement plus propre et plus rapide.

Introduction

Pour faire suite au précédent tutoriel, qui permettait de préparer le terrain en installant Ruby, voilà un article un peu plus concret. Au programme: installation de Sinatra et Slim, puis création de sa première template Slim. Attention, cet article est rédigé pour les intégrateurs, pas pour les développeurs. Si vous voulez utiliser la pleine puissance de Sinatra, je vous conseille de d’abord lire mon article sur Sinatra. Vous comprendrez mieux les simplifications que j’ai apporté à la strucure de base.

Cet article utilise comme base cet article. Si vous ne l’avez pas encore suivi, il est encore temps de le faire.

liens utiles

le site de Slim: http://slim-lang.com/

le site de Sinatra: http://www.sinatrarb.com/

le site de Thin: http://code.macournoyer.com/thin/

articles utiles:

Installer Ruby et Thin:
http://www.blogduwebdesign.com/tutoriels-developpement/installer-ruby-et-thin-en-moins-de-5-minutes/488

Sinatra:
http://www.blogduwebdesign.com/developpement-rails/sinatra-le-framework-ruby-minimaliste/453 

HAML: 
http://www.blogduwebdesign.com/html/accelerez-votre-integration-avec-haml/451

Installation

Pour commencer, téléchargez et décompressez ceci. C’est une archive qui va vous permettre de commencer en douceur, en vous permettant de vous concentrer uniquement sur Slim. Si vous êtes un développeur, libre à vous de chercher un peu plus en profondeur, vous vous ammuserez beaucoup plus.

Ensuite, installons sinatra et slim. Ouvrez votre console (j’en ai mis une dans l’archive) et tappez « gem install slim sinatra« . Une fois que c’est installé, nous pouvons commencer.

Les différents dossiers

Les choses se passent dans le dossier views/ et le dossier public, et nous nous occuperons uniquement de ces deux dossiers là dans cet article. Pour des informations sur les autres dossiers, ou bien les autres fichiers, lisez donc cet article.

Le dossier public/ est ce que ne navigateur verra comme « le dossier www », en gros, la base de l’arborescence de votre site. Je vous propose d’y créer un dossier stylesheets et un dossier javascripts (c’est même déjà fait), pour trier. 
Si vous mettez votre fichier style.css dans stylesheets, vous y accéderez avec http://localhost/stylesheets/style.css, pas de public dans l’url.

Le dossier views/ est le dossier dans lequel vous mettrez vos templates. Pour vous simplifier les choses, j’y ai déjà créé un dossier tpl/, un index et un layout.

Le dossier views/tpl/ comprend ce qu’on appelera des partiels, layout.slim comprend… le layout, et index.slim est votre index.

Et enfin, le fichier console.exe, qui est juste une copie du cmd.exe de windows. Le tour des locaux est fait, rouvrez la console si vous l’aviez fermé, et lancez thin (pour ceux qui ont déjà oublié le dernier article, c’est thin start).

Le site est maintenant lancé, vous pouvez à accéder à l’adresse http://localhost:3000/, ou http://www.lvh.me:3000/

Présentation des systemes de templates en général

Tout d’abord, regardons le layout, dans layout.slim. Il contient le « squelette » des pages. C’est là qu’on mettra ce qui est présent sur chaque page. Le mien contient le doctype et le head. Libre à vous d’y ajouter votre footer, une barre de menu, …
La seul chose remarquable dans ce fichier est le == yield . C’est ici que s’insèrera  le contenu de la page demandé, par exemple, notre index.slim

Si on ouvre le fichier index, nous pouvons effectivement y voir le code utilisé. Nous pouvons aussi remarquer un == slim :’tpl/exemple_de_slim’, qui affiche le fichier contenu dans /views/tpl/exemple_de_slim.slim, une template.

Les templates sont des portions de code qui sont utilisées sur plusieurs pages, ou bien distinctes, et que l’on veut séparer pour une meilleur lisibilité. C’est très bien pour des menus, ou une sidebar, par exemple.

Le langage Slim

Apres cette longue entrée en matière, je peux enfin vous parler de Slim lui même.

Slim est un markup language qui s’approche du HAML (si vous avez déjà lu mon article sur le HAML, c’est super vous n’etes pas perdu, sinon, il est ici). Il permet un code bien plus lisible et clair que le html standard.

Sa principale particularité est que l’on ne « ferme » pas de balises. La hiérarchie se fait naturellement avec l’indentation: quelque chose de plus indenté est forcément compris dans la déclaration précédente la moins indentée. Cette pratique tiré du python est aussi utilisé dans le YAML(une alternative au XML), le SASS (une alternative au css, Vincent vas vous faire un article prochainement), et est vraiment pratique.

Je ne suis pas là pour réécrire la documentation du site principal de slim, vous la trouverez déjà sur le site officiel. Vous avez un exemple de ce qui sert le plus souvent dans exemple_de_slim.slim.

Conclusion

Maintenant, il ne tient plus qu’à vous de le tester, et de voir si cette approche simple et minimaliste vous plait. Le code HTML généré est vraiment propre, et on gagne beaucoup de temps à travailler en slim. De plus, le système de templates permet d’éviter les copiers collers, et permet d’avoir un code plus aéré.

Bonne intégration!