La Web nunca duerme. Las tecnologías evolucionan, surgen o desaparecen sin dar descanso. Nuestro papel como diseñadores y desarrolladores es equiparnos con herramientas a la altura de las circunstancias. Descubre nuevas herramientas y modelos de trabajo para liberarse de tareas tediosas y aprovechar mejor nuestro tiempo.
(* Octubre de 2014, desde la leonera de un desarrollador Frontend)
Hay una palabra que define el medio Web como ninguna otra: Fluid.
Trabajamos en un escenario cambiante. Cada día surgen tecnologías suculentas con las que acometer proyectos, y cada día quedan obsoletas otras tantas al verse incapaces de resolver nuevos problemas. Los clientes han cambiado también: ya no llaman a agencias de publicidad de tamaño monstruoso, hartos de que les entreguen templates, one-page-scrollers de dudoso funcionamiento, hartos de que los encadenen a CMS ancianos que no responden a sus necesidades. Fuera del micromundo de las grandes empresas, recurren a freelancers solistas, también llamados Unicornios o equipos de trabajo reducidos, mucho mejor preparados para descifrar el caos en que se encuentra Internet en nuestros días. Los clientes buscan soluciones únicas, creadas a medida, para resolver problemas nuevos y buscar opciones creativas.
Si el año 2011 fue el punto de inflexión, el nacimiento del diseñador Responsive y el año en que las tecnologías móviles (geolocalización, acelerómetros…) llegan al explorador…
…Hoy vivimos la era del Webapp. La frontera entre el software, la aplicación móvil, el sitio Web tradicional, el branding y el Arte se difumina.
Internet está al borde de un gran cambio, basado en el contenido, que permitirá a diseñadores y desarrolladores experimentar con la forma en que se cuentan las historias, como supuso para el cine la llegada del sonido. Y más nos vale ponernos a la altura de la era de la Información, el bombardeo constante de estímulos a toda velocidad y el creciente síndrome de déficit de atención de los usuarios (yo entre ellos). Para no caernos del tren, vamos.
Pongamos un ejemplo tonto: Nos encargan hacer la página de un restaurante, un frío día de abril de 2007. No pagan mucho y las herramientas son básicas, con lo que no nos vamos a poner a crear un mundo nuevo de animaciones Javascript y vídeos en pantalla completa. Mismo escenario, un hermoso día otoñal de 2014. Hoy la página ha de cumplir el imperativo Responsive, pero quizá le podríamos dar un toque más allá. Siguiendo el gran ejemplo de Mat Marquis, se nos ocurre crear una página que, con una sola base de código, aproveche el dispositivo en que se visualiza. ¿Qué querría yo, usuario, de la página de un restaurante, si la visito en el Metro con mi teléfono? Probablemente estuviera considerando visitar el lugar ese mismo día. Por lo tanto, tener acceso directo a la Carta (para ver si de primeras tienen lo que quiero comer), opiniones de otros usuarios (para comprobar que no sea una estafa), un mapa que me muestre cómo llegar desde donde estoy (mediante geolocalización), y una forma rápida de reservar (quizás un simple link que inicie una llamada móvil directamente).
Sin embargo, desde el escritorio, probablemente me vaya a entrar más por los ojos esa foto en pantalla completa de un tipo sonriendo a una ensalada, o un vídeo de fondo que nos ponga los dientes largos, sobre los que aparecerá progresivamente el resto de la información…
La tecnología para crear una solución única para nuestro cliente está al alcance de la mano. El sitio Web que estamos creando responde al principio más básico de la Web: Fluid. Aprovecha la plataforma desde la que se visita y desde luego no es una plantilla estándar.
Se parece a muchas otras cosas, aparte de a una web tradicional. ¿Publicidad?, ¿software?. ¿O quizás estamos hablando de algo completamente nuevo?
Por un lado, no nos valen las herramientas de 2007. El éxito de la página no va a ser cuestión de Mockups o de diseños perfectos en Photoshop, de traducirlos ‘pixel-perfect’ al explorador y de chocar los cinco con el cliente. Está en nuestra mano aprovechar herramientas nuevas para crear algo nuevo, diferente.
Por otro, hasta hace poco, un flujo de trabajo a la altura de las circunstancias estaba reservado para equipos de 10 personas o más, compuestos de Project Managers, Arquitectos, Diseñadores, Desarrolladores, Testers… No sólo esto: la tecnología no estaba lo suficientemente madura como para manejar estos nuevos elementos.
Hoy el proceso se ha abierto. Algunos dirían ‘democratizado’. Recurriendo de nuevo al cine, de la misma manera que en su día las cámaras DSLR y el software de edición para el portátil revolucionaron el medio.
La Automatización
Las mismas mentes que recopilaron en su día el HTML5 Boilerplate, ya maduras y unidas a otros geniecillos de la profesión, comenzaron a trabajar desde hace un par de años en una nueva estrategia de trabajo. Poco a poco han ido ganando terreno y su idea se ha convertido en el siguiente gran movimiento web: la Automatización. Su filosofía se reduce a tres simples pasos:
Scaffolding
(Traducido dudosamente como ‘Andamiaje’)
Es la creación automática de la estructura de la aplicación mediante código modelo o boilerplate.
Dependency Management
(Manejo de dependencias)
Nuestra aplicación dependerá siempre de librerías de terceros, ya sean frameworks de JavaScript o plugins de UI como sliders.
Tradicionalmente esto involucraba descargar todas estas librerías y referenciarlas manualmente siguiendo la documentación, un proceso bien doloroso.
Sistemas de Build o Taskrunners
La idea es no gastar energía en cuestiones rutinarias. Estos Taskrunners o ‘automatizadores de tareas’ se encargan de correr tareas sobre nuestro código mediante Javascript. Permiten ejecutar funciones bien complejas, ya sea previsualizar la página, testear en móvil, autorecargar cada vez que se guarda el CSS… En una fase más avanzada, se encargarán de optimizar imágenes, compilar el css de nuestro preprocesador, concatenar nuestros archivos (uniéndolos en uno solo, para reducir los requests HTTP), minificarlos(eliminar redundancias, espacio en blanco…), crear una versión final de la página e incluso de subirlos al servidor.
La logística
Interfaces gráficas
Codekit / Hammer / Prepros / Koala / Mixture
La mejor manera de introducirse en el concepto de la automatización frontend. Estas apps sencillas, con interfaz gráfica, son perfectas para manejar proyectos de pequeño tamaño. Se encargan de crear la estructura, manejar las dependencias e incluso de minificar y concatenar archivos. El resultado es más que suficiente.
Yeoman
El siguiente nivel. Como bien dicen ellos mismos, ‘… a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps’. Es un compendio de tres herramientas que cubre el proceso completo:
Yo - Encargado del Scaffolding
Bower o NPM - Dependency Management o Manejo automático de Dependencias
Grunt o Gulp - El Taskrunner: Previsualización, testing, creación de la versión final.
Toda la magia ocurre en la línea de commando. Yeoman trabaja con unos ‘generadores’ con los que se inicia un proyecto. Son creados y mantenidos por la comunidad, y su función es preparar el esqueleto del código. Los más básicos crean un esqueleto HTML y manejan las carpetas y archivos CSS y JavaScript. También para frameworks como AngularJS, Backbone, Ember…, aplicaciones móviles. De todo.
Tras instalarlo, se corre un simple comando: yo webapp. Dos simples palabras, en la terminal, para iniciar un proyecto. Otro comando de dos palabras, grunt serve o gulp watch crea un servidor fantasma, que permite previsualizar la página. Un comando aún más simple, grunt o gulp, se encarga de preparar una versión completadel sitio Web, en una carpeta que podremos subir directa al servidor. Y esto son sólo algunos ejemplos.
Grunt y Gulp son el alma de la fiesta. Funcionan out of the box y son relativamente fácil de configurar, conociendo un poco de JavaScript, para aumentar su funcionalidad. Funcionan a través de paquetes o plugins que cumplen diferentes propósitos y tareas, que hacen uso de estos paquetes para ejecutar funciones complejas: crear el servidor, testear la aplicación, crear la versión final, etc.
Mediante Bower o NPM se instalan plugins y librerías para el proyecto. Con un simple…
…los plugins cuidan de sí mismos: se estructuran solos y hasta se inyectan en el código HTML.
Estas tres bestias funcionan sobre NodeJs. Sumadas a un sistema de Version Control, normalmente Git, y a un sistema de Deploy (despliego en el servidor), cubren cada paso necesario para un desarrollador.
Una mención para las dos tareas más importantes de un Taskrunner:
El Watch
Se encarga de varias cosas:
- Crea un servidor fantasma, que abrirá una ventana del explorador con una URL tipo http://localhost:9000, en la que corre la página.
- Vigila nuestros archivos, esperando a que los modifiquemos, y recarga la ventana del explorador automáticamente, gracias a la conexión LiveReload.
- Corre tareas sobre estos nuevos archivos, como vigilar la sintaxis. Gracias al JS o CSS Linting nos señala errores en el código y nos advierte de posibles dolores de cabeza.
- Permite incluso acceder a la página desde el móvil, si están conectados a la misma WiFi, mediante una simple URL.
El Build
Es el proceso que maneja la creación de la versión de Producción.
No todo es un camino de rosas. Hay que aprender un poco de configuración de tu Taskrunner favorito, en principio algo sencillo. Funcionan a través de un archivo de texto, al estilo JSON, y toman la información que necesita del HTML, usando comentarios para marcar, por ejemplo, los archivos que ha de concatenar y minificar. Obvio: Estos comentarios no estarán presentes en el build.
Con unos pocos pasos sencillos se puede configurar el Build para crear una versión optimizada de la página, cada vez que agreguemos nueva funcionalidad, y subir esta versión al servidor.
Un paso más allá
Más que un manual técnico sobre el que realizar todos estos procesos, este artículo es una llamada a explorar nuevos sistemas y modos de trabajo que pueden quitarnos una gran carga de encima. Se puede ir un paso más allá. Pensando en cómo trabajaba hace algunos años, algunos para mi son casi de ciencia ficción. Ninguno es nuevo, en realidad.
Desarrollo en el explorador
Por ejemplo, combinando un Taskrunner y Sass o Compass, se puede desarrollar directamente en Chrome, obviando en parte la responsabilidad del editor. Esto es delicioso para el diseño responsive, usando la ventana del DevTools para reducir el tamaño de pantalla, haciendo cambios en el código y viendo como nuestra página evoluciona, sin moverse del sitio. DevTools cuenta también con una excelente emulación móvil, y finalmente se puede conectar a un Smartphone para testear y hacer debugging directamente en el dispositivo.
Git Deploy
Gracias a Git y otros sistemas de control de versiones se puede alcanzar el verdadero ‘desarrollo colaborativo’. Lo que no mucha gente sabe es que también sirve para desplegar los archivos en el servidor. Existen servicios Web especializados (Springloops, Beanstalk), pero para los fans del Open-Source, se puede sincronizar un repositorio de Github con el servidor. Git se encargará de clonar la carpeta de producción a través de unos sencillos pasos. Y listo, sistema de Version Control y Deploy en uno.
Para rematar…
Con investigar un poco a partir de estas herramientas se abre un hermoso abanico de posibilidades. Casi todo lo relacionado con este tipo de proyectos es Open-Source y abierto a la comunidad.
Después de trabajar un tiempo en la empresa privada, descubrir estas herramientas supuso mi manera de escapar, preparado para el ‘mundo real’, en que priman los tiempos y la productividad. Pero la clave es el ahorro de energía, que permite dedicarse a lo que uno hace: código.
P.S.:
- ¿Grunt o Gulp?: Depende.
Más información
- Yeoman
- Vídeo: Paul Irish - Better Web App Development Through Tooling
- Vídeo: Yeoman with Addy Osmani
- Slides: Addy Osmani - Tooling For The Modern WebApp Developer
- Slides: Addy Osmani - Automating Frontend Workflow