Tecnologías Web 105

La web moderna.

En este penúltimo post veremos como empiezan a aparecer librerías y frameworks enfocados al frontend para el desarrollo de las SPAs, y como empiezan a salir algunas soluciones para enfrentarnos al principal problema que plantean este tipo de aplicaciones, el SEO. Pero si todavía no has leído el anterior post, deberías de leerlo primero, Tecnologías Web 104.

HTML nuevo, JS nuevo

Después de varios años sin novedades nuevas de HTML, en 2014 sacan HTML5 que trae consigo un conjunto de etiquetas nuevas (nav, header, footer, main...) que añaden un significado al contenido de estas y nos ayudan a reducir el uso de las etiquetas div, y otras como la etiquetas audio y video que permiten reproducir contenidos multimedia de forma nativa (algo que hasta ahora solo podíamos hacer con Flash).

Otra de las novedades más importantes de HTML5 son todas las APIs que traen y que nos van a permitir acceder a la cámara del dispositivo, a la ubicación, almacenar datos de forma local...

Este año, Evan You, un extrabajador de Google, publica Vue, un framework progresivo, lo que quiere decir que vamos a poder usarlo como si fuera una librería al estilo de React, o para cosas más complejas al igual que haríamos con Angular. Si ya tenemos un proyecto con cualquier tecnología y queremos pasarlo a Vue, podremos hacerlo de poco a poco ya que no es necesario tener una configuración compleja como ocurre con React o Angular que la necesitan para transpilar el JSX o el TS.

A mi parecer, Evan ha ido picoteando un poco de cada librería y framework existentes hasta este momento quedándose con lo mejor de cada uno para añadirlo a Vue. Y es por lo que ha recibido el apoyo de la comunidad y por lo que actualmente se ha posicionado como uno de los frameworks o librerías más usadas para el frontend.

No olvidemos que también han sacado un documental sobre Vue, al igual que hicieron en su momento con Ember.

Y llegamos al año 2015, el año en que sale una nueva versión del estándar de JavaScript, EcmaScript 6.

ES6 es una de las versiones más importantes de JavaScript hasta la fecha, debido a todas las novedades que trae consigo. Entre las novedades nos encontramos algunas como las arrow functions, las promesas, las dos nuevas formas de declarar variables o la sintaxis para declarar clases más parecida a como se hace en otros lenguajes.

Por otro lado, Dan Abramov inspirado por el patrón Flux que recomienda usar Facebook para gestionar el estado en las aplicaciones de React, publica Redux, una librería muy sencilla que aunque parece que se asocia solo a React, también se puede usar con cualquier otra librería o framework sin ningún problema.

Con Redux vamos a tener todo el estado en un único sitio, que solo se va a poder modificar a través de unas funciones llamadas reducers a las que se le mandan acciones que indican el cambio que hay que realizar sobre el estado.

Yendo a lo nativo

Siguiendo con el ecosistema de React, este año se presenta React Native, una librería construida sobre React, y que permite construir aplicaciones móviles nativas para Android e iOS usando unos componentes predefinidos que trae la librería. Usan un elemento al que se refieren como Bridge que se encarga de realizar la comunicación entre la parte de JavaScript y la parte nativa. React Native va mandando mensajes que describen la acción que hay que ejecutar, y la parte nativa la ejecuta

Este mismo año, Facebook se encuentra con el problema de que tienen que desarrollar su aplicación móvil de forma nativa y la API para traer los datos que necesitan en el feed no les sirve porque es una interfaz muy compleja en la que hay que mostrar muchos datos. Entonces surge la idea de GraphQL,  un lenguaje de consultas con el que consiguen traer los datos que necesitan con una sola petición, en lugar de tener que realizar varias peticiones como se venía haciendo.

Y esta es otra de las herramientas sobre las que podemos encontrar un documental.

Por último, este año, aparece Polymer, una librería de JavaScript para crear aplicaciones web mediante el uso de componentes. Al principio había unos pocos componentes básicos que proveían de una funcionalidad genérica que sirve para la mayor parte de las aplicaciones, pero han ido añadiendo nuevos componentes según han ido saliendo las nuevas versiones. Es una librería que siempre ha ido de la mano de las especificaciones que definen los Web Components.

Durante el 2016 el equipo de Google presenta Angular 2 en una conferencia, causando un gran revuelo entre la comunidad ya que habían rediseñado el framework por completo. En esta versión han decidido apostar por TypeScript como lenguaje de programación, han cambiado la sintaxis de las directivas, y lo que en la antigua versión eran los controladores, ahora son los componentes.

Desde entonces han ido sacando distintas versiones de Angular, aproximadamente una cada 6 meses, pero ninguna con grandes cambios como de AngularJS a Angular 2 (de momento).

Sobre el ecosistema de Vue aparecen dos herramientas nuevas.

De SPA a universal

Una de ellas es Nuxt, un framework construido sobre Vue que nos permite crear aplicaciones de una forma muy rápida ya que no nos tenemos que preocupar por configurar casi nada. Cuando digo casi nada, me refiero a que ni siquiera tendremos que configurar el router, ya que el va a ir generando las rutas a partir de los archivos y carpetas que añadamos dentro de la carpeta pages, tampoco Vuex, ni .

Pero no solo esto, lo mejor de Nuxt (a mi parecer) es que podemos hacer que nuestra aplicación sea una SPA, realice el primer renderizado en el servidor (mejorando el SEO) o genere archivos HTML estáticos a partir de las rutas que tenga nuestra aplicación, y todo ello de una forma muy sencilla.

Además también hay que decir que tiene una lista increíble de módulos que añaden cierta funcionalidad a nuestra aplicación y por tanto nos simplifican el trabajo evitando que tengamos que configurar otras cosas que no trae por defecto, como por ejemplo alguna librería de componentes.

Y por otro lado, surge Vuex que es el gestor de estado para las aplicaciones de Vue. Esta librería se basa en Redux y por tanto en el patrón Flux, pero está diseñada para usarla solo con Vue al contrario de lo que ocurre con Redux. En este caso, los elementos con los que nos encontramos son las acciones que se despachan desde la vista y en las que vamos a realizar las operaciones asíncronas, después tenemos las mutaciones que se encargan de realizar el cambio en el estado, y los getters que nos devuelven parte del estado para usarlo en las vistas.

En 2017 surge un nuevo competidor para aquellas tecnologías como React Native o Ionic que nos permiten crear aplicaciones nativas e híbridas usando los lenguajes propios de la web, es decir, HTML, CSS y JS. Flutter nos va a permitir crear aplicaciones nativas para Android e iOS mejorando considerablemente el rendimiento ya que estas aplicaciones construidas con Dart se van a compilar usando librerías de C a código máquina.

Las otras tecnologías a nombrar este año son Next y Angular Universal. Donde Next es la alternativa a Nuxt para la librería de React, mientras que Angular Universal solo permite realizar el primer renderizado de las aplicaciones de Angular en el servidor.

Terminamos este post aquí, dejando para el siguiente aquellas tecnologías que han salido durante los últimos dos años y las nuevas versiones de algunas de las que ya hemos hablado en esta serie de posts. No os perdáis Tecnologías Web 106.