Ebook: Frameworks y herramientas para la web del futuro

Frameworks y herramientas para la

web del futuro

FRAMEWORKS Y LIBRERÍAS

Índice Frameworks y librerías.......................................................................................................

AngularJS........................................................................................................................

Polymer...........................................................................................................................

React..............................................................................................................................

ECMAScript6....................................................................................................................

Babel...............................................................................................................................

Browserify........................................................................................................................

Gulp/Grunt.......................................................................................................................

Webpack..........................................................................................................................

NPM................................................................................................................................

JSPM...............................................................................................................................

PostCSS...........................................................................................................................

Conclusión.......................................................................................................................

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

La web evoluciona a pasos agigantados. La tecnología más usada en este momento puede caerr en popularidad en poco tiempo en detrimento de una bra. nueva librería 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 librerías y herramientas van a desempeñar un en la web del futuro.

Frameworks y librerías Actualmente existen tres grandes proyectos que ocupan la mayoría de las aplicaciones web. Unos son frameworks completos como es el caso de AngularJS, y otros son librerías que resuelven problemas concretos, como React para el caso del renderizado de vistas y Polymer para la creación de Web components.

FRAMEWORKS Y LIBRERÍAS

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 mayoría de proyectos se basaban en el stack LAMP (Linux + Apache + MySQL + PHP). Con la llegada de Node.js, un entorno de ejecución 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 LIBRERÍAS

Angular tiene una curva de aprendizaje un tanto peculiar.

Si bien es sencillo de aprender al inicio, a medida que se requiere más complejidad en el desarrollo, su adaptación se hace más 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 librería ya desarrollada.

Cuando desarrollamos una aplicación con Angular, donde el framework se encargue de todo (controladores, rutas, vistas, etc), nos encontramos ante una aplicación SPA (Single Page Application), una aplicación de una sola página.

De esta forma la experiencia de usuario es muy buena, ya que se asemeja a una aplicación móvil, donde cambiamos de página o vista rápidamente, sin retardos y más fluida.

Angular posee un gran ecosistema. Es tanto que aprovechando las ventajas de una aplicación SAP, se han extendido al mundo mobile gracias a proyectos como Ionic.

Este proyecto permite que podamos desarrollar aplicaciones móviles utilizando AngularJS. se basa en directivas crea-

das y optimizadas para su representación en dispositivos móviles. Se le añade el proyecto Apache Cordova (Antiguo Phonegap) para convertir el desarrollo en una aplicación Android e iOS. Esto ha permitido el desarrollo de aplicaciones híbridas, muy útiles para probar nuestras aplicaciones en los dos sistemas operativos móviles más utilizados.

“AngularJS. se basa en directivas creadas y optimizadas para su representación en dispositivos móviles” Más información: https://angularjs.org/ http://ionicframework.com/ 03

FRAMEWORKS Y LIBRERÍAS

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 aplicación. 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 más 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 LIBRERÍAS

• Mobile First

Esto es ya esencial en cualquier aplicación o web. El tráfico de internet móvil ya supera al de escritorio. Si nuestra web no se ve bien en dispositivo móvil se pueden perder clientes, ventas, usuarios, etc.

• Offline First

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

• Notificaciones Push Los Service Workers, en el momento de la redacción de este ebook, no son soportados aún en todos los navegadores. Pero poco a poco se están implementando. Funcionan perfectamente en Google Chrome y en Android. Es de esperar que en

Esto hasta ahora era propio de una aplicación nativa. Era una excelente manera de conseguir retención 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. Más información: http://webcomponents.org/ https://www.polymer-project.org/1.0/ 05

FRAMEWORKS Y LIBRERÍAS

React

No hace mucho entró en escena una nueva librería llamada React y le está poniendo las cosas difíciles a Angular. React es una librería 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 más 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 librería que puede ser utilizada en conjunto con los anteriores.

componentes. En lugar de desarrollar una aplicación completa con el paradigma Modelo-Vista-Controlador, descompone la complejidad en pequeños 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 aplicación, se implementan componentes reutilizables dentro de la propia aplicación.

06

FRAMEWORKS Y LIBRERÍAS

React también tiene un aspecto muy bueno y es que puedes utilizar la última especificación del estándar ECMAScript, que es el que sigue el lenguaje JavaScript. Esto hace que la librería se adapte a las mejoras y novedades que trae el lenguaje.

No se quedan ahí las bondades de esta librería. React, al centrarse únicamente en la vista de una aplicación 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 librerías desarrolladas por terceros nos introduce en el concepto de aplicación Isomórfica. ¿Qué significa esto? Con una aplicación 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 través 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 página. Una aplicación Isomórfica permite reutilizar las vistas que usamos en el Frontend y servirlas desde el Backend. De esta manera tenemos las ventajas que aporta una aplicación SPA en cuanto a velocidad y experiencia de usuario y el SEO que una aplicación renderizada de servidor nos proporciona.

07

FRAMEWORKS Y LIBRERÍAS

Aprovechando que React es una librería para vistas, independiente del navegador, el equipo detrás de su desarrollo ha creado el proyecto React Native. Esta nueva librería permite que con código JavaScript y utilizando unos componentes ya

definidos por ellos mismos, podamos desarrollar una aplicación nativa para iOS y también para Android. Es un paso más allá que lo que nos proporciona Ionic. Ionic nos permite crear una aplicación híbrida, que es una aplicación web optimizada

pero embebida en un visor web de la app mobile. React Native por su parte, nos da una aplicación Nativa, como si desarrollásemos en Objective C, Swift o Java, pero empleando JavaScript como si programásemos para la web.

ECMAScript6 (ES6 o ES2015) Aunque lo coloquemos en esta sección, 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 estándares W3C y en concreto la organización ECMA. JavaScript

ha tenido varias versiones desde su creación hace 20 años. Su primera versión estable data de 1997. La versión 3 es de 1999, su revisión 3.1 llegó en 2008 y hasta hace muy poco, desde el 2011 teníamos la versión 5.1.

08

FRAMEWORKS Y LIBRERÍAS

La versión 6 fue aprobada en junio de 2015 y poco a poco los navegadores han ido implementando sus novedades, pero aunque aún no estén disponibles todas las mejoras, podemos utilizar su sintaxis desde hoy mismo por medio de traductores de código llamados transpilers.

La nueva versión bebe mucho de preprocesadores de JavaScript como CoffeeScript, con el uso de arrow functions que reducen la cantidad de código y mejoran la legibilidad del mismo.

ECMAScript6 hace de JavaScript un lenguaje muy completo, aportándole clases, módulos y funcio-

nes nativas que antes solo era posible implementar por medio de librerías de terceros, como las Promises, pedir datos vía AJAX, etc. Y algo muy importante son los módulos. De esta forma podemos separar el código de nuestras aplicaciones en pequeños ficheros, sin la necesidad de un framework o una librería externa.

Herramientas En el desarrollo software, la pata más importante son los lenguajes que empleamos, pero también son una parte clave las herramientas que utilizamos en el día a día, que nos ayudan a mejorar y optimizar nuestros desarrollos, permitiendo que nos enfoquemos en el código.

El campo de las herramientas JavaScript es muy amplio, tanto o más como el de los frameworks y librerías que disponemos para el Frontend web. En ocasiones puede resultar agobiante tantas tecnologías. 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 LIBRERÍAS

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 versión más actual del estándar de JavaScript (ES6 incluso algunas características de la futura ES7) y él se encarga de transformarlo a la versión que actualmente soportan todos los navegadores, la versión del estándar 5.1.

De esta forma puedes desde hoy mismo utilizar la versión del lenguaje que se utilizará muy pronto de forma nativa en los navegadores.

10

FRAMEWORKS Y LIBRERÍAS

Browserify debíamos enlazar todos los ficheros JavaScript en el HTML por medio de tags script, o utilizar librerías como RequireJS que e utilizan la sintaxis AMD para par crear los módulos.

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 queríamos modularizar en pequeños ficheros la lógica de programación del Frontend de nuestra webapp,

Browserify hace esto má más sencillo, ya que nos permite te programar con la sencillez que tiene Node.js, utilizando module.export para exportar los módulos que creamos y requiere para importarlos, sin mucha más complicación.

Javascript necesario y minificarlo. Con la llegada de ES6, parece que esta herramienta no tendría sentido, pero se sigue utilizando junto con el plugin Babelify, que permite unir todo el código 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 código 11

FRAMEWORKS Y LIBRERÍAS

Gulp/Grunt Si eres un desarrollador web profesional seguramente utilices preprocesadores de CSS como Sass, Less o Stylus, y también herramientas como Browserify, Babel para traducir tu código JavaScript. Tendrás un entorno de desarrollo y otro de producción donde tu código esté preparado y optimizado para su utilización.

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 concatenación de archivos JS y su minificado, optimización de imáge-

herramientas permite a los desarrolladores enfocarse de nuevo en su código 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”, consumiría 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 más rápida, más 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 LIBRERÍAS

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 construcción y preparación para producción (preprocesado, concatenado, minificación,

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 más comunes y necesarias.

NPM NPM son las siglas de Node Package Manager, es decir, Gestor de paquetes de Node.js. Aunque actualmente engloba módulos y librerías 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 estándar a la hora de iniciar un proyecto web, ya se trate de una aplicación Frontend, como de Backend con Node.js, así como para pequeños módulos que solucionen problemas concretos.

13

FRAMEWORKS Y LIBRERÍAS

Sirve como manifiesto donde incluimos las dependencias usadas en el proyecto con sus números de versión, descripción, etc, así como para ejecutar comandos a través 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 través de los scripts.

Paralelo a NPM tenemos a Bower, un gestor de dependencias para el navegador, donde podíamos descargar y emplear en nuestros proyectos librerías como jQuery, Angular, Backbone, etc. Pero con la aparición de proyectos como Browserify, que nos permiten importar módulos, o mejor aún 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 configuración 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 módulos y fichero.

14 1 4

FRAMEWORKS Y LIBRERÍAS

JSPM JSPM es el acrónimo de JavaScript Package Manager. Podede mos decir que es un NPM extenendido para el ecosistema JavaSaScript. Con NPM únicamente nte podemos instalar módulos y librerías que estén en el registro tro NPM. En cambio con JSPM podemos indicar varios sitios, NPM es uno de ellos, pero también podemos instalar desde GitHub o desde el propio registro de JSPM. Esto nos permite utilizar las últimas versiones de los proyectos que estén disponibles en Github sin importar si están o no

sin tener que importar otra.

en NPM, e incluso utilizarr mód módulos privados que no tienen porque estar en el registro de NPM.

Este sistema es interesante y dará que hablar en los próximos meses, ya que se integra perfectamente con NPM y no es necesario tener ficheros adicionales de configuración. Únicamente un sólo package.json

JSPM se basa también en el sistema de carga de módulos nativo de ECMAScript6, llamado SystemJS cuya sintaxis y forma de trabajar se parece a la librería RequireJS, pero de forma nativa 15

FRAMEWORKS Y LIBRERÍAS

PostCSS No podemos olvidarnos de PostCSS. El ecosistema de desarrollo web no es sólo JavaScript, el CSS tiene un papel también muy importante.

más adelante editar. Pueden generar código que necesariamente no queramos por mucho que hayamos optimizado el código en la sintaxis del preprocesador.

Hasta ahora en lugar de utilizar CSS plano, hemos empleado preprocesadores como Less, Sass o Stylus, que nos permitían usar variables, funciones, etc. Con ello tratábamos a CSS como un lenguaje de programación 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-

cificación de JavaScript avanza y podemos usar herramientas como Babel para usarlo en este momento, con CSS pasa algo parecido. Se están desarrollando nuevas especificaciones para por ejemplo usar variables en CSS. Hoy en día los navegadores aún no lo soportan, pero con CSSNext como plugin de PostCSS podemos escribir nuestro código de estilo CSS con la sintaxis futura a la vez que lo podemos ver corriendo en los navegadores actuales.

16

FRAMEWORKS Y LIBRERÍAS

Conclusión

El futuro de la web está más vivo que nunca. Las tecnologías que estamos usando en este momento es posible que nos parezcan obsoletas dentro de un año, sin ir más lejos.

Sin duda es un momento muy importante y conviene estar al

tanto de las novedades que van apareciendo para conocerlas y saber cuál es la más adecuada según el problema que tratemos de resolver.

La clave es tener la mente abierta y tener en cuenta que las aplicaciones web cada vez son

más grandes. Y es importante modularizarlas en pequeños componentes con su propia lógica y que puedan componer otros más grandes para así, trozo a trozo, implementar el desarrollo completo, de una manera más escalable y mantenible.

17

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

Regístrate

para estar al día de las últimas tendencias

Comparte este ebook

www.bbvaopen4u.com

conversa con nosotros en: