LA EVOLUCIÓN DEL DESARROLLO FRONT: HACIA LA SIMPLIFICACIÓN DE LIBRERÍAS Y FRAMEWORKS DE DESARROLLO
Recuerdo como en mis inicios la mayoría de los frameworks de JavaScript no eran demasiado potentes. Era necesario escribir un código muy enrevesado, poco documentado y había muy pocas librerías para cubrir las necesidades de la época. Este artículo es un repaso a la historia del Front y su evolución y simplificación con el paso del tiempo. Las librerías, los navegadores y los framework han evolucionado y la manera de trabajar ha cambiado completamente.
EL DESARROLLO FRONT EN LOS AÑOS 2000
Entre 2000 y 2005, todavía había que apoyarse en librerías de terceros poco probadas, para adaptarlas. Mantener un menú sencillo, que a día de hoy se haría con unas pocas líneas de configuración, conllevaba mucho más trabajo. Algo que en la actualidad solucionaríamos con unas pocas etiquetas: “mat-menu” o “mat-menu-item” serían suficientes para tenerlo listo. Además, en esa época apenas se podían hacer unas pocas cosas con JavaScript y su potencia no estaba completamente explotada. Era tedioso y difícil trabajar y la cantidad de componentes existentes no es comparable con el repositorio y registro de librerías que podemos tener a día de hoy gracias a NPM (que permite descargar e instalar librerías de manera sencilla). La web también fue evolucionando, y con ella los navegadores. En aquellos años el mercado estaba copado por Internet Explorer, mientras que a día de hoy el catálogo de navegadores es mucho más extenso. De hecho, el liderazgo se ha movido hacia Chrome, seguido de otros como Safari, Edge o Firefox. Además, otros navegadores como Samsung Internet han entrado en el mercado gracias a la irrupción de los móviles en nuestras vidas.
UN GRAN CAMBIO EN EL DESARROLLO FRONT: LA APARICIÓN DE JQUERY
En el año 2006 se produce un gran cambio con la aparición de JQuery, que facilitaría mucho la vida de los desarrolladores de Front. Esta librería, que a día de hoy los programadores más nuevos ya no conocen, fue en su momento la reina de las librerías de JavaScript para nuevos desarrollos. No había página web de prestigio que no la utilizase. De hecho, en la época del 2010 el código $(“expresión”) dio vida a nuestras páginas web, algo que se ha mantenido hasta la actualidad. Debido a esta popularidad se crearon diferentes versiones, y todavía en 2022 lo siguen utilizando el 74% de los sitios web.
SIMPLIFICANDO LA ADAPTACIÓN DEL FRONT A LOS DIFERENTES NAVEGADORES
Algo que ha cambiado mucho es que ya no es necesario adaptar el CSS a tantas versiones de navegador. Antes, los IE Hacks se utilizaban continuamente para arreglar aspectos de visualización, ya que cada navegador interpretaba de distinta forma. Esto llenaba el código de sobreescritura de estilos, porque las imágenes no se veían bien, los bordes de una tabla no se apreciaban correctamente, etc. Había que introducir código “especial” para que determinadas expresiones de diseño CSS solo se ejecutasen en uno de los navegadores. A día de hoy, aquellas librerías han quedado obsoletas, y se utilizan frameworks. La librería basada en el trabajo con tablas ha sido sustituida por verdaderos frameworks que nos permiten tomar parte de lo que anteriormente se hacía en Back y traerlo al Front. Estas aplicaciones, a mediana o gran escala, a día de hoy almacenan datos en la propia sesión de storage. Conectan por websocket al servidor y nos traen información en tiempo real. Además, trabajan sin hacer peticiones al servidor (o al menos no para todas las funcionalidades) como se hacía con anterioridad y manejan sus propias vistas, rutas y proveedores de datos. Entre los Frameworks que a día de hoy nos dan toda esta potencia en el Front podemos destacar tres principales: Angular, React y Vue.
ANGULAR, UN FRAMEWORK PARA POTENCIAR JAVASCRIPT
Angular es un Framework creado por Google. Éste mejora de alguna manera el Modelo Vista Controlador (MVC), con una arquitectura MVVM (Model, View, ViewModel). Además, utiliza Typescript, creado por Microsoft, para potenciar JavaScript. Explicado de manera sencilla, Angular descompone la aplicación en componentes que se organizan en ficheros TypeScript para definir el componente, templates para definir la estructura html del componente y, por último, CSS para dar estilo al componente. Sus principales características son:
- Uso de HTML y directivas para insertar la lógica a través de templates.
- Trabajo con “Two way data blinding”. Cuando se cambian los datos de la interfaz, esto se refleja automáticamente en el modelo de datos, asociado al componente o al estado de la aplicación.
- Hoja de estilos propia para personalizar el componente.
UNA LIBRERÍA PARA EL FRONT: REACT
A diferencia de Angular, que podemos definir como un software Framework, React es una librería, pues solo es la vista en el modelo MVC. Fue creada en 2013 por el equipo de Facebook y su desarrollo natural a día de hoy está basado en JavaScript, siendo lo más habitual desarrollar sobre ECMAScript 6 (aunque hay desarrolladores que siguen prefiriendo trabajar con TypeScript). React permite la generación de componentes en un solo fichero JavaScript, en el modelo de desarrollo actual. Para ello utiliza JSX, que nos permite la ejecución de código de marcado para el renderizado de los componentes. Por último, React utiliza el concepto de Hook’s para la manipulación de los componentes y sus estados, permitiéndonos gracias a ellos dar estado a los componentes con “useState”, o ejecutar efectos cuando un componente cambia o se renderiza por primera vez con “useEffect”.
EL FRAMEWORK DE VUE PARA EL DESARROLLO FRONT
Podemos decir que Vue es un framework, más que una librería. Fue desarrollado inicialmente por un antiguo miembro del equipo de Angular y a día de hoy tiene soporte de la comunidad y se ha hecho muy popular. Utiliza JavaScript como base y tiene una curva de aprendizaje muy rápida, lo que facilita que más personas trabajen con él. Al igual que React, soporta templates de JSX, lo que da lugar a la generación de plantillas mediante expresiones insertadas en el propio código. La definición de estas plantillas puede hacerse sobre el mismo fichero donde se definen los componentes. Además, también trabaja con “Two way data binding”, lo que permite tener datos reactivos que se asocian directamente al modelo y la vista.
EL DESARROLLO FRONT EVOLUCIONA AL TIEMPO QUE LO HACE LA TECNOLOGÍA
Sin duda el desarrollo ha evolucionado mucho en los últimos 20 años. Tanto, que a día de hoy ya no solo hablamos de páginas web en un navegador, sino de aplicaciones móviles. Para el desarrollo de éstas podemos utilizar Javascript a través de IONIC (muy similar a Angular) o React Native. El primero de ellos se incrusta en un WebView y facilita el despliegue tanto en Android como en IOS. El segundo permite traspasar una aplicación creada en React a una aplicación Nativa, lo que facilita la reutilización. Habrá que esperar para ver cómo sigue evolucionando el mundo del desarrollo Front, si es posible simplificar aún más y qué nuevas plataformas, navegadores o maneras de acceder a Internet encontramos en un futuro.
José Alberto García Charfole
Responsable del Delivery Center de Serbatic Cuenca