Plantillas en Ruby con Slim: Parte 2

() translation by (you can also view the original English article)

En la segunda y última parte de esta mini serie, terminaremos esta introducción con secciones sobre cómo generar código Ruby, interpolación, texto plano y cómo personalizar Slim según tus necesidades. Después de ese artículo deberías estar listo para la acción de Slim.

Código de salida

Ya has visto un poco acerca de cómo usar Ruby en tus plantillas. Esta sección te brinda todo lo que necesitas para hacer uso de esto. En el primer artículo, ya hemos estado usando Ruby en nuestras plantillas. Déjame recordarte lo que quiero decir:

Slim

html
  head
    title
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags

Como puedes ver, dentro de esta etiqueta head ya usamos un par de métodos de Rails para lidiar con los estilos y las cosas de JavaScript, nada importante. Todo lo que necesitas hacer para ejecutar el código de Ruby es anteponerlo con un signo igual =. Si tu código necesita extenderse en varias líneas, simplemente agrega una barra invertida \ al final de cada línea y continúa con la siguiente. Si terminas la línea con una coma ,, entonces no necesitas la barra invertida. Un buen toque si me preguntas.

Echemos un vistazo a otro ejemplo más concreto. Escribir formularios es a menudo un problema: un montón de código repetitivo, mucha redundancia y todos estos temibles signos <% =%> en ERB. Esto puede ensuciarse al instante. Podría ser mejor, ¿eh?

ERB

<%= form_for @agent do |f| %>

  <%= f.label      :name %>
  <%= f.text_field :name %>

  <%= f.label      :number %>
  <%= f.text_field :number %>

  <%= f.label      :licence_to_kill %>
  <%= f.check_box  :licence_to_kill %>

  <%= f.label      :gambler %>
  <%= f.check_box  :gambler %>

  <%= f.label      :womanizer %>
  <%= f.check_box  :womanizer %>

  <%= f.submit %>

<% end %>

Muchas cosas que escribir para crear un nuevo objeto @agent, ¿no? Slim te permite manejar esto mucho más sucintamente. Simplemente mantenemos el signo igual y nos deshacemos de la mayoría de las otras cosas. Tadaa!

Slim

= form_for @agent do |f|

  = f.label      :name
  = f.text_field :name

  = f.label      :number
  = f.text_field :number

  = f.label      :licence_to_kill
  = f.check_box  :licence_to_kill

  = f.label      :gambler
  = f.check_box  :gambler

  = f.label      :womanizer
  = f.check_box  :womanizer

  = f.submit

Puedes ver claramente por qué este proyecto se llama Slim. Todo el exceso de grasa se ha ido. No me digas que no te gusta lo que ves, ¡sé que lo estás cavando! Solo un signo = y puedes rellenar tu marcado con el código Ruby, en este caso de Rails, por supuesto. Y cuando lo comparas con el HTML representado en la página final, es difícil ignorar qué tan compacto es Slim.

Salida de HTML

<form action="/" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" />

  <input type="hidden" name="authenticity_token" value="+P2I801EkEVBlsMgDo9g9/XgwwQfCBd1eoOBkFmgAHE4bxYi9HGUjEjsNwNMnEadV2tbDtYvQhFb4s/SNMXYtw==" />

  <label for="agent_name">Name</label>
  <input type="text" name="agent[name]" id="agent_name" />

  <label for="agent_number">Number</label>
  <input type="text" name="agent[number]" id="agent_number" />

  <label for="agent_licence_to_kill">Licence to kill</label>
  <input name="agent[licence_to_kill]" type="hidden" value="0" />
  <input type="checkbox" value="1" name="agent[licence_to_kill]" id="agent_licence_to_kill" />

  <label for="agent_gambler">Gambler</label>
  <input name="agent[gambler]" type="hidden" value="0" />
  <input type="checkbox" value="1" name="agent[gambler]" id="agent_gambler" />

  <label for="agent_womanizer">Womanizer</label>
  <input name="agent[womanizer]" type="hidden" value="0" />
  <input type="checkbox" value="1" name="agent[womanizer]" id="agent_womanizer" />

  <input type="submit" name="commit" value="Save Agent" />

</form>

Recuerda la pregunta inicial por la cual el equipo central de Slim se guía: "¿Cuál es el mínimo requerido para hacer que esto funcione?" Cuando observas la salida HTML final, creo que es justo decir que Slim ha respondido esa pregunta con bastante éxito, sin quejas por mi parte. Quiero agregar un par de pequeños ejemplos para darte más oportunidad de acostumbrarte a cómo se ve esto en Slim.

Este fragmento de código ERB ...

1	<%= render "shared/agents", collection: @agents %>

... se convierte en esto en Slim:

1	= render "shared/agents", collection: @agents

ERB

<h2>Agents</h2>

<ul>
  <% @agents.each do |agent| %>
    <li class='agent'>
      <div>Name: <%=            agent.name %></div>
      <div>Number: <%=          agent.number %></div>
      <div>Licence to kill: <%= agent.licence_to_kill %></div>
    </li>
  <% end %>
</ul>

Slim

h2 Agents
ul
  - @agents.each do |agent|
    li.agent
      div
        | Name: 
        = agent.name
      div
        | Number: 
        = agent.number
      div
        | Licence to kill: 
        = agent.licence_to_kill

También puedes escribir esto de una manera más ágil a través de la interpolación. Sin embargo, no quieres volverte demasiado loco con eso. Esto se vería así entonces:

Slim

h2 Agents
ul
  - @agents.each do |agent|
    li.agent
      div Name:            #{agent.name}
      div Number:          #{agent.number}
      div Licence to kill: #{agent.licence_to_kill}

Interpolacion de texto

Mencioné esto antes brevemente, pero como es una forma de generar código Ruby, también pertenece a esta sección. Por supuesto, también puedes utilizar la interpolación de texto estándar de Ruby en tus plantillas Slim.

Slim

1	h2 Welcome Mr. #{misix_agent.surname}! I expect you to die!
2
3	h2 Welcome Mr. \#{misix_agent.surname}! I expect you to die!

HTML

<h2>
  Welcome Mr. Bond! I expect you to die!
</h2>

<h2>
  Welcome Mr. \#{misix_agent.surname}! I expect you to die!
</h2>

Como se vio anteriormente, una barra invertida \ inicial simple se escapa de la interpolación.

Código de control

Una más por el camino. Supongamos que deseas utilizar un par de condicionales en tu vista. Al igual que Haml, significa que el código Ruby no se debe enviar a la página con un simple guión -. Has visto esto en el ejemplo anterior, donde lo usamos para iterar sobre @agents sin mostrar esa parte particular del código.

Aunque deberías tratar de mantenerte alejado de todo tipo de condicionales en tus vistas donde sea posible y tratar de encontrar mejores soluciones OOP para tales casos, que es una historia para otro momento, se verían así:

Slim

- if current_user.role == "admin"
  p#admintxt | Welcome back my master!
  = link_to "Edit Profile", edit_user_path(:current)
  = link_to "Logout",       logout_path
- elsif current_user
  = link_to "Edit Profile", edit_user_path(:current)
  = link_to "Logout",       logout_path
- else
  = link_to "Register",     new_user_path
  = link_to "Login",        login_path

ERB

<% if current_user.role == "admin" %>
  <p id="admintxt">Welcome back my master!</p>
  <%= link_to "Edit Profile", edit_user_path(:current) %>
  <%= link_to "Logout",       logout_path %>
<% elsif current_user %>
  <%= link_to "Edit Profile", edit_user_path(:current) %>
  <%= link_to "Logout",       logout_path %>
<% else %>
  <%= link_to "Register",     new_user_path %>
  <%= link_to "Login",        login_path %>
<% end %>

Si deseas generar código sin que el HTML se escape en su lugar, simplemente usa dos signos iguales ==. ¡Eso es!

Antes de continuar, definitivamente debería tomarme el tiempo para mencionar esto: como sabrás, muchas toneladas de código en las vistas, también conocido como toneladas de código Ruby en nuestro contexto, son un olor grave y deben minimizarse en todo momento. Solo porque Slim lo hace incluso más atractivo para enlucir tus plantillas con toneladas de lógica, no significa que debas hacerlo. ¡Practica la restricción en ese departamento! Por otro lado, Slim lo hace realmente elegante para inyectar Ruby donde sea necesario.

HTML en línea

Si sientes la necesidad de escribir HTML en tus plantillas Slim, tienes la opción de hacerlo. No he usado esa función, ni me importaría usarla, pero tal vez durante una fase de transición esto podría ser útil para los recién llegados. Vamos a echar un vistazo súper rápido.

Slim

doctype html
<html>
  head
    title = full_title(yield(:title))
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  <body>
    header.navbar
      .logo
        = link_to "sample app", 'root_path', id: "logo"
        <nav>
          ul.navbar-right
            li
              = link_to "Home",   'root_path'
            li
              = link_to "Help",   'help_path'
            li
              = link_to "Log in", 'login_path'
        </nav>
    .main
      = yield
  </body>
</html>

Cuando Slim encuentra el corchete angular izquierdo <, sabe que deseas mezclar algo de HTML.

Texto verbatim (palabra por palabra)

El símbolo de la pipa | señala a Slim que deseas tener texto sin formato (palabra por palabra) y simplemente copia la línea. En efecto, esto te permite evitar cualquier tipo de procesamiento. La documentación dice que si deseas escribir texto literal en varias líneas, debes darle sangría al texto con cada salto de línea.

Slim

1	body
2	p
3	\|
4	Slim is my new best friend. Slim is my new best friend.

Salida HTML

<body>
  <p>
    Slim is my new best friend. Slim is my new best friend.
  </p>
</body>

Captura de pantalla

Si colocas el texto en la misma línea que el símbolo pipe |, puedes establecer el margen izquierdo después del pipe más un solo espacio. Por curiosidad, jugué un poco con esto y encontré los siguientes resultados. Solo la última variación de ejemplo tiene un pequeño hipo obvio del que deberías estar consciente: se traga la primera palabra de la oración.

Slim

body
  p
    | 
      This line is on the left margin.
       This line will have one space in front of it.
         This line will have two spaces in front of it.
            And so on...

  p
    | This line is on the left margin.
       This line will have one space in front of it.
         This line will have two spaces in front of it.
            And so on...

  p This line is on the left margin.
       This line will have one space in front of it.
         This line will have two spaces in front of it.
            And so on...

  p This line is on the left margin.
    This line will have one space in front of it.
    This line will have two spaces in front of it.
    And so on...

  p
    This line is on the left margin.
    This line will have one space in front of it.
    This line will have two spaces in front of it.
    And so on...

Captura de pantalla

Screenshot of the output by the above source code

La forma en que la salida se representa en tu marcado HTML difiere un poco.

<body>
    <p>
      This line is on the left margin.
       This line will have one space in front of it.
         This line will have two spaces in front of it.
            And so on...
    </p>

    <p>
      This line is on the left margin.
       This line will have one space in front of it.
         This line will have two spaces in front of it.
           And so on...
    </p>

    <p>
      This line is on the left margin.
         This line will have one space in front of it.
           This line will have two spaces in front of it.
             And so on...
    </p>

    <p>
      This line is on the left margin.
      This line will have one space in front of it.
      This line will have two spaces in front of it.
      And so on...
    </p>

    <p>
      <This>line is on the left margin.</This><This>line will have one space in front of it.</This><This>line will have two spaces in front of it.</This><And>so on...</And>
    </p>
  </body>

Comentarios

Por supuesto, es necesario comentar tu código de vez en cuando. No olvides, sin embargo, que demasiados comentarios son también un olor. ¡Intenta mantenerlo al mínimo!

Una barra diagonal hacia adelante / es todo lo que necesitas para comentar cualquier código.

Slim

body
  /p
    | This line is on the left margin.
       This line will have one space in front of it.
         This line will have two spaces in front of it.
           And so on...

¡Boom! Y ahora este párrafo se ha ido de la página. Este comentario no deja rastro en el marcado HTML final. Solo necesitas aplicarlo al selector padre y todos sus hijos también serán comentados. Por lo tanto, incluso los comentarios son escasos y mínimos.

Si, por otro lado, deseas algún comentario HTML  que aparezca en la salida final renderizada, solo necesitas agregar un signo de exclamación ! después de la barra.

Slim

body
  /!p
    | This line is on the left margin.
       This line will have one space in front of it.
         This line will have two spaces in front of it.
           And so on...

Salida HTML

<body>
  <!--p
      | This line is on the left margin.
        This line will have one space in front of it.
          This line will have two spaces in front of it.
            And so on...-->

¡Ordenado!

Atajos personalizados

Hemos estado usando atajos todo el tiempo. Cuando escribes un punto . o un símbolo hash # le dices a Slim que quieres usar accesos directos predefinidos para clases e identificaciones. Eso es ciertamente un muy buen valor por defecto, pero ¿qué puedes hacer para expandir eso y crear tus propios pequeños fragmentos? Podemos hacer esto para etiquetas y atributos por igual. ¡Bienvenido a la genialidad de Slim!

En Rails, solo necesitamos configurar un inicializador con el siguiente patrón:

config/initializers/slim.rb

1	Slim::Engine.set_options shortcut: {'c' => {tag: 'container'}, '#' => {attr: 'id'}, '.' => {attr: 'class'} }

En las aplicaciones de Sinatra, simplemente agrega la misma configuración en cualquier lugar debajo de la línea donde requieres Slim con require 'slim'.

your_sinatra_app.rb

require 'sinatra'
require 'slim'

Slim::Engine.set_options shortcut: {'c' => {tag: 'container'}, '#' => {attr: 'id'}, '.' => {attr: 'class'} }

get('/') { slim :index }

__END__

@@ index
doctype html
html
  head
    title Slim Templates
    body
      h1 Boss Level Templates With Slim

Puedes configurar opciones en el Slim::Engine proporcionando un hash con el acceso directo que necesitas. En el ejemplo anterior, le indicamos a Slim que usara c como acceso directo para una etiqueta container. Lo utilizarías así en tus archivos Slim:

Slim

1	c.content Now you have a container tag with a .content class.

Y el HTML renderizado se vería así, por supuesto:

HTML

1	<container class="content">
2	Now you have a container tag with a .content class.
3	</container>

Muy bonito, ¿eh? Pero no pensaste que ahí es donde se detiene la música, ¿verdad? Podemos llevarlo más allá de eso. Déjame darte un ejemplo que es un poco más complicado:

config/initializers/slim.rb

Slim::Engine.set_options shortcut: {
            '#' => {attr: 'id'},
            '.' => {attr: 'class'},
            'c' => {tag: 'container'},
            '&' => {tag: 'input', attr: 'type'}, 
            '@' => {attr: 'role'},
            '^' => {attr: %w(data-role role)}
           }

En este ejemplo, no solo creé etiquetas personalizadas sino que también proporcioné atributos personalizados. Vamos a analizar este paso a paso. Por cierto, rompí el hash de opciones en varias líneas para mantenerlo legible y para evitar tener una larga línea de código con la que a nadie le gusta tropezar. Se lee mucho mejor, ¿no te parece?

A través del símbolo &, ahora podemos crear una etiqueta de entrada, y solo necesitamos darle un tipo, que sigue inmediatamente al símbolo. Podemos usar cualquier símbolo que tenga sentido usar; no hay necesidad de usar el mismo que yo hice. Sin embargo, ten cuidado y trata de tomar decisiones inflexibles en ese departamento.

Slim

1	&text name="user"
2	&password name="pw"
3	&submit

Salida HTML

1	<input name="user" type="text">
2	<input name="pw" type="password">
3	<input type="submit">

Cuando realices cambios en este inicializador con tus accesos directos personalizados, no debes olvidar reiniciar tu servidor local. Sin eso, tus cambios no se reflejarán durante el preprocesamiento.

A continuación, si necesito un atributo role, ahora puedo prefijarlo con un símbolo @.

Slim

1	.person@admin Daniel Mendler

Salida HTML

1	<div class="person" role="admin">
2	Daniel Mendler
3	</div>

Actualización: el atributo role es un enfoque semántico para describir el rol del elemento en cuestión, si necesitas determinar el propósito del elemento.

Mira, a través del punto obtenemos una clase class="person" y @admin nos dio un role="admin". Muy útil, pero podemos ir un paso más allá y usar una matriz para especificar múltiples atributos que deberían crearse a través de un solo acceso directo.

Slim

1	.nifty^hacker CrackDoctor

Salida HTML

1	<div class="nifty" data-role="hacker" role="hacker">
2	CrackDoctor
3	</div>

Debido a que asociamos una serie de atributos para nuestro acceso directo ^, Slim crea atributos data-role y role simultáneamente mediante un solo símbolo. Eso puede ser bastante útil. Imagínate si deseas generar un elemento similar al siguiente y puedes hacerlo de manera concisa con un atajo y algún código Ruby.

HTML

1	<source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />

Escribir todo esto a mano no parece ser el mejor uso de tu tiempo, tenemos un código para hacer ese trabajo por nosotros. Bueno, ahí lo tienen, eso es todo lo que necesitas saber para crear tu propio conjunto de atajos increíbles, o para crear un gran lío cuando no practicas un poco de restricción. Recomendaría no exagerar con esto, especialmente trata de evitar definir accesos directos que usen símbolos a los que Slim ya está conectado.

Actualización: los data- attributes se utilizan para tener algunos datos privados en tu página o aplicación. Cosas que te ayudan a filtrar contenido, por ejemplo. Son atributos personalizados que se pueden utilizar en todos los elementos HTML. Usarlos para propósitos de JavaScript es otra práctica común. También es muy útil para probar elementos en una página si quieres asegurarte de que se muestren elementos particulares y evitar que los diseñadores se metan con tus estilos.

Configurando Slim

Antes de que te vayas, quería mostrarte un pequeño vistazo a las vastas opciones de configuración y cómo aplicarlas. Para Rails, debes crear un archivo de entorno como config/environments/development.rb y especificar las opciones que necesitas. Simplemente coloca tu configuración en algún lugar dentro del bloque Rails.application.configure.

Rails.application.configure do
  Slim::Engine.set_options default_tag: 'p', 
                           tabsize: 2, 
                           attr_list_delims: {'(' => ')', 
                                              '[' => ']',
                                              '{' => '}', 
                                              '«' => '»', 
                                              '‹' => '›'
                                              }
end

En esta configuración, me aseguré de que la etiqueta predeterminada que se crea si se omite un nombre de etiqueta es una etiqueta <p>, no una etiqueta div, que es la configuración estándar. Además, ajusté el tamaño de las pestañas para usar dos espacios en blanco y finalmente agregué dos delimitadores más para envolver los atributos de las etiquetas. Ahora puedo usar ‹› y «» también para eso. No es terriblemente útil pero es bueno para propósitos de demostración.

En el siguiente ejemplo, puedes ver que todos los delimitadores para atributos wrappers crean el mismo resultado, también que .some-class o #some-id crea etiquetas <p> por defecto.

Slim

body
  #zeroth
  a{href="https://slim-lang.com" title='Home page'} Goto the home page

  .first
  a[href="http://slim-lang.com" title='Home page'] Goto the home page

  .second
  a(href="http://slim-lang.com" title='Home page') Goto the home page

  .third
  a‹href="http://slim-lang.com" title='Home page'› Goto the home page

  .fourth
  a«href="http://slim-lang.com" title='Home page'» Goto the home page

Salida HTML

<body>
    <p id="zeroth"></p>
    <a href="http://slim-lang.com" title="Home page">Goto the home page</a>

    <p class="first"></p>
    <a href="http://slim-lang.com" title="Home page">Goto the home page</a>

    <p class="second"></p>
    <a href="http://slim-lang.com" title="Home page">Goto the home page</a>

    <p class="third"></p>
    <a href="http://slim-lang.com" title="Home page">Goto the home page</a>

    <p class="fourth"></p>
    <a href="http://slim-lang.com" title="Home page">Goto the home page</a>
</body>

Alternativamente, también puedes configurar esto en config/initializers/slim.rb como te mostré en la sección sobre accesos directos personalizados.

Para Sinatra, es el mismo ejercicio descrito en la sección de accesos directos. Simplemente establece tus opciones en algún lugar por debajo de tu declaración require 'slim' y estarás listo.

Echa un vistazo a la documentación en "Opciones disponibles" para obtener más información acerca de lo que está disponible para la configuración. Slim te da muchas opciones para jugar.

Consideraciones finales

Eso es básicamente todo. Hay uno o dos temas más avanzados en los que deberías profundizar si es necesario, pero pensé que en su mayoría no son para principiantes ni se usan mucho en el día a día. Quería mantener las cosas simples y mostrarte todo lo que necesitas para cambiar rápidamente a este increíble motor de plantillas. ¡Diviértete y espero que Slim sea ahora uno de tus nuevos juguetes favoritos!