Share
Si vous vivez et respirez au pays Ruby et que vous avez déjà essayé Haml, vous connaissez probablement déjà quelques arguments que je vais faire valoir. Je pense néanmoins que c'est une bonne idée de suivre, car vous avez peut-être déjà décidé d'utiliser un moteur de gabarit plus minimaliste et j'aimerais que vous voyiez les avantages que Slim offre également..
Avant de vous expliquer pourquoi Slim est cool, je veux expliquer ce que Slim est réellement et ce qu’il fait pour vous. La documentation résume assez bien ceci:
"Slim est un moteur de gabarit rapide et léger prenant en charge Rails 3 et 4".
Vous pouvez également l'utiliser avec Sinatra et même Rack. Donc, si vous êtes un peu fatigué d'utiliser ERB pour écrire vos modèles ou si vous n'êtes pas très satisfait de ce que Haml a à offrir, alors Slim est exactement le bon arbre pour aboyer..
En ce qui concerne sa syntaxe, les responsables de Slim essayaient de trouver une réponse à la question suivante: «Quel est le minimum requis pour que cela fonctionne?» Pour écrire le moins possible de code frontal, cela ressemble certainement à la bonne question à poser.
Est-ce que Slim offre une solution parfaite à toutes vos préoccupations en matière de templates? Probablement pas, mais franchement, cela pourrait bien offrir le meilleur! Est-ce facile à apprendre? Je pense que oui, mais il est difficile de savoir ce que les autres considèrent comme facile. Je dirais cependant ceci: il faut un peu de temps pour s'y habituer, mais ce n'est définitivement pas sorcier. Donc, pas besoin de vous sentir intimidé si vous êtes un peu nouveau dans le domaine du codage. Voulez-vous passer un bon moment avec elle? Absolument!
Alors, pourquoi Slim? La réponse est assez simple, je pense. Votre balisage doit être aussi lisible et beau que possible! Vous devriez passer un bon moment à l’utiliser, et moins vous passerez de temps à patauger parmi des tonnes d’étiquettes, mieux ce sera.
Ce qui est beau, vous pourriez demander? Bien sûr, ce n’est pas une réponse que je vais essayer d’aborder, mais être minimal à cet égard fait rarement mal. Pourquoi ne pas devenir super cryptique car le moteur de gabarit tente d’être super intelligent en étant minimal? C’est une préoccupation légitime et vous serez heureux d’entendre que l’équipe derrière Slim prend cela très au sérieux. Ils veulent supprimer autant que possible du vieux HTML ordinaire et ne révéler que les parties essentielles, le tout sans devenir trop cryptique. Leur équipe centrale essaie d'aller au-delà, et ils sont vraiment préoccupés par l'esthétique du code Slim. Assez bonne affaire, vous ne pensez pas?
N'est-il pas beaucoup plus agréable de pouvoir jeter un coup d'œil sur un modèle et de digérer facilement ce qui se passe? Les modèles peuvent devenir très encombrés, même si vous utilisez intelligemment les partiels, ce qui vous permet de réduire au maximum le niveau de bruit..
Avez-vous peut-être essayé la syntaxe Sass (.sass) en retrait? J'espère que oui, parce que c'est de la drogue! Si tel est le cas, vous aurez probablement une appréciation similaire de ce que Slim a à offrir. Il est également sensible aux espaces, ce qui conduit à un code vraiment succinct et lisible. Prenons ce morceau de code HTML / ERB et comparons-le à Slim.
<%= full_title(yield(:title)) %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => vrai%> <%= javascript_include_tag 'application', 'data-turbolinks-track' => vrai%> <%= csrf_meta_tags %><%= link_to "sample app", 'root_path', id: "logo" %><%= yield %>
Regardons l'équivalent Slim:
doctype html html head title = titre complet (rendement (: titre)) = stylesheet_link_tag 'application', média: 'tout', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' = > true = csrf_meta_tags body header.navbar .logo = link_to "exemple d'application", 'root_path', id: "logo" nav ul.navbar-right li = lien_à "Accueil", 'racine_path' li = lien_à "Aide", ' help_path 'li = link_to "Connexion",' login_path '.main = rendement
La première chose que les gens reconnaissent souvent est: «Hé, pas de balises de fermeture!» Cool? Bien sûr, vous n'êtes pas encore habitué à la syntaxe, donc cela peut paraître un peu étrange au début, mais je suis sûr que vous pouvez comprendre à quel point cela se lit de manière succincte. Pas de crochets gauche / droit, pas besoin d'écrire div et sélecteurs minimalistes, nous pouvons donc nous concentrer sur le nom des ids et des classes. On se sent beaucoup moins brouillon et plus organisé, vous ne pensez pas?
A titre de comparaison, voici la version Haml. Ce n’est vraiment pas une opportunité de critiquer Haml, mais une démonstration de sa similitude, mais aussi le fait que Slim va encore plus loin avec son choix de syntaxe minimale. Le résultat est qu'il est encore plus élégant que Haml, je pense.
Pourquoi y aller si minime mais toujours me faire taper le % signer partout? Mon index n'a aucune motivation particulière pour saisir Shift-5 tout le temps. Pouvez-vous personnaliser ce comportement? Assez sûr, ou du moins je l’espère! Mais la conception semble un peu défectueuse à cet égard et moins spartiate par rapport à Slim. Je réalise que c'est aussi une question de goût, alors je vais en rester là..
!!! % html% head% title = full_title (rendement (: title)) = stylesheet_link_tag 'application', média: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags% body% header.navbar .logo = link_to "exemple d'application", 'chemin_racine', id: "logo"% nav% ul.navbar-droite% li = lien_to "Accueil", 'chemin_racine'% li = link_to "Aide", 'help_path'% li = link_to "Connexion", 'login_path' .main = rendement
Avant de passer aux choses charnues, laissez-moi un instant bouffi et résumons ce que je pense qui fait de l'apprentissage de Slim un investissement digne de votre temps:
Pour ce qui est de l’expérience en programmation, si vous vous considérez comme plus novice, je vais essayer de vous donner un aller-retour rapide avant de commencer à utiliser Slim. Lorsque les gens parlent de modèles, ils désignent généralement un balisage HTML simple avec un code dynamique souvent utilisé pour le contrôle de flux, l'injection d'objets ou le rendu de modèles partiels (partiels). Par exemple, lorsqu'un contrôleur vous fournit des variables d'instance pouvant être utilisées par la vue via la substitution de variable (instance) pour afficher les attributs de cet objet. Tout cela se passe via le processeur de modèles de votre choix (ERB, Haml, Slim, etc.), qui combine tous vos modèles Web dans une page Web finale. Les modèles peuvent également être utilisés pour générer des flux XML et RSS, ainsi que d'autres formes de fichiers texte structurés..
Avec les modèles, vous pouvez définir différentes "mises en page" qui traitent des parties particulières de votre site Web, ainsi que les données devant être affichées systématiquement avec le moins de répétitions possible. Depuis que vous jouez avec Rails, vous utilisez sûrement ERB pour ce type de scénario. ERB prend les parties en texte brut, les remet au document final et ne traite que le code marqué en tant que tel. Je ne vais pas entrer dans les détails du fonctionnement d'ERB et je suppose que vous avez une compréhension de base avant de plonger dans Slim. Je ne recommanderais pas d'utiliser Slim si vous n'êtes pas déjà familiarisé avec la méthode de template par défaut de Rails, car vous aurez beaucoup plus de facilité à jouer avec Slim si vous comprenez comment cela fonctionne par défaut dans Rails..
Vous trouverez ci-dessous un exemple de modèle ERB de base affichant un ensemble de missions associées à un @agent objet. Directement ci-dessous, il utilise également une méthode de Ruby Gem pour paginer le @missions collection.
<% if @agent.missions.any? %>Missions (<%= @agent.missions.count %>)
Ceci est une petite section d'un modèle qui montre bien que ce n'est rien de plus qu'une partie HTML statique contenant des injections dynamiques à partir de code Ruby. Si nous n'utilisions pas de tels modèles, nous devrions écrire manuellement le code pour chaque nouvel objet que nous souhaitons voir affiché sur une page. Pas sûr de toi, mais je ne peux pas imaginer un plus grand cauchemar ou une perte de temps que cela. Les modèles nous fournissent un outil pratique pour rendre notre couche d'affichage intelligente et dynamique sans nous répéter..
Comme vous pouvez également le constater dans cet exemple, les modèles nous permettent d'utiliser des modèles partiels que nous pouvons rendre si nécessaire. Ici nous aurions un _mission.html.erb partielle quelque part, ce qui nous aide à parcourir une collection de @mission objets, qui à leur tour sont énumérés à l'intérieur de notre missions classe.
Comme vous pouvez le constater, les modèles n’ont rien de magique mais sont très pratiques pour rendre le développement d’applications Web beaucoup plus efficace et organisé. Je voulais juste m'assurer que nous sommes tous sur la même page avant de plonger dans Slim.
Si vous aimez utiliser ces outils, c'est parfait. Aucun problème avec ça. Le problème, c’est que si vous recherchez quelque chose de plus intelligent et minimaliste, il est difficile de trouver quelque chose qui aille plus loin que Slim. Pour moi, c'est la solution de création de modèles la plus rationalisée que je connaisse au pays Ruby. Ils fonctionnent tous bien, c'est donc une question de préférence personnelle.
Pas de surprise, il y a un petit bijou pour ça.
bijou 'slim-rails'
installation groupée
Ça y est, nous sommes tous ensemble. Parce que vous avez installé cette gemme, Slim sera chargé et initialisé à chaque chargement de votre application. De plus, pour votre commodité, lorsque vous générez des contrôleurs via les rails génèrent un contrôleur, vous obtiendrez automatiquement .svelte voir les fichiers pour votre vue-.html.erb fichiers pas plus. Cela fonctionne de la même manière avec les échafaudages, mais j'espère que vous ne les utilisez pas vraiment!
Pour illustrer ce comportement des utilisateurs qui débutent dans l’utilisation des générateurs Rails, je vais créer un contrôleur pour les agents de service secrets qui comporte toutes les actions standard du contrôleur REST:
rails générer le contrôleur SecretServiceOperatives index nouveau créer montrer éditer mettre à jour détruire
Entre autres choses, vous aurez tous les .svelte les fichiers dont vous avez besoin. Rails met un extra .html vous pouvez vous en débarrasser si cela vous dérange, bien sûr. Tout ce qui compte, c’est que l’extension de fichier Slim existe déjà et qu’elle soit prête pour le prétraitement de votre code Slim. Yay!
… Invoquer slim créer app / vues / secret_service_operatives créer app / vues / secret_service_operatives / index.html.slim créer app / vues / secret_service_operatives / new.html.slim créer app / vues / secret_service_operatives / create.html.slim créer app / vues / secret_service_operatives / show.html.slim créer une application / vues / secret_service_operatives / edit.html.slim une application / vues / secret_service_operatives / update.html.slim une application / vues / secret_service_operatives / destroy.html.slim…
La prochaine étape consiste à ouvrir la présentation de votre application et à remplacer le code standard par quelque chose de Slim. De plus, n'oubliez pas de renommer le application.html.erb déposer dans application.slim (ou application.html.slim si tu veux). Nous avons déjà un peu maigri, même le nom du fichier a perdu du poids.
doctype html html head title = stylesheet_link_tag 'application', média: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags body header.navbar. logo = link_to "Application espion", 'chemin_racine', id: "logo" nav ul.navbar-right li = lien_to "Accueil", 'racine_path' li = link_to "Aide", "chemin_aide" li = link_to "Inscription" , 'sign_up_path' li = link_to "Connexion", 'login_path' .main h1.welcome Bienvenue dans les modèles Boss Level Slim! = rendement
Rien d'extraordinaire, mais un bon début - et aussi facile que possible, je pense.
Remarque: si vous êtes curieux de savoir quelle version de la pierre précieuse vous avez installée, cette petite commande vous le dira - elle est également pratique pour toutes les pierres précieuses:
spectacle de bundle 'slim-rails'
Il vous indique où il est stocké et quelle version de ce bijou a actuellement. La sortie ressemble à ceci:
/Library/Ruby/Gems/2.3.0/gems/slim-rails-3.0.1
Pour les enthousiastes de Sinatra parmi vous, je voulais également dire comment commencer. Nous devons d’abord installer la gemme, bien sûr.
bijou installer mince
Et après cela, vous avez presque fini. Dans votre application Sinatra, il vous suffit d'exiger Slim et vous êtes prêt à partir.
Accentsconagua
require 'sinatra' require 'slim' get ('/') slim: index __END__ @@ index doctype html html titre de la tête Slim Templates body h1 Boss Niveau Modèles Ruby Avec SlimIci, j’ai utilisé un modèle en ligne pour écrire le balisage Slim dans le même fichier et a dit à Sinatra que je souhaitais utiliser Slim pour le fichier d’index obtenir demande au chemin racine. Je devais juste faire référence au modèle en ligne à l'intérieur d'un bloc d'accolades. Ce que vous voyez ci-dessous le @@ index-qui signifie le modèle d'index - est toute la syntaxe Slim sensible aux espaces.
Il est temps de vous montrer comment écrire du Slim.
Commençons par le plus simple, la déclaration doctype. Comme vous le savez probablement déjà et que vous l’avez déjà oublié, cela doit être déclaré en haut de votre document HTML, avant la étiquette. Pour votre information, ce n'est pas une balise HTML et informe le navigateur de la version de la page HTML.
Parmi les différentes versions pour , il n'y en a qu'un pour HTML5: -dieu merci! -qui est exactement ce que nous obtenons lorsque nous écrivons doctype html ou doctype 5 dans Slim.
Doctype html tête html Doctype 5 tête html
# et raccourci de classe . Ecrire du code frontal signifie une tonne de cours et toujours si peu d'identifiants, j'espère. Pour éviter de les écrire encore et encore, Slim vous rencontre à mi-chemin et vous permet de court-circuiter l’ensemble du processus. Laissez-moi vous montrer ce que je veux dire. Prenez le code Slim suivant:
#logo h1.header .evil-wrapper h2 # nom-auteur ul.books
Ceci est compilé dans cette sortie HTML:
Comme vous pouvez le constater, le point suggère à Slim que vous souhaitez utiliser une classe et le nom qui suit correspond à ce que vous souhaitez nommer. Il en va de même pour les identifiants: vous utilisez simplement le symbole de hachage (signe dièse) qui fait l'affaire. Les lecteurs astucieux ont sûrement reconnu que les versions sans balise principale entraînaient la création d’un div avec la classe ou id-correspondante correspondante. et . Très pratique, tu ne crois pas?
Vous pouvez également être plus expressif dans votre code Slim si vous le souhaitez. Personne ne vous empêche d'écrire vos bons vieux cours et vos identifiants à la main. Si vous vous sentez attaché à cela, allez-y! J'aime la version plus succincte car elle me permet également d'éviter de taper des guillemets et des textes répétés tout le temps. C'est à vous de décider ce qui vous rend heureux! Le code ci-dessous est un peu plus détaillé mais rend le même code HTML que ci-dessus:
div h1 div h2 ul
Maintenant, n'est-ce pas une chose de beauté? Imaginez toutes ces balises HTML redoutées que vous n’avez pas besoin de rédiger vous-même, sans oublier l’élimination des excès de crochets. Bien sûr, votre éditeur de code peut également effectuer une grande partie de ce travail, mais votre éditeur lit-il également le code pour vous? Exactement!
Lorsque vous reviendrez lire votre code, vous voudrez également un document succinct, extrêmement facile à digérer visuellement. Je pense que cet exemple simple montre mieux ce qu'un outil comme Slim a à offrir. Ce sont ces petites choses qui constituent un excellent outil et un gain de temps considérable à long terme. Même si vous ne l'utilisez que pour cette fonctionnalité et que vous ignorez les autres fonctionnalités plus avancées pour le moment, le passage à Slim rapporterait déjà beaucoup.
Supposons que vous souhaitiez avoir plusieurs balises en ligne pour être plus compact ou autre. Ainsi, au lieu de passer à une nouvelle ligne, vous pouvez les chaîner en séparant ces balises avec deux points :. Les deux exemples ci-dessous donnent le même résultat.
ul li.first a href = "/ a" un lien a a href = "/ b" lien B ul ul.first: a href = "/ a" lien a: a href = "/ b" lien B
La deuxième version est plus minimale en raison des balises en ligne et serait ma préférence. Après tout, compact, c'est bon, non? Je pense que cette affaire montre bien que Slim équilibre également entre compact et cryptique. Oui, il faut un peu de temps pour s'y habituer, et dans certains cas, des enveloppes d'attributs supplémentaires sont utiles (voir plus d'informations sur les enveloppes ci-dessous). Appelez-moi fou, mais je suis certain que vous lirez Slim comme un balisage HTML normal en un tournemain.
Écrire un texte est aussi facile que vous le souhaiteriez, bien sûr. Ajoutez-le simplement après vos tags.
h1 # welcome-header Votre message de bienvenue génial va ici!
Votre message de bienvenue funky va ici!
Rien de plus à ajouter, aussi facile que possible!
Les attributs HTML, qui fournissent des informations supplémentaires sur les balises, peuvent être inclus comme suit:
a href = "http://slim-lang.com" title = "Page d'accueil Slim" Accédez à la page d'accueil Slim img alt = "James Bond posant avec M" src = "images_8 / an-introduction-to-slim-templates_3. png "/
http://slim-lang.com "title =" Page d'accueil Slim "> Accéder à la page d'accueil de Slim
En gros, vous pouvez les chaîner et Slim le séparera du contenu du texte, le cas échéant. Si vous regardez de près, vous pouvez voir que notre img tag comporte une barre oblique de fin, qui ferme explicitement les tags dans Slim. Ceci est certainement utile pour les images ou les tags plus compliqués. En passant, HTML5 ne vous oblige pas à écrire les noms d'attribut en minuscule ni à utiliser des guillemets autour des valeurs d'attribut. C'est néanmoins une pratique standard recommandée par le W3C..
Si vous avez plusieurs sélecteurs tels que des classes ou des identifiants par étiquette, vous pouvez également écrire ceci plus succinctement en les chaînant en guirlande. Ces sélecteurs seront automatiquement délimités par des espaces.
h2 # big-header.agent-header.tagline Titre génial h3.small-header.agent # 007.tagline Petit titre génial
Titre Funky
Petit titre funky
Ce n’est pas qu’avoir mélangé tous ces identifiants et classes comme ceci représente les meilleures pratiques, mais il est facile de voir comment Slim fonctionne dans un exemple aussi compliqué. Assez cool, hein? Attention, la répartition de ces sélecteurs sur plusieurs lignes ne fonctionnera pas sans wrappers d'attributs (voir la section suivante).
Une autre option consisterait à utiliser un tableau avec des chaînes ou uniquement des symboles pour fusionner des attributs..
h2 class = ["agent-header", "slogan"] Titre génial h3 class =: agent,: double_o_seven,: tagline Petit titre génial
Titre Funky
Petit titre funky
Dans mon livre, je dirais que c'est un bon à savoir, mais ce n'est pas quelque chose que j'essaie d'utiliser activement. Cela peut être pratique si vous voulez interpoler quelque chose, je suppose.
Slim vous propose des wrappers pour faciliter la lecture de vos attributs. Ce n'est peut-être pas nécessaire tout le temps, mais il est utile de savoir si une balise avec beaucoup d'attributs a besoin d'être apprivoisée. Vous pouvez utiliser l'un des délimiteurs suivants pour envelopper des attributs: , [] et ().
a href = "http://slim-lang.com" title = "Page d'accueil" Accédez à la page d'accueil a href = "http://slim-lang.com/about.html" title = "À propos de la page " Aller à la page à propos h2 [id =" big-header "] Titre funky h3 (id =" small-header ") Un autre titre funky
Aller à la page d'accueil Aller à la page à proposTitre Funky
Un autre titre funky
Si c'est un moyen plus simple d'organiser le balisage, foncez! Comme illustré par le second une et le h3 balises, vous pouvez même répartir les attributs et les sélecteurs sur plusieurs lignes. L'indentation semble être imposée avec beaucoup de tolérance en ce qui concerne la sensibilité aux espaces. Je suppose cependant que ce ne sera pas long et que vous n'aurez pas besoin de beaucoup d’emballage. Vous vous habituerez très vite à la syntaxe barebones Slim et vous les enregistrerez pour des occasions spéciales, comme vous devriez probablement le faire..
Pour les tags en ligne, les wrappers peuvent s'avérer utiles de temps en temps. Comme vous pouvez également le constater dans l'exemple ci-dessous, vous pouvez utiliser des espaces avec les délimiteurs pour le rendre encore plus lisible - juste une note de côté.
ul li.long-link: a href = "http://slim-lang.com" title = "Page d'accueil" Aller à la page d'accueil li.long-link.class.with-id: a [href = " http://slim-lang.com/about.html "title =" À propos de la page "] Aller à la page à propos de li.c-link: a (href =" / c ") lien C li: a [href =" / d "] lien D
Est-ce que quelqu'un a dit interpolation? Dans les attributs cités, vous pouvez utiliser Ruby pour interpoler du code si nécessaire. Un exemple simple devrait suffire à illustrer ce comportement:
un href = "http: // # url" Goto # url
Encore une fois, ce n’est pas quelque chose que vous pourriez utiliser au quotidien, mais c’est bien d’avoir de bonnes astuces. Les valeurs d'attribut seront échappées par défaut. Si vous souhaitez désactiver ce comportement, utilisez simplement un ==.
un href == "http: // # url" Goto # url
Vous pouvez également utiliser Ruby pour jouer avec vos attributs. Placez simplement un signe égal là où vous voulez que du code Ruby soit exécuté, et vous êtes prêt à partir. Dans le deuxième article, vous trouverez plus d'informations sur la sortie du code Ruby dans vos modèles Slim..
ul li class = agent.role a href = (agent path_to_agent) = agent.name
Bien entendu, cela signifie également que vous pouvez utiliser des booléens simples de la même manière dans vos attributs..
type d'entrée = "texte" désactivé = faux type d'entrée = "texte" désactivé = vrai type d'entrée = "texte" désactivé = aucune
Groovy, passons à autre chose!
J'espère que vous comprenez maintenant pourquoi Slim est un bon choix pour tous vos besoins en matière de templates dans Ruby Land. Si vous préférez toujours utiliser Haml ou ERB pour le moment, vous pourriez développer un appétit pour Slim au fil du temps. Je ne dis pas que c'est un goût acquis ou quoi que ce soit, mais simplement que ce n'est pas quelque chose que beaucoup de gens choisissent tôt dans leur carrière - peut-être parce qu'ils n'ont pas encore ressenti la douleur d'écrire tout ce balisage en excès encore et encore. Cet article devrait vous fournir les bases dont vous avez besoin pour commencer..
Slim a plus à offrir, bien sûr, en particulier quelques fonctionnalités avancées que vous souhaitez absolument examiner. Dans le prochain article, nous commencerons par une section plus détaillée sur la sortie de code Ruby dans vos modèles, et bien plus encore. On se voit là-bas!
