carlosazaustre.

es

Qu framework o librera de JavaScript elegir

para mis desarrollos?

Cuando ests empezando en el desarrollo de aplicaciones web, de pronto te das cuenta

que con nicamente HTML y CSS no puedes hacer mucho, necesitas JavaScript.

Pero en cuanto empiezas a investigar sobre este lenguaje te das cuenta de que forma
un ecosistema brutal, y te sientes perdido entre tanta librera, framework, plugin, etc...

He escrito este artculo para guiarte en esta selva que es el desarrollo web (En su parte
Frontend principalmente).

A menos para que sepas qu es cada librera, por qu surgi, cul es su objetivo y
por qu fue sustituida por otra.

No desesperes, es un mundo inmenso, pero cuando entras ya no quieres salir :)

Hace mucho, mucho tiempo...

Vanilla JavaScript

Vanilla JavaScript es como se conoce al lenguaje JavaScript cuando se utiliza sin

ninguna librera o framework.

La traduccin ms castellana sera JavaScript a pelo.

Al principio era la nica forma de utilizar JavaScript en las pginas web, pero poco a
 poco se ha ido complicando.

Se han ido requiriendo ms funcionalidades y JavaScript a pelo se haca demasiado

pesado.

En ese momento naci jQuery.

jQuery

jQuery es una librera de JavaScript que facilita el desarrollo con ste lenguaje.

No es un framework como tal, ya que no implementa ningn patrn de diseo, slo

sirve para hacer ms fcil algunas expresiones.

La parte mala es que muchos desarrolladores se acostumbraron a este tipo de

programacin y olvidaron como se implementaba en JavaScript natural.

Un ejemplo del uso de jQuery es por ejemplo cuando queremos seleccionar un

elemento del DOM con el id "miElemento":

var elem = document.getElementById("miElemento");

var elem = $("#miElemento");

La sintaxis de jQuery es ms sencilla de recordar pero provoca que a la larga

olvides como funciona JavaScript.

jQuery Mobile
 jQuery tambin lanz jQuery Mobile que bsicamente se trataba de una versin
reducida de jQuery y optimizada para dispositivos mviles que en ese
momento estaban empezando a surgir.

jQuery Mobile tuvo un antecesor que fue jQuery UI, un set de recursos tanto CSS como
JS para implementar interfaces grficas. La versin mobile fue una adaptacin de sta.

La guerra de los Frameworks CSS

jQuery UI fue el predecesor de los frameworks CSS que surgieron. Hay infinidad de
ellos, pero los que son ms utilizados son Bootstrap y Foundation.

Bootstrap

ste framework fue creado por un empleado de Twitter y lo liber como Open Source.

Su popularidad se le debe a la facilidad de maquetacin que supone usar sus clases

CSS, as como el diseo visual de los principales elementos HTML de cualquier pgina
web.

Es muy til para realizar pequeos proyectos y probar su funcionamiento antes de

invertir en diseo.

Foundation

Foundation es el otro gran combatiente en sta batalla por el control del CSS.

Su funcionamiento y uso es similar a Bootstrap, y tanto uno como el otro mejoran al

otro cada vez que cambian de versin.

En su momento Foundation era mejor porque implementaba mejor el patrn Mobile

 First y las etiquetas HTML para los diferentes elementos.

Despus lleg Bootstrap y con su versin 3, mejor esta parte. Actualmente

Foundation est en su versin 5 donde tiene un apartado especfico para WebApps,
pero est preparando la versin 6, al igual que Bootstrap su versin 4, donde ambos
utilizarn Flexbox CSS para el posicionamiento de elementos en la pgina web, lo que
har que mejore mucho ms su rendimiento.

La llegada de los Frameworks JavaScript

jQuery estaba y sigue estando muy extendido, pero a medida que las aplicaciones
web implementaban cada vez ms funcionalidades y complejidad, jQuery se
haca inmanejable. Llamadas AJAX, cambios de vista, etc..

El patrn de diseo MVC (Modelo, Vista y Controlador) se estaba empezando a

necesitar en el Frontend cuando siempre haba sido una cuestin de Backend.
Surgieron varios, pero el que destac y sigue ocupando una parte importante en el
pastel es Backbone.

Backbone JS

Fue creado por Jeremy Ashkenas, autor tambin de la librera Underscore, y del
precompilador CoffeeScript.

Backbone debe su popularidad a que es un framework extremadamente ligero (7

Kb) comparado con otros, y te permite utilizar el sistema de plantillas que quieras,
otras libreras, etc.. es bastante flexible.

Ember JS
 Ember es otro framework de la familia MVC. No lo conozco mucho porque no he
trabajado con l, pero las bases son similares a Backbone. Es muy popular por los
desarrolladores en Ruby on Rails.

Angular JS

Angular fue el ltimo en llegar y acab superando a Backbone. Es un proyecto

iniciado por Google y alcanz mucha popularidad rpidamente. Angular trajo
funcionalidades integradas que usando JavaScript Vanilla o BackboneJS necesitaban
de otras libreras para implementarlo.

Angular provee un sistema de mdulos propio, no es necesario utilizar Require.JS

como podra necesitarse en Backbone. Tambin trae su propio sistema de
plantillas, no es necesario implementar Moustache, Handlebars, etc... Provee
servicios propios para traer datos va AJAX, sin necesidad de liberas externas.

Puedes construir directivas para extender el HTML de tus aplicaciones web, etc...

Esto hace que sea un framework ms pesado, pero del que puedes sacar mucho
partido. Su curva de aprendizaje es como una montaa rusa, pero una vez que
entiendes gran parte de su funcionamiento te resultar muy rpido crear aplicaciones
web.
 Con la llegada de NodeJS y su popularidad, surgi el stack MEAN compuesto
por Mongo como Base de Datos, Express y NodeJS como lenguaje y framework del
servidor y AngularJS para la parte cliente. ste stack se ha hecho tan popular o ms
como lo fue en su da el stack LAMP (Linux + Apache + MySQL + PHP).

Y lleg NodeJS

Node.js supuso una revolucin en el mundo del desarrollo web. De repende los
programadores que se encargaban de la parte Frontend de las aplicaciones podan
entrar en el mundo Backend, ya que NodeJS es la forma de poder programar
con JavaScript en el servidor.

Adems del mundo backend, con NodeJS surgieron varias herramientas para mejorar
los desarrollos y hacerlos ms giles.

Grunt

En un momento tuvimos Grunt para automatizar tareas repetitivas como el

minificado de archivos, concatenado, preprocesado de otros lenguajes como
CoffeeScript a JavaScript, o Sass, Less, Stylus a CSS.
Gulp

Despus de Grunt vino Gulp, que utilizando los Streams que proporciona NodeJS hizo
ms sencilla la implementacin y ejecucin de las tareas que hacamos antes
con Grunt.

Browserify

En medio de estos dos grandes surgi Browserify, una librera que permita llevar el
modo de programacin que se estaba empleando en NodeJS al lado
cliente. Ahora podas importar mdulos con el comando require sin necesidad
de tener una rista (Lista larga) de scripts en el HTML.

Webpack

Actualmente tenemos Webpack que incorpora en pocos pasos lo que ms repetamos

en Gulp, como son el transpilado, el preprocesado y el minificado. Webpack ha
conseguido que, dependiendo del tipo de proyecto, no necesites ni Gulp ni
Browserify.

Y ofrece algo muy interesante, el Hot Loader, permitindonos ver los cambios que
hacemos mientras desarrollamos, sin perder el estado de la aplicacin. Algo que Gulp
no nos permite hacer.

Aplicaciones web hbridas?

 El auge de las aplicaciones mviles, Android e iOS, hizo que algunos frameworks
evolucionaran y aparecieran nuevas herramientas.

En un momento haba muchas herramientas que permitan que una web pudiera
ser empaquetada como una app mobile (Phonegap), pero la experiencia de
usuario y el uso era un infierno.

Ionic

Por suerte, Phonegap evolucion a Cordova, y surgi Ionic, una librera basada en
Angular que nos permite crear aplicaciones mviles para Android e iOS
programando nicamente en JavaScript y empaquetndolo con Cordova.

Todo es genial, podemos hacer aplicaciones de una sola pgina con AngularJS,
programar el backend y el frontend empleando JavaScript, incluso aplicaciones
mviles sin cambiar de lenguaje ni de stack.

Pero a los desarrolladores no nos gusta quedarnos quietos...

El surgimiento de los WebComponents

Webcomponents o los componentes web, son una especificacin de la W3C para

 componetizar la web y reutilizar elementos que usamos en nuestro da a da.

A da de hoy tenemos formularios, inputs, tablas, encabezados, etc.. Pero cada vez ms
surgen nuevos patrones de diseos, repetitivos y no hay un estndar para eso.

En nuestras webs todos tenemos mens, navbars, mapas de google maps, videos de
youtube, etc... Su cdigo HTML es ilegible, convirtindose en una montaa de
divs anidados. (Aprovecho para recomendar ste artculo de Elena Torr)

Los WebComponents tratan de solucionar eso, y sta especificacin surgi a la par que
AngularJS y sus directivas

Polymer

Como los WebComponents son un estndar en revisin, no est implementado al

100% en todos los navegadores y por eso surgi Polymer, otro proyecto de Google para
acercar el desarrollo de WebComponents a todos los navegadores.

Actualmente su versin 1.0 ya est disponible con multitud de mejoras y componentes.

Ya no es solo un Polyfill si no que es una librera para facilitar el uso e implementacin

de WebComponents. Tambin est el Polymer Starter Kit que es una punto de arrance,
y una forma para ver si realmente son necesarias las apps nativas o con una web
mobile (sin empaquetados) puede llegar a ser tan verstil como lo nativo.

Conoces AMP (Accelerated Mobile Pages)?

Polymer est creciendo mucho y es una parte importante en esta guerra por el trono
de scripts :P

Programando orientado a componentes

 En medio de todo esto aparece React JS, una librera que ha desarrollado
Facebook y que utiliza tanto en su red social como en Instagram y ha liberado como
Open Source

React

Su popularidad est creciendo a pasos agigantados, debida en gran parte a la

velocidad de renderizado, ya que emplea un DOM Virtual para ello.

React no es un framework como Angular, es nicamente una librera (como poda ser
jQuery, o Polymer) diseada nicamente para la interfaz grfica. Puedes combinarla
con cualquier framework o utilizar Vanilla JavaScript.

Flux

Facebook por su parte dise Flux, una arquitectura para crear aplicaciones
web con React, pero sin usar ningn Framework, nicamente JavaScript puro sin
aadidos.

El patrn de diseo que nos proporciona React es componetizar nuestras aplicaciones

(No es lo mismo que webcomponents).

No pienses en un MVC completo para la aplicacin.

Piensa en pequeos tomos (componentes) que conforman la materia (aplicacin

completa). Cada tomo tiene sus propiedades y estados.

Es una definicin un poco complicada de digerir al principio, pero una vez que la
conoces, no quieres desarrollar de otra manera :D

El estndar de JavaScript evoluciona

 JavaScript empez como lenguaje para aadir animaciones e interaccin en una
pgina web.

Ahora las pginas web son aplicaciones y JavaScript se queda corto, de ahi el
nacimiento de frameworks como Angular, o de precompiladores como CoffeeScript
para traducir a JavaScript.

ECMAScript6 (ES6 o ECMAScript 2015)

JavaScript necesitaba una revisin y al fin se ha hecho realidad.

Durante varios aos se ha ido definiendo la nueva versin del estndar, ECMAScript 6,
que provee clases, mdulos, nuevas funcionalidades, etc..

Se ha conseguido (en cierta medida) que incluso no sea necesario emplear frameworks
para desarrollar, nicamente con libreras podemos tener un stack muy poderoso.

Como toda especificacin, tarda en implementarse, y aunque se aprob en Julio de

2015, muchos navegadores an no tienen todas las mejoras que trae.

Babel JS

Ah surge Babel (anteriormente conocido como 6to5) que nos permite escribir
cdigo ES6 y que sea traducido a ES5 (La versin anterior del estndar que
conocen todos los navegadores)

React ha sido uno de los primeros en adaptar su librera a las nuevas

funcionalidades que trae ES6, lo que ha disparado an ms su popularidad.

Combinndolo con Webpack, conseguimos un entorno de desarrollo web moderno,

por componentes y muy gil.

Aplicaciones Isomrficas

React est creciendo mucho en poco tiempo. Su forma de implementacin permite

usar la librera en la parte de servidor con Node JS, lo que nos permite junto
con otras libreras como React-Router y React-Engine, crear componentes que puedan
ser reutilizados tanto en el Frontend como en el Backend, lo que se conoce como
aplicaciones isomrficas o universales.
 Qu ventajas traen las aplicaciones isomrficas?

Una aplicacin SPA (Single Page Application) tarda un tiempo en cargarse, pero luego
la velocidad de pgina y la UX es muy buena. Pero a cambio pierdes el SEO que te
proporciona una pgina renderizada en el servidor.

Una aplicacin Isomrfica une lo mejor de ambos mundos.

Cuando accedes a la web, es renderizada desde el servidor (bueno para el SEO, y la

carga de pgina) y el resto de interacciones que hagas sern desde el cliente, como una
SPA (bueno para la usabilidad y la UX).

Es el futuro.

Qu pasa con Angular?

Angular hasta ahora era el dominante en el mundo de los frameworks de JS. Pero
React le ha estado comiendo terreno. Y Polymer tambin en cierta medida.

Angular tambin tiene un peso importante dentro del desarrollo hbrido con Ionic,
pero la llegada de React Native tanto para iOS como para Android, le puede
relegar, ya que con React Native no estamos haciendo una aplicacin hbrida, estamos
desarrollando una aplicacin nativa pero utilizando JavaScript para ello.

Angular tambin nos proporcion un sistema de mdulos que JavaScript,

nativamente, no tena, al igual que las directivas que se asemejaban a los
WebComponents que estaban surgiendo.

Ahora que ya estas funcionalidades ya estn aqu con ECMAScript6. Es el momento de

utilizarlas

Angular 2.0
 La nueva versin del framework de Google cambiar mucho la forma de
programar con respecto a las versiones 1.x, ser mucho mejor, usando ms
recursos nativos.

El problema est que cambia tanto que una versin 1.x no es compatible con la 2.0, por
lo tanto si quieres actualizar, tendrs que reescribir todo.

Otro problema es que est tardando mucho en aparecer. Ya hay una versin alpha,
pero an tardar en ser estable y utilizarse. Y mientras tanto React le est comiendo
terreno.

Ionic 2

En la parte mobile, React tambin esta pegando fuerte con Native y eso est haciendo
que Ionic pierda fuelle, pero la gente detrs de Ionic est trabajando codo con codo
con la gente detrs de Angular 2 para hacer un framework ms poderoso.

Entonces Qu elijo?

En estos casos siempre digo que elijas la librera, lenguaje, herramienta con la que te
sientas ms cmodo. Olvdate de modas, y utiliza lo que te haga ms productivo
y sobre todo te divierta desarrollando.

En mi caso me encuentro muy cmodo con Angular 1.x y utilizando Gulp para
automatizar tareas.

He probado React y tambin me gusta su patrn de desarrollo basado en

componentes, y para hacer pequeos proyectos o empezar nuevos es buena opcin.

Polymer no lo he probado an, pero tengo ganas por los comentarios que me llegan
de medio GDG Espaa :D
Lo que no puedes hacer es reescribir toda tu aplicacin en un nuevo framework slo
por el hecho de que lo est petando. Te acabar volviendo loco.

Prueba lo que te llame la atencin y si lo ves til, adelante con l :)

Pruebes el framework o librera que pruebes, al final de da tienes que enfrentarte a

JavaScript. Es importante conocer las bases para enfrentarse a cualquier reto. Puedes
aprender JavaScript desde cero hasta el nuevo estndar ES6 con mi nuevo
eBook "Aprendiendo JavaScript".
Y tu, Qu framework usas? Cul te gusta ms? Djalo en los comentarios y
abramos el debate.