Parrot, view-engine que facilita la lectura de HTML para MVC

Cuando Microsoft decidió mejorar el código escrito en las vista para MVC, fue con la intención de agilizar la escritura de dicho código, pero también para que fuera fácil de escribir.
Lamentablemente, optaron por dejar los tag de HTML tal y como estaban. No está en mí criticar esta decisión, pero aunque razor ha ayudado a hacer más legible el código, cuando se posee una página algo compleja, los tags de HTML pueden llegar a dejar las vistas algo incómodas de leer (Sí, lo sé, también existen las partial view).
En ayuda a esto, surge una librería llamada Parrot que se define a sí misma como un view-engine o motor de vistas.
Es una librería relativamente joven y aunque no cubren el 100% de los casos, tienen una gran cantidad cubierta. La última versión, la 1.0.3, salió en julio de 2013 y prometen seguir haciéndola crecer.
Esta herramienta nos permite ahorrar bastante "código" HTML al momento de escribir las vistas ya que con una muy simple sintaxis, este motor nos renderiza todo lo necesario para agregar los tags y atributos deseados. Pero vayamos a los ejemplos que va a resultar más claro que toda mi palabrería.

Con razor hoy escribiriamos un código más o menos similar al siguiente para llenar una lista con un modelo de tipo List<>:

<ul id="ListOfPeople">
    @foreach (Models.Person p in Model)
    {
        <li>@p.Name - @p.Phone</li>
    }
</ul>

Con esta librería sólo tendríamos que escribir una línea de código:

ul#ListOfPeople(Model) > li | @Name - @Phone

Usa una sintaxis muy simple, parecida a jQuery o CSS. Con la línea anterior dice que tiene que poner un tag ul, cuyo id va a ser ListOfPeople, que dentro debe poner un tag li y usar como texto (lo que viene luego del pipe) @Name - @Phone. Con esa sola línea resuelve lo que normalmente escribiríamos en 6.
Este es el resultado que se obtiene una vez renderizado en el browser (en cualquiera de ambos casos):

<ul id="”ListOfPeople”">
 <li>John Smith – 555-1234</li>
 <li>Mary Smith – 555-1236</li>
 <li>Steve Smith – 555-1236</li>
</ul>

Un ejemplo mucho más simple, es ver cómo se renderizan tags simples:

ul
p
div
span

Parrot tiene también la capacidad de detectar de qué manera puede cerrar los tags de HTML para hacer más liviana la página. Teniendo en cuenta el ejemplo anterior, su renderizado, sería el siguiente:

<ul></ul>
<p />
<div />
<span />

Aquí sólo les presento dos ejemplos de cómo Parrot permite ahorrar mucho espacio en las vistas y cómo éstas se hacen más legibles para el desarrollador.
Esta librería puede encontrarse entre los paquetes de NuGet por lo que resulta aun más fácil su implementación y además cuenta con un sitio para probar el renderizado de código de prueba.
Los invito a visitar su sitio oficial y su sitio de pruebas para que saquen sus propias conclusiones.

Nota publicada en el blog de Triada Software.

Por Juan Barrionuevo