En defensa de los frameworks front-end

por Natalia Ventre el ・ podés leerlo en 5 minutos ・

Un framework (armazón) sirve para crear código robusto rápidamente. El desarrollo front-end abarca HTML, CSS y JavaScript. Los frameworks para HTML suelen denominarse boilerplates, para CSS sistemas de grillas y para JavaScript librerías.

Ejemplo de boilerplate

HTML5 Boilerplate: Permite usar los nuevos elementos HTML5 con confianza, ya que es compatible con Chrome, Firefox 3.6+, IE6+, Opera y Safari. Incluye una normalización de CSS y solución a bugs comunes, CSS helpers (por ej. .clearfix), estilos CSS predeterminados para impresión, un snippet optimizado para Google Analytics, configuraciones del servidor Apache orientadas a la performance (por ej. caching y compresión GZIP), favicons de ejemplo, etc. Sirve como punto de partida, en vez de empezar con un proyecto en blanco, y está profusamente comentado por lo que es también un material educativo sobre las mejores prácticas del desarrollo front-end actual1. Creative Commons, Mercedes Benz, Nike, etc. usan el HTML5 Boilerplate.

Ejemplo de framework CSS

inuit: es un framework desarrollado por Harry Roberts de CSS Wizardry basado en Sass, que sigue los principios de OOCSS de Nicole Sullivan y la metodología BEM. Consiste en una serie de objetos abstractos, como el objeto media, el objeto isla, etc. y por supuesto un sistema de grilla basado en proporciones. Además tiene unos estilos para detectar visualmente código potencialmente inválido o no accesible.

Ejemplos de librerías de JavaScript

jQuery simplifica la selección y modificación del árbol DOM, el manejo de eventos y las interacciones AJAX. Es compatible con Chrome, Firefox 10+, IE6+, Opera y Safari 5.0+. Google, Netflix, WordPress, etc. usan jQuery.

Modernizr sirve para detectar capacidades (HTML5 y CSS3) soportadas por el navegador del usuario y ofrecer versiones alternativas o polyfills. Google, Microsoft, Twitter, etc. usan Modernizr.

Backbone.js: permite estructurar el código JS en el estilo MVC (Modelo, Vista, Controlador, o en este caso Colección) y es útil para programar aplicaciones ricas client-side donde la mayoría de la visualización y manipulación de data se realiza en el navegador (no en el servidor)2. Basecamp Mobile, Rdio, Stripe, etc. usan Backbone.js.

Ejemplo de framework front-end

Bootsrap: basado en LESS, incluye una grilla de 12 columnas tradicional o fluida con breakpoints basados en dispositivos populares, estilos por defecto (tipografía, código, tablas, formularios, botones e imágenes), componentes (menús desplegables, barra de navegación, breadcrumbs, paginación barras de progreso, etc.) y plugins JavaScript (modal, pestañas, acordeón, carousel, etc.) y posibilita un desarrollo web rápido y fácil3.

Captura de pantalla de BreakingNews
BreakingNews.com de NBC hecho con Bootsrap. Más ejemplos en Built with Bootsrap.

Ventajas de usar un framework front-end

  • Menos código y desarrollo más rápido: Una vez superada la curva de aprendizaje, podés crear una aplicación o sitio web rápidamente, aprovechando del código incluido para no tener que escribir cada línea de código que el proyecto requeriría si empezaras de cero.
  • Opciones por defecto inteligentes: los frameworks front-end están basados en mejores prácticas. Los bugs más comunes y la compatibilidad con navegadores están resueltos. Son dogmáticos en la medida en que funcionan como el autor piensa que deberían funcionar en vez de tratar de complacer a todo el mundo, pero te evitan tener que re-inventar la rueda y te permiten enfocarte en los problemas reales concernientes a tu proyecto.
  • Soporte de la comunidad: Además del creador y/o un equipo dedicado, a través de GitHub, cientos de desarrolladores contribuyen en los frameworks front-end mencionados. Al ser usados por un gran número de personas, se requiere menos testeo.
  • Adecuados para el trabajo en equipo: Un framework front-end bien documentado facilita que nuevas personas comiencen a trabajar en un proyecto.

Mitos sobre los frameworks front-end

Repetidamente he escuchado críticas sobre los frameworks front-end. Paso a refutarlas:

  • no son semánticos: escribir HTML semántico se refiere a etiquetar la navegación primaria como nav, una composición auto-contenida como article, etc., es decir según su contenido. Las nombres de clase son sólo para los desarrolladores ya que sirven para relacionar estilos CSS o comportamientos JS con un elemento HTML4. Los nombres de clase atados al contenido son poco re-usables. De todas maneras, si no te gusta ver en tu código nombres de clase del estilo “.span4”, con un pre-procesador de CSS podés incluir los estilos de .span4 en por ej. “.noticia-principal” (con la directiva @extend o con los placeholders selectors de Sass).
  • es difícil implementar diseños complejos: algunos diseños son igualmente difíciles de implementar desde cero o usando un framework front-end, para mí el problema está causado por el desarrollo en cascada5, por la elección de un framework no idóneo para el proyecto o por una mala implementación del mismo.
  • son pesados: El error es no optimizar el código para producción, no tiene relación directa con el uso de un framework front-end.
  • los expertos crean su código desde cero: y seguramente usan el bloc de notas para programar. Darle la espalda a una herramienta que te simplifica el trabajo, no quiere decir que seas un experto, sino que te gusta perder el tiempo. Además me parece arrogante pensar que sos mejor que los 100+ desarrolladores que contribuyeron a Backbone, Bootsrap, HTML5 Boilerplate y jQuery, los 85 que contribuyeron a Modernizr y los 17 que contribuyeron a inuit en GitHub.

Conclusión

Los frameworks front-end son una excelente herramienta para crear un prototipo rápido y refinarlo iterativamente hasta llegar al código de producción. El HTML5 Boilerplate debería ser la opción por defecto para desarrollar cualquier aplicación o sitio web hoy en día y según sea necesario se puede combinar o sustituir por otro framework front-end más completo.


  1. 320 and up es un proyecto similar, que sigue los principios de contenido primero y diseño web adaptable, desarrollado por Andy Clarke, autor de Hardboiled Web Design.

  2. Angular.js y Ember.js son proyectos similares para crear aplicaciones web.

  3. Fundation es un proyecto casi idéntico a Bootsrap.

  4. Lectura recomendada: About HTML semantics and front-end architecture por Nicolas Gallagher y Defending presentational class names.

  5. Lectura recomendada: The Post-PSD Era por Brad Frost.