Tendencias del desarrollo Web Frontend en el 2012

¿Eres desarrollador web y estás a punto de comenzar un proyecto nuevo? ¿Te sientes frustrado porque es complicadísimo de manipular el javascript del proyecto en el que trabajas, o simplemente quieres estar al día en cómo se está moviendo el desarrollo Javascript? Este post puede resultarte interesante.

Tu Backend debe ser sí o sí un API, de preferencia REST

Si hablamos de Backend existentes, rápidamente escucharemos mencionar a los pesadísimos Webservices y su XML redundante, en el mundo corporate por todos lados veremos páginas Java generando JSP que a su vez arrojan el HTML, tenemos PHPs produciendo HTML, el punto es, pocos proyectos tienen un API propia, eso pareciera ser algo sólo para los grandes como Twitter, Facebook o Google Maps.

Las cosas han cambiado, actualmente tu Backend servirá para producir HTML que será visto en PCs, y probablemente tu proyecto tendrá versiones móviles, apps para televisores y claro, para el refrigerador. Si tu proyecto inicia teniendo como base de toda interacción un API, tu aplicación naturalmente estará lista para después tener una versión móvil, una app para el televisor o para algún cepillo dental con display que los japoneses pronto inventarán.

Si quieres mas información acerca de las REST API, google es tu amigo, en este artículo no pretendo entrar a detalle en aspectos técnicos de cómo hacer las cosas, nos enfocaremos en exponer los conceptos más importantes que se están moviendo hoy en día.

No vuelvas a producir HTML en tu BackEnd, sea la tecnología que sea, arroja sólo JSON y más JSON, así tendrás un Backend elegante, práctico y eficiente, además de versátil. Que sean tus diferentes clientes los que trabajen gracias a tu API, así es, leiste bien: HTML/Javascript será ahora tu cliente y de eso hablaremos en el siguiente punto.

Javascript debe ser el puto amo de tu FrontEnd

Probablemente estás trabajando en algún proyecto donde Javascript es sí o sí el nuevo jefe de jefes en tu Frontend (no lo descarto en el Backend), y seguramente algún Framework acompaña a tu código (jQuery, Dojo, MooTools, Backbone.js), y de eso quiero hablar. Mencionar al "mejor" Framework de Javascript es imposible, cada uno presume de serlo y algunos no necesariamente están peleados, por el contrario son compatibles y el uno necesita del otro.



He tenido la oportunidad de trabajar con todos los que menciono, describiré a cada uno:

• jQuery junto con jQuery UI es una interesante alternativa para enriquecer el DOM.
  
• Dojo es el Framework para el mundo corporate, intenta abarcar todo, components UI, utilerías, charts, lo que se te ocurra, pero sin ser en ninguna de esas aéreas el mejor (el que mucho abarca...).
  
• MooTools es compacto y el que más se preocupa por emular conceptos importantes en la OOP, como la herencia.
  
• Backbone.js, es algo cercano a un MVC tradicional, es flexible y a mi gusto se puede producir código muy elegante utilizándolo. No está peleado con FW como jQuery o MooTools pues tienen enfoques distintos.
  
• La lista de frameworks es grande, sólo mencioné algunos de los que he utilizado recientemente.
  

Lo que es un hecho es que todos los Frameworks actuales tienen utilerías para leer contenido AJAX, y la mayoría interpreta JSON sin problemas, y es aquí, en este punto, donde generamos la integración e interacción con nuestro API. Tendremos archivos HTML y Javascript que consumen nuestro API (como hacemos al consumir APIs de terceros) y estaremos preparados para cambiar nuestra app de plataforma con un esfuerzo mucho menor al requerido sin tener una API.

Si me preguntan por mi combinación favorita para comenzar un proyecto de FrontEnd, yo elegiría jQuery + Twitter Bootstrap(o en su defecto jQuery UI) junto con Backbone.js.

Cómo empezar: recursos disponibles

En este punto ya tienes una idea de cómo deben ser los nuevos Backends, un panorama de cuál puede ser la base de tu FrontEnd, pero tal vez aun tienes muchas dudas referentes a cómo empezar, por dónde debes iniciar. Es complicado incluir las respuestas a eso en un sólo post, sin embargo lo que sí puedo hacer es referenciarte a puntos de partida para tu nuevo proyecto HTML / Javascript. Mencionaré algunos de los recursos de hoy en día:

• HTML5 Boilerplate, es un template listo para que utilices HTML5 sin tener tantos problemas de compatibilidad. No es una solución perfecta, ni resuelve todos los problemas de compatibilidad, pero sin duda hace más ameno el desarrollo crossbrowser. Incluye también scripts ANT para minificar código, compactar imágenes entre otras tareas.
  
  
  
  
• Twitter Bootstrap, es un proyecto interesante de twitter que te permite enfocarte más en lógica de negocio y dejar de lado tareas comunes, como ventanas, layouts y botones, entre otras utilerías.
  
• Chrome - Developer Tools, es para mí la mejor herramienta para debuguear en Javascript, explorar el DOM, la actividad de la red, entre otras.
  
• Mi post tiene una clara inclinación a temas relacionados directamente con la programación, para temas como el CSS, el post de Neo es muy bueno, así como el de Freddie, que es un enfoque más general de como se están moviendo las cosas.
  

Sé que probablemente quedan muchas dudas, respecto a los Frameworks mencionados, así como de los conceptos platicados, respuestas que me resultaría difícil explicar sin extenderme a una gran pared de texto. En base a sus inquietudes principales, podría preparar algún otro artículo, enfocado mas a un "how to" en específico. El objetivo de este primer post, es mover un poco el paradigma (si es que aplica) de cómo en algunos casos se sigue trabajando. Si por ahí ya te entró la inquietud de leer más acerca de REST, probar otros Frameworks de JS, leer más acerca de Html5boilerplate o Twitter Bootstrap, creo que será la mejor ganancia de este tema.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.