Frameworks y

herramientas para la
web del futuro
 FRAMEWORKS Y LIBRERAS

ndice
Frameworks y libreras....................................................................................................... 01
AngularJS........................................................................................................................ 02
Polymer........................................................................................................................... 04
React.............................................................................................................................. 06
ECMAScript6.................................................................................................................... 08
Babel............................................................................................................................... 10
Browserify........................................................................................................................ 11
Gulp/Grunt....................................................................................................................... 12
Webpack.......................................................................................................................... 13
NPM................................................................................................................................ 13
JSPM............................................................................................................................... 15
PostCSS........................................................................................................................... 16
Conclusin....................................................................................................................... 17
 01
La web evoluciona a pasos agigantados. La tecnolo-
ga 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.

Recuerdas Knockout.js, MooTools, Backbone?ne?

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.

rama actual
En este ebook te vamos a presentar el panorama
sarrollo y qu
del ecosistema web, las tendencias de desarrollo
n importante
libreras y herramientas van a desempear un e papel
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 concre-
tos, como React para el caso del renderizado de vistas y Polymer para la creacin de Web components.

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 desa-
rrollado 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 Backbo-
neJS, hasta el momento la refe-
rencia en desarrollo de aplicacio-
nes 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 basa-
ban en el stack LAMP (Linux +
Apache + MySQL + PHP). Con la
llegada de Node.js, un entorno
de ejecucin que permite utilizar
FRAMEWORKS Y LIBRERAS
el lenguaje JavaScript en el Bac-
kend 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

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 posi-
ble adaptar casi cualquier pro-
blema de desarrollo con una
librera ya desarrollada.
Cuando desarrollamos una apli-
cacin con Angular, donde el
framework se encargue de
todo (controladores, rutas,
vistas, etc), nos encontramos
ante una aplicacin SPA (Sin-
gle 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 ecosis-
tema. Es tanto que aprove-
chando las ventajas de una
aplicacin SAP, se han exten-
dido al mundo mobile gra-
cias a proyectos como Ionic.
Este proyecto permite que
podamos desarrollar aplicacio-
nes mviles utilizando Angular-
JS. se basa en directivas crea-
FRAMEWORKS Y LIBRERAS
das y optimizadas para su
representacin en dispositivos
mviles. Se le aade el proyec-
to Apache Cordova (Antiguo
Phonegap) para convertir el
desarrollo en una aplicacin
Android e iOS. Esto ha permiti-
do 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 opti-
mizadas para su repre-
sentacin en dispositivos
mviles
Ms informacin:
https://angularjs.org/
http://ionicframework.com/
03

Polymer
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 desa-
rrollarse como proyectos open
source y as cualquier desarrolla-
dor puede implementarlos en
sus proyectos.
Pero Polymer ha crecido mucho.
No se trata solo de etiquetas
HTML para insertar componen-
tes en nuestra aplicacin. Poly-
mer ha dividido sus compo-
nentes en varios tipos que po-
demos ver en su web:
https://elements.polymer-pro-
ject.org/
Se dividen en elementos del core
de Polymer, componentes basa-
FRAMEWORKS Y LIBRERAS
dos en Material Design, etiquetas
para encapsular componentes de
Google, animaciones, entre otros.
Unos de los ms interesantes son
los elementos Platinum, que
permiten utilizar servicios HTML
muy tiles como las funcionalida-
des 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

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

Mobile First mvil ya supera al de escritorio. Si nuestra web no se ve bien en dispositi-
vo mvil se pueden perder clientes, ventas, usuarios, etc.

Gracias a nuevas tecnologas como los Service Workers, podemos conse-

guir que una aplicacin web pueda mostrar contenido offline. Cuando

Offline First usamos una app nativa, aunque no tengamos en ese momento cone-
xin a internet, siempre podemos acceder a recursos dentro de la aplica-
cin. Esto se puede conseguir con Service Workers y es el primer paso
para una aplicacin progresiva.

Esto hasta ahora era propio de una aplicacin

nativa. Era una excelente manera de conseguir
Notificaciones Push retencin de usuarios en las aplicaciones. Y al igual
que el uso offline, con Service Workers de HTML5
podemos conseguirlo.

Los Service Workers, en el momento de la redac- el resto de navegadores se vayan implementando

cin 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
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 libre- gram para el renderizado de vistas. No es un
ra llamada React y le est poniendo las cosas framework como puede ser Angular o Backbone.
difciles a Angular. React es una librera creada por Se trata de una librera que puede ser utilizada en
Facebook y utilizada en su red social y en Insta- conjunto con los anteriores.

React es tan popular por su
facilidad de desarrollo. Su
curva de aprendizaje es algo
ms sencilla de seguir que An-
gular y su uso es muy sencillo.
React basa su desarrollo en
componentes. En lugar de desa-
rrollar una aplicacin completa
con el paradigma Modelo-Vis-
ta-Controlador, descompone la
complejidad en pequeos
componentes con sus funcio-
nalidades. 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 reu-
tilizables dentro de la propia apli-
cacin.

06

React tambin tiene un aspecto
muy bueno y es que puedes uti-
lizar la ltima especificacin
del estndar ECMAScript, que
es el que sigue el lenguaje JavaS-
cript. Esto hace que la librera se
adapte a las mejoras y noveda-
des que trae el lenguaje.
No se quedan ah las bondades
de esta librera. React, al centrar-
se nicamente en la vista de una
aplicacin web, puede ser utili-
zada 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 Isomrfi-
ca.
Qu significa esto? Con una apli-
cacin SPA aprovechamos las
ventajas que nos proporciona en
cuanto a rapidez y experiencia
de usuario, pero tenemos un pro-
blema. El contenido de una
SPA es inyectado con JavaS-
FRAMEWORKS Y LIBRERAS
cript a travs de lo que un servi-
dor 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 Isomrfi-
ca permite reutilizar las vistas
que usamos en el Frontend y ser-
virlas 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 apli-
cacin renderizada de servidor
nos proporciona.
07
 FRAMEWORKS Y LIBRERAS

Aprovechando que React es una
librera para vistas, independien-
te del navegador, el equipo
detrs de su desarrollo ha
creado el proyecto React
Native. Esta nueva librera permi-
te que con cdigo JavaScript y
utilizando unos componentes ya
definidos por ellos mismos,
podamos desarrollar una aplica-
cin 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 aplica-
cin Nativa, como si desarrollse-
mos en Objective C, Swift o Java,
pero empleando JavaScript
como si programsemos para la
web.

ECMAScript6 (ES6 o ES2015)

Aunque lo coloquemos en ha tenido varias versiones
esta seccin, ECMAScript6 desde su creacin hace 20
no es un framework, pero aos. Su primera versin
tiene y va a tener un papel estable data de 1997. La
muy importante en la web. versin 3 es de 1999, su
El lenguaje JavaScript se revisin 3.1 lleg en 2008
basa en los estndares y hasta hace muy poco,
W3C y en concreto la orga- desde el 2011 tenamos la
nizacin ECMA. JavaScript versin 5.1.

08
 FRAMEWORKS Y LIBRERAS

La versin 6 fue aprobada en junio
de 2015 y poco a poco los nave-
gadores han ido implementando
sus novedades, pero aunque an
no estn disponibles todas las me-
joras, 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, apor-
tndole clases, mdulos y funcio-
nes nativas que antes solo era posi-
ble implementar por medio de
libreras de terceros, como las Pro-
mises, pedir datos va AJAX, etc. Y
algo muy importante son los m-
dulos. De esta forma podemos
separar el cdigo de nuestras apli-
caciones 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 nues-
tros 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 libre-
ras que disponemos para el Frontend web. En ocasio-
nes 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

Babel
Babel es un transpilador de
ECMAScript 6 a ECMAScript 5.
Qu es un transpilador? Es una
herramienta que te permite escri-
bir 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 caractersti-
cas de la futura ES7) y l se
encarga de transformarlo a la
versin que actualmente sopor-
tan todos los navegadores, la
versin del estndar 5.1.
FRAMEWORKS Y LIBRERAS
De esta forma puedes desde hoy
mismo utilizar la versin del len-
guaje que se utilizar muy
pronto de forma nativa en los
navegadores.
10

Browserify
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 fiche-
ros la lgica de programacin del
Frontend de nuestra webapp,
FRAMEWORKS Y LIBRERAS
debamos enlazar todos los Javascript necesario y minifi-
ficheros JavaScript en el HTML carlo. Con la llegada de ES6,
por medio de tags script, o utili- parece que esta herramienta no
zar libreras como RequireJS quee tendra sentido, pero se sigue
utilizan la sintaxis AMD para
par utilizando junto con el plugin
crear los mdulos. Babelify, que permite unir todo el
cdigo ECMAScript 6 que tenga-
Browserify hace esto m
ms senci- mos y traducirlo a la sintaxis 5.1
llo, ya que nos permite
te progra- que actualmente entienden
mar con la sencillez que tiene todos los navegadores.
Node.js, utilizando module.ex-
port para exportar los mdulos
que creamos y requiere para
importarlos, sin mucha ms
complicacin.
Esta herramienta se encarga de
concatenar todo el cdigo
11

Gulp/Grunt
Si eres un desarrollador web profe-
sional seguramente utilices prepro-
cesadores de CSS como Sass, Less
o Stylus, y tambin herramientas
como Browserify, Babel para tradu-
cir 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 automati-
zadores de tareas. Se trata de un
fichero donde definiendo unas
tareas concretas, como pueden
ser el precompilado de CSS, la con-
catenacin de archivos JS y su
minificado, optimizacin de imge-
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 plu-
gins open source desarrollados por
terceros, podemos llevar a cabo
todas esas funciones que de ser
realizadas manualmente, consu- puedes encontrar igualmente para
mira mucho tiempo. Este tipo de Gulp.
FRAMEWORKS Y LIBRERAS
herramientas permite a los desa-
rrolladores enfocarse de nuevo en
su cdigo y ahorrar tiempo.
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 automatizado-
res de tareas por su sencillez y
porque todos los plugins que hay
desarrollados para Grunt los
12
 FRAMEWORKS Y LIBRERAS

Webpack
Con el uso de React se hizo muy
popular esta herramienta, que se
trata de un module bundler. Diga-
mos que sustituye a Grunt/Gulp
en las tareas de construccin y pre-
paracin para produccin (prepro-
cesado, concatenado, minificacin,
etc).
Al igual que los anteriores gestores
de tareas, Wepack posee una gran
comunidad y ya existen numero-
sos plugins que te permiten realizar
las tareas ms comunes y necesa-
rias.

NPM
NPM son las siglas de Node Pac-
kage 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 plu-
gins 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 solu-
cionen problemas concretos.
13

Sirve como manifiesto donde
incluimos las dependencias
usadas en el proyecto con sus
nmeros de versin, descrip-
cin, etc, as como para ejecutar
comandos a travs del objeto
script. Esto permite en ocasio-
nes que podamos ejecutar co-
mandos de desarrollo sin nece-
sidad 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 dependen-
cias para el navegador, donde
podamos descargar y em-
plear en nuestros proyectos
libreras como jQuery, Angular,
Backbone, etc. Pero con la apari-
cin de proyectos como Browse-
rify, que nos permiten importar
mdulos, o mejor an con EC-
MAScript 6 que ya los implemen-
ta de forma nativa, podemos
utilizar NPM. De hecho gran
FRAMEWORKS Y LIBRERAS
parte de los proyectos, si no
todos, se han movido de Bower
a NPM, por lo que ya no es nece-
sario tener dos ficheros de confi-
guracin y dependencias (packa-
ge.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 fiche-
ro.
14
1 4

JSPM
JSPM es el acrnimo de JavaS-
cript Package Manager. Pode- de
mos decir que es un NPM exten- en-
dido para el ecosistema JavaS- aS-
cript. 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 tam-
bin podemos instalar desde
GitHub o desde el propio registro
de JSPM.
Esto nos permite utilizar las lti-
mas versiones de los proyec-
tos que estn disponibles en
Github sin importar si estn o no
FRAMEWORKS Y LIBRERAS
sin tener que importar otra.
Este sistema es interesante y
dar que hablar en los prximos
meses, ya que se integra perfec-
tamente con NPM y no es nece-
en NPM, e incluso utilizarr md
mdu- sario tener ficheros adicionales
los privados que no tienen de configuracin. nicamente
porque estar en el registro de un slo package.json
NPM.
JSPM se basa tambin en el siste-
ma de carga de mdulos nativo
de ECMAScript6, llamado Sys-
temJS cuya sintaxis y forma de
trabajar se parece a la librera
RequireJS, pero de forma nativa
15

PostCSS
No podemos olvidarnos de
PostCSS. El ecosistema de desa-
rrollo web no es slo JavaScript, el
CSS tiene un papel tambin muy
importante.
Hasta ahora en lugar de utilizar
CSS plano, hemos empleado pre-
procesadores como Less, Sass o
Stylus, que nos permitan usar
variables, funciones, etc. Con ello
tratbamos a CSS como un len-
guaje de programacin y nos
ayudaba a ser giles en nuestros
proyectos.
Uno de los problemas que tienen
los preprocesadores es que gene-
ran un CSS que no podemos
ms adelante editar. Pueden
generar cdigo que necesariamen-
te no queramos por mucho que
hayamos optimizado el cdigo en
la sintaxis del preprocesador.
Con PostCSS podemos escribir
CSS plano, controlando en cada
momento lo que queremos escri-
bir. Y con esta herramienta (que
corre bajo Node.js) se puede modi-
ficar el resultado final por medio de
plugins, como el autoprefijador,
para no preocuparnos de escribir
todos los prefijos para cada nave-
gador concreto.
A PostCSS se le une CSSNext.
Esto que es? Al igual que la espe-
FRAMEWORKS Y LIBRERAS
cificacin de JavaScript avanza y
podemos usar herramientas como
Babel para usarlo en este momen-
to, con CSS pasa algo parecido. Se
estn desarrollando nuevas especi-
ficaciones 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 nues-
tro cdigo de estilo CSS con la
sintaxis futura a la vez que lo pode-
mos ver corriendo en los navega-
dores actuales.
16

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
Conclusin
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 abier-
ta y tener en cuenta que las apli-
caciones web cada vez son
FRAMEWORKS Y LIBRERAS
ms grandes. Y es importante
modularizarlas en pequeos com-
ponentes con su propia lgica y
que puedan componer otros ms
grandes para as, trozo a trozo,
implementar el desarrollo comple-
to, 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: