Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ruby

Una introducción a las plantillas con Slim

by
Length:LongLanguages:

Spanish (Español) translation by steven (you can also view the original English article)

¿Por qué Slim?

Si vives y respiras en Ruby-land y le has dado una oportunidad a Haml antes, es probable que ya conozcas un par de los argumentos que voy a presentar. Sin embargo, creo que es una buena idea seguir adelante, ya que es posible que ya hayas decidido utilizar un motor de plantillas más minimalista y me gustaría que vieras las ventajas que ofrece Slim también.

Antes de adentrarnos en por qué Slim es genial, quiero cubrir qué es realmente Slim y qué hace por ti. La documentación resume esto bastante bien:

"Slim es un motor de plantillas rápido y ligero con soporte para Rails 3 y 4".

También puedes usarlo con Sinatra e incluso Rack plano. Entonces, si estás un poco cansado de usar ERB para escribir tus plantillas o no estás muy satisfecho con lo que Haml tiene para ofrecer, entonces Slim es exactamente el árbol correcto para ladrar.

En lo que respecta a su sintaxis, las personas detrás de Slim intentaban encontrar una respuesta a la siguiente pregunta: "¿Cuál es el mínimo requerido para hacer que esto funcione?" Para escribir la cantidad mínima de código de front-end posible, esto seguramente suena como el correcto pregunta para hacer

¿Slim ofrece una solución perfecta para todas tus inquietudes de plantilla? Probablemente no, pero francamente, ¡podría ofrecer lo mejor! ¿Es fácil de aprender? Creo que sí, pero es difícil saber lo que otras personas consideran fácil. Sin embargo, diría esto: se necesita un poco de tiempo para acostumbrarse, pero definitivamente no es una ciencia de cohetes. Así que no hay necesidad de sentirse intimidado si eres un poco nuevo en el lado de la codificación de las cosas. ¿Lo pasarás bien con eso? ¡Absolutamente!

Entonces, ¿por qué Slim? La respuesta es bastante sencilla, creo. ¡Tu marcado debe ser lo más legible y hermoso posible! Deberías pasar un buen rato trabajando con él, y cuanto menos tiempo necesites pasar vadeando toneladas de materia de etiquetas, mejor.

¿Qué es hermoso, te podrías preguntar? Por supuesto, esa no es una respuesta que intentaré abordar, pero ser mínimo en ese sentido rara vez duele. ¿Qué hay de volverse súper críptico porque el motor de plantillas intenta ser súper inteligente en ser minimalista? Esa es una preocupación justa, y te alegrará saber que el equipo detrás de Slim se toma esto muy en serio. Quieren eliminar todo lo posible del HTML antiguo y revelar solo las partes esenciales, todo sin volverse demasiado crípticos. Su equipo principal intenta ir incluso un paso más allá de eso, y están realmente preocupados por la estética del código Slim. Muy buen trato, ¿no te parece?

¿No es mucho mejor si solo puedes echar un vistazo a una plantilla y poder digerir fácilmente lo que está pasando? Las plantillas pueden convertirse en un lugar muy "abarrotado", incluso si haces un uso inteligente de los 'partials', y como consecuencia, deseas reducir la cantidad de ruido al mínimo absoluto.

¿Has probado la sintaxis de Sass (.sass) con sangría? ¡Espero que lo hayas hecho, porque es una simple droga! Si es así, es probable que tengas una apreciación similar por lo que Slim tiene para ofrecer. También es sensible al espacio en blanco, lo que lleva a un código realmente breve y legible. Tomemos este pedazo de código HTML/ERB y comparémoslo con Slim.

Veamos el equivalente de Slim:

Lo primero que la gente suele reconocer es: "¡Hey, no hay etiquetas de cierre!" Claro, aún no estás acostumbrado a la sintaxis, por lo que puede parecer un poco extraño al principio, pero estoy seguro de que puedes apreciar lo sucintamente que se lee. No hay corchetes de ángulo izquierdo/derecho, y no hay necesidad de escribir divs y selectores minimalistas, por lo que, en cambio, podemos centrarnos en el nombre que tienen los identificadores y las clases. Se siente mucho menos desordenado y más organizado, ¿no crees?

Para la comparación, aquí está la versión de Haml. Realmente no significa que sea una oportunidad para golpear a Haml, solo te muestra lo similar que es, pero también que Slim va un paso más allá con su elección de sintaxis mínima. El resultado es que es incluso más elegante que Haml, creo.

¿Por qué ir tan minimalista pero aún así hacer que escriba el signo % por todas partes? Mi dedo índice no tiene ninguna motivación especial para agarrar Shift-5 todo el tiempo. ¿Puedes personalizar ese comportamiento? Bastante seguro, ¡o al menos eso espero! Pero el diseño parece un poco defectuoso en ese sentido y menos espartano en comparación con Slim. Sin embargo, me doy cuenta de que esto también es cuestión de gustos, así que lo dejo así.

Haml

Antes de saltar a las partes carnosas, déjame estar hinchado por un momento y resumir lo que creo que hace que aprender a Slim sea una buena inversión de tu tiempo:

  • Es rápido.
  • Super legible.
  • Tiene una sintaxis inteligente.
  • Su estética es minimalista.
  • Es altamente configurable.
  • Es amigable con el dedo índice.
  • Es una plantilla a nivel de jefe.
  • Es divertido escribir y luce estupefacto.
  • Salida automática de HTML por defecto.
  • Super agradable integración de Rails y Sinatra.
  • Plantillas muy mínimas que son fáciles de mantener.
  • Es extenso y te permite escribir complementos y extensiones.
  • Hay un modo sin lógica para los momentos en los que deseas generar HTML pero no tienes ninguna razón para incluir el código Ruby.
  • Tiene accesos directos configurables para etiquetas, que es una característica bastante agradable para personalizar el motor según tus necesidades.
  • Y finalmente, porque la sintaxis de Slim está guiada por un lema muy genial: "¿Cuál es el mínimo requerido para que esto funcione?". Esto es muy difícil no gustar.

¿Qué son las plantillas?

En términos de experiencia de programación, si te consideras más en el lado novato, intentaré darte un viaje rápido antes de comenzar a usar Slim. Cuando las personas hablan de plantillas, en su mayoría se refieren al marcado HTML simple con código dinámico que a menudo se usa para el control de flujo, inyección de objetos o procesamiento parcial de plantillas (parciales) llamadas 'partials'. Por ejemplo, cuando un controlador te proporciona variables de instancia que pueden ser utilizadas por la vista a través de la sustitución de variables (instancia) para mostrar los atributos de ese objeto. Todo esto sucede a través del procesador de plantillas de tu elección, ERB, Haml, Slim y similares, que combina todas tus plantillas web en una página web final. Las plantillas también se pueden utilizar para generar fuentes XML y RSS, así como otras formas de archivos de texto estructurado.

Con las plantillas, puedes definir varios "diseños" llamados "layouts" que manejan partes particulares de tu sitio web, así como los datos que deben mostrarse sistemáticamente con la menor cantidad de repetición. Desde que comenzaste a jugar con Rails, seguramente has estado usando ERB para exactamente este tipo de escenarios. ERB toma las partes de texto sin formato, las entrega al documento final y solo procesa el código marcado como tal. No voy a entrar en detalles sobre cómo funciona ERB y supongo que tiene una comprensión básica antes de sumergirse en Slim. No recomendaría el uso de Slim si aún no estás familiarizado con la forma predeterminada de plantillas de Rails, ya que te resultará mucho más fácil jugar con Slim si comprendes cómo funciona esto directamente en Rails.

A continuación se muestra un ejemplo básico de ERB de una plantilla que muestra una colección de misiones asociadas con un objeto @agent. Directamente a continuación, también utiliza un método de una gema de Ruby para paginar la colección @missions.

Esta es una pequeña sección de una plantilla que muestra muy bien que no es más que una parte de HTML estático que tiene algunas inyecciones dinámicas de algún código Ruby. Si no usáramos plantillas como esta, tendríamos que escribir el código manualmente para cada nuevo objeto que queremos ver en una página. No estoy seguro de ti, pero no puedo imaginar una pesadilla más grande o una pérdida de tiempo más que eso. Las plantillas nos dan una herramienta útil para hacer que nuestra capa de vista sea inteligente y dinámica sin repetirnos.

Como también puedes ver en este ejemplo, las plantillas nos permiten usar plantillas parciales que podemos representar donde sea necesario. Aquí tendríamos un parcial _mission.html.erb en algún lugar, lo que nos ayuda a recorrer una colección de objetos @mission, que a su vez se incluyen en nuestra clase missions.

Como puedes ver, las plantillas no son nada mágico, pero son muy útiles para hacer que el desarrollo de aplicaciones web sea mucho más eficiente y organizado. Solo quería asegurarme de que todos estemos en la misma página con esto antes de sumergirnos en Slim.

¿Qué pasa con ERB y Haml?

Si te gusta usar estas herramientas, está perfectamente bien. Nada de malo con eso. La cuestión es que, si estás buscando algo más inteligente que sea más minimalista, es difícil encontrar algo que vaya más lejos que Slim. Para mí, es la solución de plantillas más racionalizada en Ruby-land que conozco. Todos funcionan bien, así que es una cuestión de preferencia personal.

Empezando

Slim con Rails

No es de extrañar, hay una gema para eso.

Gemfile

Shell

Eso es todo, estamos listos. Debido a que instalaste esta gema, Slim se cargará e inicializará cada vez que se cargue tu aplicación. Además, para tu conveniencia, cuando generes controladores a través de rails generate controller, generarás automáticamente archivos de vista .slim para tu vista, ya no más archivos de .html.erb. Funciona igual con los 'scaffolds', ¡pero espero que no los estés usando realmente!

Para demostrar este comportamiento para las personas que son nuevas en el uso de los generadores Rails, crearé un controlador para los operadores del servicio secreto que tiene todas las acciones del controlador REST estándar:

Shell

Entre otras cosas, obtendrás todos los archivos .slim que necesitas. Rails también incluye un .html adicional: puedes deshacerte de eso si te molesta, por supuesto. Lo único que importa es que la extensión de archivo slim ya está allí y que está lista para preprocesar tu código Slim. ¡Hurra!

El siguiente paso sería abrir el diseño de la aplicación y reemplazar el código de la placa de calentamiento con algo de Slim. Además, no olvides cambiar el nombre del archivo application.html.erb a application.slim (o application.html.slim si lo deseas). Ya hemos 'slimmed' un poco, incluso el nombre del archivo ha perdido algo de peso.

app/views/layouts/application.slim

Nada lujoso, pero un buen comienzo, y creo que tan fácil como puede ser.

Captura de pantalla

A landing page for starting with Slim Templates

Como nota al margen, si alguna vez tienes curiosidad por saber qué versión de la gema has instalado, este pequeño comando te dirá: también es útil para cualquier gema, por supuesto:

Shell

Te indica dónde está almacenado y qué versión tiene esta gema actualmente. La salida se ve así:

Slim con Sinatra

Para los entusiastas de Sinatra entre ustedes, también quería mencionar cómo comenzar. Primero necesitamos instalar la gema, por supuesto.

Shell

Y después de eso, ya casi terminas. En tu aplicación Sinatra, solo necesitas requerir Slim y estarás listo.

some_sinatra_app.rb

Aquí utilicé una plantilla en línea para escribir el marcado Slim en el mismo archivo y le dije a Sinatra que quería usar Slim para el archivo de índice cuando realiza una solicitud get a la ruta raíz. Solo necesitaba hacer referencia a la plantilla en línea dentro de un bloque de llaves. Lo que se ve debajo del @@ index, que significa la plantilla índice, es una sintaxis Slim sensible al espacio en blanco.

Captura de pantalla

Another shot of the landing page template

Es hora de mostrarte cómo escribir algo en Slim.

Sintaxis

Etiquetas HTML

Declaración HTML del <!DOCTYPE>

Empecemos por la más simple, la declaración doctype. Como probablemente sepas y ya olvidaste, esto debe ser declarado en la parte superior de tu documento HTML, antes de la etiqueta <html>. Para tu información, no es una etiqueta HTML e instruye al navegador acerca de la versión de la página HTML.

Entre las diferentes versiones para <!DOCTYPE>, solo hay una para HTML5: <!DOCTYPE html> - ¡gracias! - que es exactamente lo que obtenemos cuando escribimos doctype html o doctype 5 en Slim.

Acceso directo de tipo ID # y acceso directo de tipo clase .

Escribir código de front-end significa un montón de clases y muy pocas identificaciones, espero. Para evitar escribirlos una y otra vez, Slim se encuentra contigo más de la mitad y te permite cortocircuitar todo el proceso básicamente. Déjame mostrarte lo que quiero decir. Toma el siguiente código Slim:

Esto se compila a esta salida HTML:

Como puedes ver, el punto sugiere a Slim que deseas usar una clase, y el nombre que sigue es el que quieres nombrar. Lo mismo ocurre con los identificadores: solo usas el símbolo de hash (también conocido como signo de libra) que hace el truco. Los lectores astutos seguramente reconocieron que las versiones sin una etiqueta principal activan la creación de un div con la clase o id correspondiente, lo que se puede ver para <div id="logo"> y <div class="evil-wrapper">. Bastante útil, ¿no crees?

También puedes ser más expresivo en tu código Slim si lo deseas. Nadie te impide escribir tus buenas clases e identificaciones a mano. Si de alguna manera te sientes apegado a eso, ¡adelante! Me gusta la versión más concisa porque también me permite evitar escribir comillas y repetir el texto todo el tiempo. Depende de ti, ¡lo que te haga feliz! El código a continuación es un poco más detallado pero presenta el mismo HTML que arriba:

Slim:

Ahora, ¿no es eso algo bello? Imagina todas estas temidas etiquetas HTML que no necesitas escribir por ti mismo, además de deshacerte de todo el exceso de corchetes angulares. Claro, tu editor de código también puede hacer mucho de este trabajo por ti, pero ¿tu editor también lee el código por ti? ¡Exactamente!

Cuando vuelvas a leer tu código, también querrás un documento sucinto que sea muy fácil de digerir visualmente. Creo que este sencillo ejemplo muestra mejor lo que una herramienta como Slim tiene para ofrecer. Son estas pequeñas cosas las que se suman a una gran herramienta y ahorro de tiempo a largo plazo. Incluso si solo lo usas para esa funcionalidad exactamente e ignoras las otras funciones más avanzadas por ahora, hacer el cambio a Slim ya sería rentable.

Etiquetas en línea

Digamos que tienes varias etiquetas que deseas tener en línea para ser más compacto o lo que sea. Entonces, en lugar de interrumpir una nueva línea, puedes encadenarlos separando estas etiquetas con dos puntos :. Los dos ejemplos a continuación muestran la misma salida.

Slim:

Salida HTML:

La segunda versión es más mínima debido a las etiquetas en línea y sería mi preferencia. Después de todo, lo compacto es bueno, ¿no? Creo que este caso muestra muy bien que Slim se equilibra uniformemente entre compacto y críptico. Sí, requiere un poco de tiempo para acostumbrarse y, en algunos casos, los envoltorios de atributos adicionales son útiles (mira más sobre los envoltorios a continuación). Llámame loco, pero estoy bastante seguro de que leerás Slim como el código HTML normal en un instante.

Contenido del texto

Escribir texto es tan fácil como cabría esperar, por supuesto. Solo agrégalo después de tus etiquetas.

Slim:

Salida HTML:

¡Nada más que añadir, tan fácil como puede ser!

Atributos

Los atributos HTML, que proporcionan información adicional sobre las etiquetas, pueden incluirse de la siguiente manera:

Slim:

Salida HTML:

Básicamente, puedes encadenarlos y Slim los separará del contenido del texto, si está presente. Si observas detenidamente, puedes ver que nuestra etiqueta img tiene una barra diagonal, que cierra las etiquetas explícitamente en Slim. Para imágenes o más etiquetas complicadas, esto es sin duda algo útil. Por cierto, HTML5 no requiere que escribas los nombres de los atributos en minúsculas ni que uses comillas alrededor de los valores de los atributos. Sin embargo, es una práctica estándar recomendada por el W3C.

Fusión de atributos

Si tienes varios selectores como clases o identificadores por etiqueta, también puedes escribir esto de manera más sucinta encadenándolos en cadena. Estos selectores serán delimitados automáticamente por espacios en blanco.

Slim:

Salida HTML:

No es que tener todos estos ids y clases mezclados de esta manera representa las mejores prácticas o algo así, pero es fácil ver cómo funciona Slim en un ejemplo tan intrincado. Muy bien, ¿eh? Sin embargo, ten cuidado: la distribución de estos selectores en varias líneas no funcionará sin envoltorios de atributos (consulta la siguiente sección).

Otra opción sería utilizar una matriz con cadenas o solo símbolos para fusionar en atributos.

Slim:

Salida HTML:

En mi libro, llamaría a este un buen conocedor, pero no es algo que trate de usar activamente. Podría ser útil si quieres interpolar algo, supongo.

Atributos Envoltorios (Wrappers)

Slim te ofrece envoltorios para que tus atributos sean más fáciles de leer. Puede que no sea necesario todo el tiempo, pero es útil saber si una etiqueta con muchos atributos necesita un poco de control. Puedes usar cualquiera de los siguientes delimitadores para ajustar los atributos: {}, [] y ().

Slim:

Salida HTML:

Si esa es una forma más fácil de organizar el marcado, ¡adelante! Como se ilustra en la segunda etiqueta a y las etiquetas h3, incluso puedes distribuir atributos y selectores en varias líneas. La sangría parece aplicarse de manera muy indulgente con respecto a la sensibilidad del espacio en blanco. Sin embargo, creo que no durará mucho tiempo y que no necesitarás mucho envoltorios. Te acostumbrarás a la sintaxis Slim de los barebones en poco tiempo y guardarlos para ocasiones especiales, como probablemente deberías.

Para las etiquetas en línea, los envoltorios pueden ser útiles de vez en cuando. Como también puedes observar en el siguiente ejemplo, puedes usar espacios con los delimitadores para hacerlo aún más legible, solo una nota al margen.

Salida HTML:

Atributos de Interpolación

¿Alguien dijo interpolación? Dentro de los atributos citados, puedes usar Ruby para interpolar el código si es necesario. Un ejemplo simple debería ser suficiente para ilustrar este comportamiento:

Slim

Nuevamente, no es algo que puedas usar a diario, pero seguro que es bueno tener en tu bolsa de trucos. Los valores de los atributos se escaparán por defecto. Si necesitas deshabilitar ese comportamiento, simplemente usa ==.

También puedes usar Ruby completo para jugar con tus atributos. Simplemente lanza un signo = allí donde desees que se ejecute un código Ruby y estarás listo para comenzar. En el segundo artículo, encontrarás más información sobre cómo generar código Ruby en tus plantillas Slim.

Eso, por supuesto, también significa que puedes usar valores booleanos simples de la misma forma en sus atributos.

Maravilloso, ¡sigamos adelante!

Consideraciones finales

Espero que ahora tengas una buena idea de por qué Slim es una buena opción para todas tus necesidades de plantillas en Rubu-land. Si aún prefieres usar Haml o ERB en este momento, puedes aumentar el apetito por Slim con el tiempo. No estoy diciendo que sea un gusto adquirido o algo así, solo que no es algo que muchas personas aprendan temprano en sus carreras, tal vez porque aún no han sentido el dolor de escribir todo ese marcado una y otra vez. Este artículo debe proporcionarte los conceptos básicos que necesitas para comenzar.

Slim tiene más que ofrecer, por supuesto, especialmente algunas características avanzadas que definitivamente quieres echar un vistazo. En el próximo artículo, comenzaremos con una sección más detallada sobre cómo generar código Ruby en tus plantillas, y mucho más, por supuesto. ¡Te veo allí!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.