Ecosistema del desarrollo web en entorno cliente

HTML, CSS y JavaScript

El desarrollo de aplicaciones web modernas se basa principalmente en tres tecnologías complementarias: HTML, CSS y JavaScript. Aunque trabajan conjuntamente para ofrecer una experiencia interactiva al usuario, cada una de ellas desempeña una función específica.

HTML (HyperText Markup Language) define la estructura y el contenido de la página web mediante elementos como encabezados, párrafos, tablas, formularios o imágenes.

CSS (Cascading Style Sheets) se encarga de la presentación visual de esos elementos, permitiendo definir aspectos como colores, tipografías, tamaños, márgenes o distribuciones mediante diferentes técnicas de maquetación.

JavaScript incorpora el comportamiento dinámico de la aplicación, permitiendo responder a las acciones del usuario, modificar el contenido de la página, realizar cálculos, validar formularios o comunicarse con servidores.

La separación entre estructura, presentación y comportamiento constituye uno de los principios fundamentales del desarrollo web moderno, ya que facilita el mantenimiento, la reutilización del código y el trabajo colaborativo.

Ejemplo

En una página de inicio de sesión:

• HTML define el formulario con los campos de usuario y contraseña.
• CSS establece su apariencia y distribución.
• JavaScript valida los datos introducidos y envía la información al servidor.

Lenguajes de script

Los lenguajes de script son lenguajes de programación diseñados para ser interpretados durante su ejecución, sin necesidad de generar previamente un programa ejecutable.

En el desarrollo web, JavaScript es el principal lenguaje de script utilizado en el navegador. Su integración con HTML permite dotar de interactividad a las páginas web sin necesidad de recargarlas continuamente.

Actualmente, JavaScript también puede ejecutarse fuera del navegador mediante entornos como Node.js, lo que ha permitido utilizar un mismo lenguaje tanto en el cliente como en el servidor.

JavaScript y el estándar ECMAScript

Aunque habitualmente se utilizan como sinónimos, JavaScript y ECMAScript no son exactamente lo mismo.

ECMAScript es la especificación oficial que define la sintaxis, los tipos de datos, los operadores y el comportamiento del lenguaje.

JavaScript es la implementación de dicha especificación realizada por los navegadores y otros entornos de ejecución, incorporando además numerosas APIs propias del entorno donde se ejecuta.

Cada año se publica una nueva versión del estándar ECMAScript que incorpora nuevas funcionalidades al lenguaje.

Ejemplo

Características como las funciones flecha (=>), let, const, las clases o async/await fueron incorporadas en distintas versiones de ECMAScript antes de ser implementadas por los navegadores.

APIs Web del navegador

Además del propio lenguaje JavaScript, los navegadores proporcionan numerosas APIs Web que permiten interactuar con diferentes recursos del sistema.

Entre las APIs más utilizadas destacan:

• DOM (Document Object Model).
• BOM (Browser Object Model).
• Fetch API.
• Web Storage API.
• Geolocation API.
• Clipboard API.

Estas interfaces amplían las capacidades del lenguaje permitiendo desarrollar aplicaciones web cada vez más completas sin necesidad de instalar software adicional.

Frameworks y librerías

A medida que las aplicaciones web aumentaron en complejidad, surgieron herramientas destinadas a simplificar su desarrollo.

Una librería proporciona un conjunto de funciones reutilizables que el desarrollador utiliza cuando las necesita. El control del flujo de la aplicación sigue estando en manos del programador.

Un framework, por el contrario, proporciona una estructura completa para desarrollar aplicaciones y establece la organización general del proyecto. En este caso es el framework quien controla el flujo principal de ejecución.

Actualmente existen numerosos frameworks para el desarrollo cliente, entre los que destacan Vue, React, Angular y Svelte.

Ejemplo

En este módulo se utilizará Vue 3, ya que permite desarrollar aplicaciones web modernas manteniendo una sintaxis sencilla y un aprendizaje progresivo a partir de JavaScript.

El ecosistema moderno de desarrollo

El desarrollo profesional de aplicaciones web no consiste únicamente en escribir código JavaScript. En la actualidad es habitual utilizar un conjunto de herramientas que facilitan la organización, ejecución y despliegue de los proyectos.

Durante el curso se emplearán principalmente:

• Visual Studio Code como editor de código.
• Vite como entorno de desarrollo.
• npm para la gestión de dependencias.
• Git para el control de versiones.
• GitHub para el alojamiento del código fuente.
• Vue 3 para el desarrollo de interfaces de usuario.

Estas herramientas constituyen el ecosistema básico con el que actualmente trabajan la mayoría de los desarrolladores web profesionales.