Frameworks y

herramientas para la

web del futuro

FRAMEWORKS Y LIBRERAS

ndice
Frameworks y libreras.......................................................................................................
AngularJS........................................................................................................................
Polymer...........................................................................................................................
React..............................................................................................................................
ECMAScript6....................................................................................................................
Babel...............................................................................................................................
Browserify........................................................................................................................
Gulp/Grunt.......................................................................................................................
Webpack..........................................................................................................................
NPM................................................................................................................................
JSPM...............................................................................................................................
PostCSS...........................................................................................................................
Conclusin.......................................................................................................................

01
02
04
06
08
10
11
12
13
13
15
16
17

La web evoluciona a pasos agigantados. La tecnologa ms usada en este momento puede caerr en
popularidad en poco tiempo en detrimento de una
bra.
nueva librera o framework que le haga sombra.
ne?
Recuerdas Knockout.js, MooTools, Backbone?
ndustria
Alguna de ellas se siguen empleando en la industria
pero su popularidad est por los suelos con laa llegada
de Angular, Polymer o React.

01

rama actual
En este ebook te vamos a presentar el panorama
sarrollo y qu

del ecosistema web, las tendencias de desarrollo

n importante
e papel
libreras y herramientas van a desempear un
en la web del futuro.

Frameworks y libreras
Actualmente existen tres grandes proyectos que ocupan la mayora de las aplicaciones web. Unos son
frameworks completos como es el caso de AngularJS, y otros son libreras que resuelven problemas concretos, como React para el caso del renderizado de vistas y Polymer para la creacin de Web components.

FRAMEWORKS Y LIBRERAS

AngularJS

Angular es un framework del tipo

MVVM (Model-View View-Model)
o MVW (Model-View-Whatever)
de JavaScript para el Frontend
de aplicaciones web. Est desarrollado y mantenido por Google
y tiene una gran comunidad. Su
nacimiento fue en 2009, pero su
popularidad lleg entre el 2013
y 2014, desbancando del trono
de los frameworks web a BackboneJS, hasta el momento la refe-

rencia en desarrollo de aplicaciones web.

Su popularidad ha hecho que
forme parte de un nuevo stack
para el desarrollo de software
para la web. Hasta el momento,
la mayora de proyectos se basaban en el stack LAMP (Linux +
Apache + MySQL + PHP). Con la
llegada de Node.js, un entorno
de ejecucin que permite utilizar

el lenguaje JavaScript en el Backend de las aplicaciones web, se

form el stack MEAN ( MongoDB
+ Express + AngularJS + NodeJS ).
De esta forma se utilizaba el
mismo lenguaje, JavaScript, para
todo el desarrollo web, tanto
Frontend como Backend.

02

FRAMEWORKS Y LIBRERAS

Angular tiene una curva de

aprendizaje un tanto peculiar.
Si bien es sencillo de aprender
al inicio, a medida que se
requiere ms complejidad en el
desarrollo, su adaptacin se
hace ms laboriosa. Por
suerte, gracias a sus directivas
y al desarrollo open source de
proyectos de terceros, es posible adaptar casi cualquier problema de desarrollo con una
librera ya desarrollada.
Cuando desarrollamos una aplicacin con Angular, donde el
framework se encargue de
todo (controladores, rutas,
vistas, etc), nos encontramos
ante una aplicacin SPA (Single Page Application), una
aplicacin de una sola pgina.

De esta forma la experiencia de

usuario es muy buena, ya que
se asemeja a una aplicacin
mvil, donde cambiamos de
pgina o vista rpidamente, sin
retardos y ms fluida.

Angular posee un gran ecosistema. Es tanto que aprovechando las ventajas de una
aplicacin SAP, se han extendido al mundo mobile gracias a proyectos como Ionic.
Este proyecto permite que
podamos desarrollar aplicaciones mviles utilizando AngularJS. se basa en directivas crea-

das y optimizadas para su

representacin en dispositivos
mviles. Se le aade el proyecto Apache Cordova (Antiguo
Phonegap) para convertir el
desarrollo en una aplicacin
Android e iOS. Esto ha permitido el desarrollo de aplicaciones
hbridas, muy tiles para
probar nuestras aplicaciones
en los dos sistemas operativos
mviles ms utilizados.

AngularJS. se basa en
directivas creadas y optimizadas para su representacin en dispositivos
mviles
Ms informacin:
https://angularjs.org/
http://ionicframework.com/
03

FRAMEWORKS Y LIBRERAS

Polymer
dos en Material Design, etiquetas
para encapsular componentes de
Google, animaciones, entre otros.
Esto permite crear componentes
reutilizables que exportan APIs
de terceros, como pueden ser
integrar un video de YouTube de
manera sencilla, un mapa de
Google Maps, una pasarela de
pago con PayPal o Stripe, etc. Al
ser reutilizables, pueden desarrollarse como proyectos open
source y as cualquier desarrollador puede implementarlos en
sus proyectos.

Pero Polymer ha crecido mucho.

No se trata solo de etiquetas
HTML para insertar componentes en nuestra aplicacin. Polymer ha dividido sus componentes en varios tipos que podemos ver en su web:
https://elements.polymer-project.org/
Se dividen en elementos del core
de Polymer, componentes basa-

Unos de los ms interesantes son

los elementos Platinum, que
permiten utilizar servicios HTML
muy tiles como las funcionalidades Offline, Notificaciones Push,
etc.
Esto es destacable porque nos
introduce en el nuevo paradigma
de las Progressive Apps. Estas
apps tienen varios puntos.
04

FRAMEWORKS Y LIBRERAS

Mobile First

Esto es ya esencial en cualquier aplicacin o web. El trfico de internet

mvil ya supera al de escritorio. Si nuestra web no se ve bien en dispositivo mvil se pueden perder clientes, ventas, usuarios, etc.

Offline First

Gracias a nuevas tecnologas como los Service Workers, podemos conseguir que una aplicacin web pueda mostrar contenido offline. Cuando
usamos una app nativa, aunque no tengamos en ese momento conexin a internet, siempre podemos acceder a recursos dentro de la aplicacin. Esto se puede conseguir con Service Workers y es el primer paso
para una aplicacin progresiva.

Notificaciones Push
Los Service Workers, en el momento de la redaccin de este ebook, no son soportados an en
todos los navegadores. Pero poco a poco se estn
implementando. Funcionan perfectamente en
Google Chrome y en Android. Es de esperar que en

Esto hasta ahora era propio de una aplicacin

nativa. Era una excelente manera de conseguir
retencin de usuarios en las aplicaciones. Y al igual
que el uso offline, con Service Workers de HTML5
podemos conseguirlo.
el resto de navegadores se vayan implementando
con el paso del tiempo. Ms informacin:
http://webcomponents.org/
https://www.polymer-project.org/1.0/
05

FRAMEWORKS Y LIBRERAS

React

No hace mucho entr en escena una nueva librera llamada React y le est poniendo las cosas
difciles a Angular. React es una librera creada por
Facebook y utilizada en su red social y en InstaReact es tan popular por su
facilidad de desarrollo. Su
curva de aprendizaje es algo
ms sencilla de seguir que Angular y su uso es muy sencillo.
React basa su desarrollo en

gram para el renderizado de vistas. No es un

framework como puede ser Angular o Backbone.
Se trata de una librera que puede ser utilizada en
conjunto con los anteriores.

componentes. En lugar de desarrollar una aplicacin completa

con el paradigma Modelo-Vista-Controlador, descompone la
complejidad en pequeos
componentes con sus funcionalidades. Algo parecido a lo

que hace Polymer pero en lugar

de utilizar web components y
crear componentes reusables
hacia fuera de la aplicacin, se
implementan componentes reutilizables dentro de la propia aplicacin.
06

FRAMEWORKS Y LIBRERAS

React tambin tiene un aspecto

muy bueno y es que puedes utilizar la ltima especificacin
del estndar ECMAScript, que
es el que sigue el lenguaje JavaScript. Esto hace que la librera se
adapte a las mejoras y novedades que trae el lenguaje.
No se quedan ah las bondades
de esta librera. React, al centrarse nicamente en la vista de una
aplicacin web, puede ser utilizada en el Backend con Node.js. Esto ha abierto un nuevo
paradigma en el

desarrollo de aplicaciones web.

Si bien Angular nos trajo el stack
MEAN, React, Node.js y con
ayuda de libreras desarrolladas
por terceros nos introduce en el
concepto de aplicacin Isomrfica.
Qu significa esto? Con una aplicacin SPA aprovechamos las
ventajas que nos proporciona en
cuanto a rapidez y experiencia
de usuario, pero tenemos un problema. El contenido de una
SPA es inyectado con JavaS-

cript a travs de lo que un servidor o un API nos proporcione.

Por lo tanto el contenido no es
renderizado desde el servidor y
esto afecta al SEO de nuestra
pgina. Una aplicacin Isomrfica permite reutilizar las vistas
que usamos en el Frontend y servirlas desde el Backend. De esta
manera tenemos las ventajas
que aporta una aplicacin SPA en
cuanto a velocidad y experiencia
de usuario y el SEO que una aplicacin renderizada de servidor
nos proporciona.

07

FRAMEWORKS Y LIBRERAS

Aprovechando que React es una

librera para vistas, independiente del navegador, el equipo
detrs de su desarrollo ha
creado el proyecto React
Native. Esta nueva librera permite que con cdigo JavaScript y
utilizando unos componentes ya

definidos por ellos mismos,

podamos desarrollar una aplicacin nativa para iOS y tambin
para Android. Es un paso ms
all que lo que nos proporciona
Ionic. Ionic nos permite crear
una aplicacin hbrida, que es
una aplicacin web optimizada

pero embebida en un visor web

de la app mobile. React Native
por su parte, nos da una aplicacin Nativa, como si desarrollsemos en Objective C, Swift o Java,
pero
empleando
JavaScript
como si programsemos para la
web.

ECMAScript6 (ES6 o ES2015)

Aunque lo coloquemos en
esta seccin, ECMAScript6
no es un framework, pero
tiene y va a tener un papel
muy importante en la web.
El lenguaje JavaScript se
basa en los estndares
W3C y en concreto la organizacin ECMA. JavaScript

ha tenido varias versiones

desde su creacin hace 20
aos. Su primera versin
estable data de 1997. La
versin 3 es de 1999, su
revisin 3.1 lleg en 2008
y hasta hace muy poco,
desde el 2011 tenamos la
versin 5.1.
08

FRAMEWORKS Y LIBRERAS

La versin 6 fue aprobada en junio

de 2015 y poco a poco los navegadores han ido implementando
sus novedades, pero aunque an
no estn disponibles todas las mejoras, podemos utilizar su sintaxis
desde hoy mismo por medio de
traductores de cdigo llamados
transpilers.

La nueva versin bebe mucho de

preprocesadores de JavaScript
como CoffeeScript, con el uso de
arrow functions que reducen la
cantidad de cdigo y mejoran la
legibilidad del mismo.
ECMAScript6 hace de JavaScript
un lenguaje muy completo, aportndole clases, mdulos y funcio-

nes nativas que antes solo era posible implementar por medio de
libreras de terceros, como las Promises, pedir datos va AJAX, etc. Y
algo muy importante son los mdulos. De esta forma podemos
separar el cdigo de nuestras aplicaciones en pequeos ficheros, sin
la necesidad de un framework o
una librera externa.

Herramientas
En el desarrollo software, la pata ms importante son
los lenguajes que empleamos, pero tambin son
una parte clave las herramientas que utilizamos en el
da a da, que nos ayudan a mejorar y optimizar nuestros desarrollos, permitiendo que nos enfoquemos en
el cdigo.

El campo de las herramientas JavaScript es muy

amplio, tanto o ms como el de los frameworks y libreras que disponemos para el Frontend web. En ocasiones puede resultar agobiante tantas tecnologas. El
motivo de este ebook es mostrarte todo lo que hay
disponible para que las conozcas e implementes las
que mejor se adapten a tus gustos y necesidades.
09

FRAMEWORKS Y LIBRERAS

Babel

Babel es un transpilador de
ECMAScript 6 a ECMAScript 5.
Qu es un transpilador? Es una
herramienta que te permite escribir en un lenguaje y que l lo
transforme a otro. Babel, antes
conocido como 6to5, te permite
que desarrolles tus aplicaciones

web empleando la versin ms

actual del estndar de JavaScript
(ES6 incluso algunas caractersticas de la futura ES7) y l se
encarga de transformarlo a la
versin que actualmente soportan todos los navegadores, la
versin del estndar 5.1.

De esta forma puedes desde hoy

mismo utilizar la versin del lenguaje que se utilizar muy
pronto de forma nativa en los
navegadores.

10

FRAMEWORKS Y LIBRERAS

Browserify
debamos enlazar todos los
ficheros JavaScript en el HTML
por medio de tags script, o utilizar libreras como RequireJS que
e
utilizan la sintaxis AMD para
par
crear los mdulos.
Browserify es una herramienta
que permite que utilicemos la
sintaxis CommonJS, utilizada
en Node.js, en el Frontend de
nuestras aplicaciones web.
Hasta el momento, si queramos
modularizar en pequeos ficheros la lgica de programacin del
Frontend de nuestra webapp,

Browserify hace esto m

ms sencillo, ya que nos permite
te programar con la sencillez que tiene
Node.js, utilizando module.export para exportar los mdulos
que creamos y requiere para
importarlos, sin mucha ms
complicacin.

Javascript necesario y minificarlo. Con la llegada de ES6,

parece que esta herramienta no
tendra sentido, pero se sigue
utilizando junto con el plugin
Babelify, que permite unir todo el
cdigo ECMAScript 6 que tengamos y traducirlo a la sintaxis 5.1
que actualmente entienden
todos los navegadores.

Esta herramienta se encarga de

concatenar todo el cdigo
11

FRAMEWORKS Y LIBRERAS

Gulp/Grunt
Si eres un desarrollador web profesional seguramente utilices preprocesadores de CSS como Sass, Less
o Stylus, y tambin herramientas
como Browserify, Babel para traducir tu cdigo JavaScript. Tendrs
un entorno de desarrollo y otro
de produccin donde tu cdigo
est preparado y optimizado para
su utilizacin.
Para tener todo esto en orden
surgen los gestores y automatizadores de tareas. Se trata de un
fichero donde definiendo unas
tareas concretas, como pueden
ser el precompilado de CSS, la concatenacin de archivos JS y su
minificado, optimizacin de imge-

herramientas permite a los desarrolladores enfocarse de nuevo en

su cdigo y ahorrar tiempo.

nes, etc. su motor se encarga de

realizarlas.
El primero en surgir, en el mundo
Frontend, fue Grunt. Definiendo un
Gruntfile, con tareas configuradas
en formato JSON y utilizando plugins open source desarrollados por
terceros, podemos llevar a cabo
todas esas funciones que de ser
realizadas manualmente, consumira mucho tiempo. Este tipo de

Grunt fue muy popular y utilizado

en su momento, pero surgi un
competidor. Gulp hace lo mismo
que Grunt pero de una forma
ms rpida, ms legible y sus
tareas pueden definirse utilizando
JavaScript en lugar de JSON.
Gulp ha desbancado a Grunt del
trono de gestores y automatizadores de tareas por su sencillez y
porque todos los plugins que hay
desarrollados para Grunt los
puedes encontrar igualmente para
Gulp.
12

FRAMEWORKS Y LIBRERAS

Webpack
Con el uso de React se hizo muy
popular esta herramienta, que se
trata de un module bundler. Digamos que sustituye a Grunt/Gulp
en las tareas de construccin y preparacin para produccin (preprocesado, concatenado, minificacin,

etc).
Al igual que los anteriores gestores
de tareas, Wepack posee una gran
comunidad y ya existen numerosos plugins que te permiten realizar
las tareas ms comunes y necesarias.

NPM
NPM son las siglas de Node Package Manager, es decir, Gestor
de paquetes de Node.js. Aunque
actualmente engloba mdulos y
libreras tanto para Node.js como
para el navegador, as como plugins para los gestores de tareas:
Grunt, Gulp, Webpack y herra-

mientas como babel, postcss, etc.

NPM se ha convertido en un
estndar a la hora de iniciar un
proyecto web, ya se trate de una
aplicacin Frontend, como de
Backend con Node.js, as como
para pequeos mdulos que solucionen problemas concretos.
13

FRAMEWORKS Y LIBRERAS

Sirve como manifiesto donde

incluimos las dependencias
usadas en el proyecto con sus
nmeros de versin, descripcin, etc, as como para ejecutar
comandos a travs del objeto
script. Esto permite en ocasiones que podamos ejecutar comandos de desarrollo sin necesidad de utilizar gestores como
Gulp, o directamente llamar a
estos gestores a travs de los
scripts.

Paralelo a NPM tenemos a

Bower, un gestor de dependencias para el navegador, donde
podamos descargar y emplear en nuestros proyectos
libreras como jQuery, Angular,
Backbone, etc. Pero con la aparicin de proyectos como Browserify, que nos permiten importar
mdulos, o mejor an con ECMAScript 6 que ya los implementa de forma nativa, podemos
utilizar NPM. De hecho gran

parte de los proyectos, si no

todos, se han movido de Bower
a NPM, por lo que ya no es necesario tener dos ficheros de configuracin y dependencias (package.json para el caso de NPM y
bower.json para el caso de
Bower), con NPM podemos
tenerlo todo agrupado en un
nico gestor de mdulos y fichero.

14
1
4

FRAMEWORKS Y LIBRERAS

JSPM
JSPM es el acrnimo de JavaScript Package Manager. Podede
mos decir que es un NPM extenendido para el ecosistema JavaSaScript. Con NPM nicamente
nte
podemos instalar mdulos y
libreras que estn en el registro
tro
NPM. En cambio con JSPM
podemos indicar varios sitios,
NPM es uno de ellos, pero tambin podemos instalar desde
GitHub o desde el propio registro
de JSPM.
Esto nos permite utilizar las ltimas versiones de los proyectos que estn disponibles en
Github sin importar si estn o no

sin tener que importar otra.

en NPM, e incluso utilizarr md

mdulos privados que no tienen
porque estar en el registro de
NPM.

Este sistema es interesante y

dar que hablar en los prximos
meses, ya que se integra perfectamente con NPM y no es necesario tener ficheros adicionales
de configuracin. nicamente
un slo package.json

JSPM se basa tambin en el sistema de carga de mdulos nativo

de ECMAScript6, llamado SystemJS cuya sintaxis y forma de
trabajar se parece a la librera
RequireJS, pero de forma nativa
15

FRAMEWORKS Y LIBRERAS

PostCSS
No podemos olvidarnos de
PostCSS. El ecosistema de desarrollo web no es slo JavaScript, el
CSS tiene un papel tambin muy
importante.

ms adelante editar. Pueden

generar cdigo que necesariamente no queramos por mucho que
hayamos optimizado el cdigo en
la sintaxis del preprocesador.

Hasta ahora en lugar de utilizar

CSS plano, hemos empleado preprocesadores como Less, Sass o
Stylus, que nos permitan usar
variables, funciones, etc. Con ello
tratbamos a CSS como un lenguaje de programacin y nos
ayudaba a ser giles en nuestros
proyectos.

Con PostCSS podemos escribir

CSS plano, controlando en cada
momento lo que queremos escribir. Y con esta herramienta (que
corre bajo Node.js) se puede modificar el resultado final por medio de
plugins, como el autoprefijador,
para no preocuparnos de escribir
todos los prefijos para cada navegador concreto.

Uno de los problemas que tienen

los preprocesadores es que generan un CSS que no podemos

A PostCSS se le une CSSNext.

Esto que es? Al igual que la espe-

cificacin de JavaScript avanza y

podemos usar herramientas como
Babel para usarlo en este momento, con CSS pasa algo parecido. Se
estn desarrollando nuevas especificaciones para por ejemplo usar
variables en CSS. Hoy en da los
navegadores an no lo soportan,
pero con CSSNext como plugin de
PostCSS podemos escribir nuestro cdigo de estilo CSS con la
sintaxis futura a la vez que lo podemos ver corriendo en los navegadores actuales.
16

FRAMEWORKS Y LIBRERAS

Conclusin

El futuro de la web est ms

vivo que nunca. Las tecnologas
que estamos usando en este
momento es posible que nos
parezcan obsoletas dentro de un
ao, sin ir ms lejos.
Sin duda es un momento muy
importante y conviene estar al

tanto de las novedades que van

apareciendo para conocerlas y
saber cul es la ms adecuada
segn el problema que tratemos
de resolver.
La clave es tener la mente abierta y tener en cuenta que las aplicaciones web cada vez son

ms grandes. Y es importante
modularizarlas en pequeos componentes con su propia lgica y
que puedan componer otros ms
grandes para as, trozo a trozo,
implementar el desarrollo completo, de una manera ms escalable
y mantenible.
17

BBVA no se hace responsable de las opiniones publicadas en este documento.

Regstrate

para estar al da
de las ltimas
tendencias

Comparte
este ebook

www.bbvaopen4u.com

conversa con nosotros en: