“Desarrollo Web Front-End” ya no es solo eso

Hace varios años, “Desarrollo Web Front-End” significaba desarrollar aplicaciones web (ej. Gmail) o sitios web utilizando etiquetas HTML, estilos CSS y Javascript. Hoy en día aplicaciones como Spotify, Slack o Discord pueden funcionar tanto como sitio web o como aplicaciones multiplataforma de escritorio, lo cual también se realiza con HTML, CSS y JavaScript. A eso también le podemos agregar la moda de “aplicaciones móviles híbridas”, en donde aplicaciones móviles como Instagram, Uber o Gmail son también hechas con HTML, CSS y Javascript.

Entonces, ¿podríamos decir que “Desarrollo Web Front-End” ya no es solo “Web”? De hecho, para varias empresas ésta es la forma de desarrollar varios tipos de aplicaciones, con el fin de ser utilizadas en varios tipos de dispositivos reutilizando el código. Ésta es una de las principales razones por las cuales hay tanta demanda laboral para programadores con experiencia en estas tecnologías, ya que ya no son solo “programadores de sitios Web”.

¿Qué es?

El desarrollo web Front-end (o Front-end web development) es comúnmente conocido como el proceso por el cual programadores construyen una interfaz gráfica utilizando HTML, CSS y JavaScript, para que el usuario interprete información e interactúe con ella a través de un navegador web (Chrome, Firefox, IE, etc).

Aplicaciones móviles híbridas y multiplataforma de escritorio

Pero entonces, ¿cómo se transforma una página web exclusiva para navegadores web en una aplicación para celular, o un programa para cualquier sistema operativo?

Hay herramientas como Ionic y Phonegap/Apache Cordova que sirven para hacer aplicaciones híbridas para dispositivos móviles (celulares o tablets), para varios sistemas operativos (iOS, Android, Windows Mobile). También hay herramientas como Electron que sirven para hacer aplicaciones multiplataforma de escritorio (para Mac, Windows o Linux).

Estas herramientas se especializan en enmarcar aplicaciones web dentro de navegadores web específicos para diferentes tipos de dispositivos, sin pestañas ni marcos de ningún tipo. Por ejemplo, al abrir una aplicación como Uber da la sensación de estar frente a una aplicación nativa, pero

en realidad se está frente a un navegador web enmarcando dicha aplicación. Adicionalmente tiene más acceso al sistema operativo tanto para ejecutar otros programas, como para acceder a archivos de forma que un simple navegador no podría acceder.

Caso de uso

Imaginemos que tenemos de cliente a un cine y queremos vender entradas por internet.

Simplificando un poco las cosas, tendríamos estos 2 sistemas:

1- Back-end: Servidor con bases de datos y lógica encargada de:

• Tener y exponer la información de las películas, salas y funciones disponibles.
• Aceptar transacciones para reservar asientos y comprar entradas.

2- Front-end: Aplicación Web desarrollada con CSS, HTML y Javascript encargada de:

• Comunicarse con el servidor para obtener y mostrar información de las películas, salas y funciones disponibles.
• Comunicarse con el servidor para efectuar reservas y compra de entradas con una interfaz de usuario intuitiva.

Luego el cliente nos pide poder ver información de películas, salas, funciones disponibles y poder realizar compra de entradas a través de 3 aplicaciones:

• Aplicación Android disponible en Google Play para celulares y tablets.
• Aplicación iOS disponible en Apple Store para iPhone y iPad.
• Aplicación de escritorio Windows para descargar desde la web o Microsoft Store.

En esta situación tenemos 2 opciones:

​1- Nativo: Contratar 3 equipos de desarrollo distintos, especializados en las tecnologías particulares para desarrollar en las distintas plataformas. Esto implica un código de fuente de Front-end totalmente distinto entre las diferentes aplicaciones.

2- Híbrido: Adaptar la aplicación Web Front-end que ya tenemos con:

• Ajustes de diseño: Para que se vea bien en los distintos tamaños de pantalla de los dispositivos.
• Ajustes de interacción: No es lo mismo una aplicación diseñada para ser manejada con el ratón que con un dispositivo táctil.
• Integración con las herramientas mencionadas, ejemplo: Apache Cordova y Electron.

Con la última opción tendríamos un mismo código, reutilizado en las 4 aplicaciones (iOS, Android, Windows y Web). Los programadores del primer Front-end Web podrían seguir trabajando en este código.

¿Cuál es el costo?

A priori parece fantástico que un solo código funcione en todos lados, pero ¿a qué costo?

Si bien se ahorra mucho por no tener que codificar en distintos lenguajes, hay costos de varios tipos sin ser estrictamente económicos, ya que varias de las tecnologías son de uso libre para la comunidad.

• De performance: Son más lentas que aplicaciones nativas. Si bien hay muchas opiniones al respecto, en general esto no es un problema a menos que la performance sea muy importante, como en el caso de los juegos y otras aplicaciones que requieran interacciones en tiempo real.
• De aprendizaje: Un desarrollador Web debe expandir sus conocimientos para usar estas herramientas, utilizando NodeJS, Webpack o similar y algún framework como React o Angular entre otras, junto con las herramientas antes mencionadas. Sin embargo, la base de estas herramientas sigue siendo JavaScript, por lo que para un desarrollador Web es mucho más fácil aprender estas nuevas tecnologías que volcarse a aprender Java, ObjectiveC o C++ para programar nativo para Android, iOS o PC, respectivamente.

En conclusión, si bien la cantidad de herramientas y tecnologías que un programador Web Front-end debe aprender hoy en día son mucho mayores que antes, las oportunidades son aún más grandes. El espectro de tipos de aplicaciones y dispositivos que se puede abarcar con dichas tecnologías es mucho más que solo desarrollo “Web”. Incluso se puede ir más allá del Front-end y desarrollar Back-end con NodeJS, con herramientas como ExpressJS y bases de datos como MongoDB en donde todo sigue utilizando el mismo lenguaje, Javascript.

Sobre esto y más podés aprender en nuestro curso Front EndDeveloper. Nuevo inicio en agosto. ConocéSenpai Academy y pasá al siguiente nivel.