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.

Game of Frameworks - GDG Cceres #CodeCC de Carlos Azaustre

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":

// Vanilla JavaScript
var elem = document.getElementById("miElemento");

//jQuery
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.

Si te ha gustado ste artculo, te animo a compartirlo para que otros puedan leerlo :)