Tecnologías Web 104

Multiplataformas

Pues ya ha llegado el nuevo post de Tecnologías Web, espero que os estén gustando y hayáis visto como han ido evolucionando y apareciendo tecnologías para facilitar el desarrollo de la web. ¿Cómo, que no habéis leido los anteriores? Pues podéis empezar por el principio leyendo Tecnologías Web 101, o si sois de los que empezáis la casa por el tejado empezad por el anterior, Tecnologías Web 103.

Durante este cuarto post, contaremos como con la llegada de los smartphones empiezan a surgir aquellos frameworks que permiten desarrollar para múltiples plataformas y dispositivos, además de comentar cual es la librería JavaScript más usada hoy en día para el desarrollo frontend.

Aplicaciones híbridas

Desde la llegada del iPhone en 2007, como hemos comentado en anteriores posts, los dispositivos móviles pasan a ser un medio a través del que consumir información de internet, usar aplicaciones... Y este año, varias de las tecnologías que aparecen van enfocadas a estos dispositivos.

Para empezar, se empieza a hablar del Reponsive Web Design, una técnica por la que vamos a hacer que las aplicaciones web se puedan adaptar a los distintos dispositivos independientemente de su tamaño, es decir, podremos hacer que nuestra aplicación se vea bien en un móvil, una tablet, un portátil... Esto lo vamos a conseguir usando las media queries de CSS para aplicar unas propiedades u otras dependiendo de los distintos tamaños de pantallas, y aplicando otras tecnologías como Flexbox.

También surgen Ionic y PhoneGap (más tarde se le cambió el nombre a Apache Cordova) que nos permiten desarrollar aplicaciones móviles (híbridas) usando los tres principales lenguajes de la web (HTML, CSS y JS).

PhoneGap nos proporciona acceso al hardware de los dispositivos como a la cámara, el acelerómetro, la ubicación, y coge todo nuestro código y lo embebe dentro de un WebView.

Por su parte, Ionic se construye sobre PhoneGap y AngularJS, permitiendo construir las aplicaciones de la misma forma que con PhoneGap, pero cambiando la forma de desarrollar, por aquella que se sigue con AngularJS.

Por otro lado, de la misma forma que podemos desarrollar aplicaciones móviles usando los lenguajes de la web, aparece Electron, de la mano de Github, que nos proporciona un entorno para crear aplicaciones de escritorio multiplataforma. Al igual que las dos herramientas comentadas antes, lo que Electron va a hacer, es encapsular una aplicación web dentro de un contenedor, haciendo que esta tenga un aspecto nativo. Abrir una aplicación hecha con Electron, sería como abrir la aplicación en un navegador Chrome, ya que esta herramienta usa como motor, Chromium.

Todas estas tecnologías suponen una gran ventaja frente a las nativas, ya que no es necesario tener distintos equipos para desarrollar estas aplicaciones, uno que se encargue de desarrollar para los dispositivos de Apple, otro para los dispositivos de Android... sino que con un solo equipo que conozca alguna de las herramientas que acabamos de comentar podría hacer una única aplicación que funcione en todos estos dispositivos (pero cuidado que no todo son ventajas). Entre las desventajas tenemos el rendimiento de las aplicaciones, pues el de las nativas superan al de las híbridas.

En cuanto al tema de estilos en la web, este año se crea PostCSS, una herramienta de JavaScript que se encarga de modificar nuestro código CSS aplicando plugins sobre él. Usando estos plugins podremos empezar a usar funcionalidades como las que ya nos proporcionaban los preprocesadores (funciones, mixins...), podremos aplicar los prefijos automáticamente a aquellas propiedades que los necesiten, se puede eliminar el código que no se usa para dejar los archivos con un menor tamaño...

Hay muchos plugins para PostCSS y los han separado en distintas secciones en función de las modificaciones que van a realizar sobre nuestro código.

Una nueva forma de pensar

Por último, este año, Facebook publica la librería de React. Una librería encargada de la parte de las interfaces de usuario (desarrollando componentes) y con la que podemos crear SPAs. Esta librería surge básicamente porque en Facebook necesitaban una herramienta que ofreciera un mejor rendimiento que las que había en esta época. Para ellos el Two Way Binding que se venía usando en algunas librerías que hemos comentado anteriormente no era lo suficientemente óptimo, por lo que se ha apostado por un flujo de datos unidireccional.

Esta librería introduce conceptos nuevos como el Virtual DOM, una representación del DOM en memoria sobre el que se van a aplicar los cambios para ver a que componentes afectan y renderizar solo aquellos componentes afectados, en lugar de tener que volver a renderizar toda la aplicación cada vez que cambia algo.

Otra de las novedades es la sintaxis que hay que usar para crear los componentes. Esta sintaxis también fue creada por Facebook y es JSX, en la que vamos a definir la estructura de los componentes usando código HTML dentro del JavaScript, algo que parece no gustar a los desarrolladores la primera vez que lo ven, pero que acaban cogiéndole cariño en cuanto le dan una oportunidad.

A día de hoy, esta librería es la más usada en el desarrollo web, habiendo superado a Angular que era la que tenía el primer puesto no hace tanto. Además, si ya teníamos el MEAN Stack, con React aparece el MERN Stack donde se sustituye Angular como framework para las vistas por React.

Y hasta aquí este post. No olvidéis pasaros por el siguiente, Tecnologías Web 105, en el que veremos las herramientas presentadas en los últimos seis años y alguna que está por salir.