Historia del Frontend

4.1 Historia del desarrollo web: de HTML a HTML5 y CSS3

A principios de los años 90, el mundo vio nacer el desarrollo web gracias a Tim Berners-Lee. Él fue, de hecho, el primer desarrollador frontend: él mismo inventó HTML y lo usó, creó el primer navegador. A un verdadero frontend developer no lo detiene ni siquiera la falta de un navegador.

Aunque en ese entonces CSS y JavaScript aún no habían sido inventados, así que crear sitios era más sencillo. Se puede decir que Tim Berners-Lee fue el primer desarrollador old school, que se ocupaba del Frontend antes de la llegada de sus JavaScript y CSS.

En 1995, el Internet Engineering Task Force (IETF) aprobó HTML 2.0 como el primer estándar oficial de HTML. Esta versión incluía las etiquetas y atributos básicos que permitían crear páginas web básicas. HTML 2.0 estableció las bases para el futuro desarrollo del desarrollo web.

HTML 3.2 y HTML 4.0: ampliación de capacidades

El año 1997 fue un hito importante en la historia de HTML. Ese año se lanzó HTML 3.2, desarrollado por el consorcio W3C. Esta versión incluía soporte para tablas, applets Java y fórmulas matemáticas, lo que amplió significativamente las capacidades de los desarrolladores web.

Más tarde ese mismo año, surgió HTML 4.0, que trajo mejoras significativas. La inclusión del soporte para estilos CSS, la semántica mejorada y los nuevos elementos hicieron de HTML 4.0 una poderosa herramienta para crear páginas web más complejas y estructuradas. La introducción de estilos CSS permitió a los desarrolladores separar el contenido de su apariencia, lo cual facilitó la gestión de estilos y simplificó la implementación del diseño.

CSS: revolución en la estilización de páginas web

El primer estándar de CSS (Cascading Style Sheets) fue lanzado por W3C en 1996. CSS permitió a los desarrolladores estilizar documentos HTML, separando los elementos visuales de la estructura de la página. CSS1 ofreció capacidades básicas para estilizar texto e imágenes de fondo.

En 1998 se presentó CSS2, que añadió nuevas funcionalidades, como el soporte para media queries, posicionamiento absoluto y relativo, así como estilos más complejos para impresión.

CSS3, que comenzó a aparecer en 2011, introdujo una arquitectura modular. Esto permitió implementar nuevas funciones de manera gradual, incluyendo animaciones, gradientes, transformaciones y mejores layouts.

HTML5: una nueva era en el desarrollo web

HTML5, desarrollado conjuntamente por WHATWG y W3C, fue una actualización significativa y se presentó oficialmente en 2014. HTML5 añadió soporte para multimedia (video y audio), nuevos elementos para mejorar la semántica (como <article>,<section>,<header>,<footer>), mejores formatos para formularios web y nuevas API para trabajar con gráficos y multithreading.

HTML5 amplió significativamente las posibilidades para los desarrolladores web, permitiendo crear aplicaciones web más interactivas y dinámicas. El soporte para elementos multimedia y nuevas API hizo que las aplicaciones web fueran más poderosas y funcionales.

4.2 De jQuery a Angular y React

Cuanto más rápido era internet, más pesadas se volvían las páginas web. Cuanto más CSS y JavaScript había en ellas. Para simplificar su escritura, se empezaron a usar varias bibliotecas. Una de las más populares fue jQuery.

jQuery: Facilidad para trabajar con JavaScript

jQuery fue creado por John Resig y lanzado en enero de 2006 en la conferencia BarCamp en Nueva York. El objetivo de jQuery era simplificar la interacción con documentos HTML, el manejo de eventos, animaciones y la interacción con Ajax para un desarrollo web rápido.

jQuery rápidamente se volvió popular gracias a sus métodos simples e intuitivos, que ocultaban la complejidad de trabajar con JavaScript y problemas de compatibilidad entre navegadores. Sus funciones principales incluyen:

• Selectores que permiten encontrar y manipular fácilmente elementos DOM
• Facilidad en el manejo de eventos
• Animaciones y efectos
• Integración con Ajax para crear páginas web interactivas

jQuery cambió el enfoque del desarrollo web, haciéndolo más accesible y cómodo para los desarrolladores.

Angular: Introducción a aplicaciones web dinámicas

Otra respuesta al creciente volumen y complejidad de las páginas web fue el surgimiento del framework Angular. AngularJS fue presentado por primera vez por Google en octubre de 2010. El proyecto fue creado por Misko Hevery y Adam Abrons para simplificar el desarrollo de aplicaciones de una sola página (SPA).

AngularJS proporcionó poderosas herramientas para el desarrollo del lado del cliente, incluyendo:

• Enlace de datos declarativo a través de directivas
• Servicios integrados para manejar solicitudes HTTP
• Enlace de datos bidireccional, permitiendo actualizar la vista automáticamente cuando cambian los datos del modelo
• Modularidad y facilidad para realizar tests de código

En 2016, Google presentó una versión completamente rediseñada de Angular (Angular 2 y superiores), que se convirtió en una plataforma para el desarrollo de aplicaciones web escalables y de alto rendimiento utilizando TypeScript.

React: Revolución en la renderización de interfaces de usuario

React fue creado por Jordan Walke de Facebook y se lanzó por primera vez en marzo de 2013. React surgió como respuesta a las necesidades de Facebook de mejorar el rendimiento y soportar interfaces de usuario complejas.

React introdujo un nuevo enfoque para el desarrollo de interfaces de usuario, basado en componentes y el DOM virtual:

• Arquitectura de componentes, permitiendo crear componentes reutilizables y aislados
• DOM virtual, que optimiza la actualización de interfaces, haciéndola más rápida y eficiente
• Enlace de datos unidireccional, que simplifica la depuración y la gestión del estado de la aplicación

React rápidamente ganó popularidad y se convirtió en la base para desarrollar muchas aplicaciones web modernas gracias a su rendimiento y flexibilidad. También se convirtió en la base para otras bibliotecas y frameworks, como React Native para aplicaciones móviles.

Estas tres tecnologías — jQuery, Angular y React — jugaron roles clave en la evolución del desarrollo web, cada una aportando sus enfoques y herramientas únicas que simplificaron significativamente la creación de aplicaciones web modernas.

4.3 Node.js, Electron, React Native

HTML5, CSS3, JavaScript 2016 se volvieron tecnologías tan poderosas que la Web se expandió más allá del navegador y se convirtió en una tecnología Fullstack Frontend completa. Y el backend lo sintió primero.

Node.js: conquista del backend

Node.js fue creado por Ryan Dahl y se lanzó por primera vez en mayo de 2009. El objetivo principal de Node.js es proporcionar un entorno de ejecución para JavaScript fuera del navegador, lo que permite usar JavaScript para el desarrollo del lado del servidor. Node.js está construido sobre el motor V8 de Google, lo que proporciona alto rendimiento y velocidad de ejecución.

Node.js utiliza I/O (input/output, entrada/salida) no bloqueante, lo que permite manejar numerosas conexiones simultáneamente sin bloquear el hilo principal de ejecución. Además, tiene un extenso ecosistema de módulos disponibles a través de npm (Node Package Manager), lo que simplifica el desarrollo y la integración de varias bibliotecas y herramientas. Y gracias al motor V8, Node.js proporciona un procesamiento de solicitudes rápido y eficiente.

Electron: conquista de los escritorios

Escribir una interfaz de usuario genial para el escritorio es todo un reto, y aquí está HTML5+CSS3 al alcance... Entonces, los programadores idearon un truco: tu aplicación abre una ventana principal, en esa ventana se incrusta un navegador (componente VebView), y en ese navegador se carga el código en HTML5, CSS3 + JavaScript.

La biblioteca Electron, inicialmente conocida como Atom Shell, fue creada por GitHub para el editor de código Atom. La primera versión de Electron se lanzó en julio de 2013. El objetivo de Electron es permitir a los desarrolladores crear aplicaciones de escritorio usando tecnologías web como HTML, CSS y JavaScript.

Electron permite crear aplicaciones que funcionan en Windows, macOS y Linux con la misma base de código. Electron combina las capacidades de las tecnologías web y la potencia de Node.js, lo que permite el acceso al sistema de archivos y otros recursos del sistema. Los desarrolladores pueden usar frameworks web y bibliotecas existentes para crear interfaces y funcionalidades.

React Native: aplicaciones móviles

React Native fue desarrollado por Facebook y presentado por primera vez en marzo de 2015. El objetivo de React Native es proporcionar la capacidad de crear aplicaciones móviles nativas para iOS y Android usando JavaScript y React.

React Native utiliza componentes nativos, lo que garantiza un rendimiento comparable con las aplicaciones nativas. Al mismo tiempo, los desarrolladores pueden escribir código que funcione tanto en iOS como en Android, lo cual simplifica significativamente el desarrollo y reduce el tiempo de soporte.

Todo es igual que con Electron: la aplicación móvil abre una VebView en toda la ventana, donde se carga un "sitio" escrito en HTML5, CSS3 y JS. Todos esperaban que las aplicaciones móviles reemplazaran los sitios web en los teléfonos, pero ocurrió exactamente lo contrario: los sitios comenzaron a desplazar a las aplicaciones nativas.

Hoy en día, el Frontend Fullstack Software Engineer es la profesión más demandada en el mundo de TI. Así que la decisión de convertirse en desarrollador Frontend es correcta y visionaria!