El navegador como entorno de ejecución

Un navegador web es una aplicación que permite acceder a recursos de la Web, interpretar documentos HTML y CSS y ejecutar código JavaScript.

En el desarrollo web en entorno cliente, el navegador es especialmente importante porque actúa como entorno de ejecución de nuestras aplicaciones.

Entre los navegadores más utilizados se encuentran:

• Google Chrome.
• Mozilla Firefox.
• Microsoft Edge.
• Safari.

Aunque todos ellos implementan los principales estándares de la Web, pueden existir diferencias en las características disponibles y en su implementación.

Funcionamiento básico del navegador

Cuando el navegador recibe los recursos de una aplicación web, debe procesarlos para construir y ejecutar la aplicación.

De forma simplificada:

HTML ──────────> Estructura de la página
CSS ───────────> Presentación
JavaScript ────> Comportamiento
                      │
                      ↓
                 Navegador
                      │
                      ↓
              Aplicación web

El navegador incorpora diferentes componentes especializados para realizar estas tareas.

Entre ellos podemos destacar:

• Motor de renderizado: Procesa HTML y CSS y representa visualmente la página.
• Motor JavaScript: Interpreta y ejecuta el código JavaScript.
• APIs del navegador: Proporcionan funcionalidades que JavaScript puede utilizar para interactuar con la página y con el entorno del navegador.
• Herramientas de desarrollo: Permiten inspeccionar y depurar las aplicaciones web.

Motor JavaScript

Los navegadores incorporan un motor JavaScript encargado de ejecutar el código escrito en este lenguaje.

Algunos de los principales motores son:

Motor	Navegadores relacionados
V8	Chrome, Edge y otros navegadores basados en Chromium.
SpiderMonkey	Firefox.
JavaScriptCore	Safari.

Cuando una página contiene JavaScript, el navegador entrega el código a su motor JavaScript para que pueda ser procesado y ejecutado.

Código JavaScript
       │
       ↓
Motor JavaScript
       │
       ↓
    Ejecución

Los motores actuales no se limitan a interpretar las instrucciones una a una. También utilizan técnicas de optimización y compilación JIT (Just-In-Time) para mejorar el rendimiento durante la ejecución.

JavaScript y el navegador

JavaScript es un lenguaje de programación.

El navegador es uno de los entornos en los que JavaScript puede ejecutarse.

JavaScript también puede ejecutarse fuera del navegador utilizando otros entornos, como Node.js.

APIs del navegador

El navegador proporciona funcionalidades adicionales que pueden utilizarse desde JavaScript a través de diferentes APIs (Application Programming Interfaces).

Por ejemplo, permiten:

• Acceder y modificar el documento HTML.
• Detectar acciones realizadas por el usuario.
• Realizar peticiones a servidores.
• Almacenar información en el navegador.
• Utilizar temporizadores.
• Consultar determinadas características del dispositivo.

Dos objetos que encontraremos frecuentemente son:

window;
document;

window representa el contexto principal proporcionado por el navegador y document representa el documento HTML cargado en la página.

Por ejemplo:

console.log(window);
console.log(document);

APIs del navegador

window y document no forman parte del lenguaje JavaScript. Son objetos proporcionados por el navegador (APIs del navegador).

Esta distinción permite separar las características propias del lenguaje de las funcionalidades proporcionadas por su entorno de ejecución.

Capacidades del navegador

Gracias a JavaScript y a las APIs disponibles, una aplicación puede realizar numerosas operaciones en el cliente.

Entre ellas:

• Modificar dinámicamente el contenido de una página.
• Cambiar la apariencia de los elementos.
• Responder a las acciones del usuario.
• Validar datos introducidos en formularios.
• Comunicarse con servidores.
• Almacenar información localmente.
• Reproducir contenido multimedia.

Estas capacidades permiten desarrollar aplicaciones web con interfaces interactivas y comportamientos similares a los de muchas aplicaciones de escritorio.

Limitaciones de ejecución

El código JavaScript descargado desde una página procede de un servidor externo y se ejecuta en el dispositivo del usuario.

Permitir que ese código tuviera acceso completo al sistema supondría un grave problema de seguridad.

Por este motivo, los navegadores ejecutan JavaScript dentro de un entorno restringido o sandbox.

Una aplicación web no puede, de forma general y sin autorización:

• Acceder libremente a los archivos del usuario.
• Ejecutar cualquier programa instalado en el sistema.
• Controlar directamente el sistema operativo.
• Acceder libremente a recursos de otras aplicaciones web.
• Utilizar determinadas características del dispositivo sin los permisos correspondientes.

WARNING

El navegador establece una frontera de seguridad entre la aplicación web y el sistema del usuario.

Algunas APIs permiten acceder a características adicionales del dispositivo, pero pueden requerir permisos explícitos del usuario.

Compatibilidad entre navegadores

Los estándares web permiten desarrollar aplicaciones que funcionan en diferentes navegadores.

Sin embargo, una determinada característica puede:

• No estar implementada en todos los navegadores.
• Estar disponible únicamente a partir de determinadas versiones.
• Presentar pequeñas diferencias de implementación.
• Haber quedado obsoleta y no ser recomendable en aplicaciones nuevas.

Por ello, antes de utilizar determinadas características es importante comprobar su compatibilidad.

Una de las herramientas habituales para hacerlo es Can I Use, que permite consultar el soporte de tecnologías web en diferentes navegadores y versiones.

Por ejemplo, podemos comprobar la compatibilidad de:

• Propiedades CSS.
• Elementos HTML.
• APIs del navegador.
• Características de JavaScript.

TIP

En el desarrollo web moderno debemos priorizar los estándares web y comprobar la compatibilidad de aquellas características que puedan no estar disponibles en todos los navegadores que debe soportar nuestra aplicación.

Herramientas de desarrollo

Los navegadores actuales incluyen un conjunto de herramientas de desarrollo o DevTools.

Normalmente podemos abrirlas pulsando F12 o mediante las opciones del navegador.

Entre sus principales herramientas encontramos:

• Elements: Permite inspeccionar el HTML y CSS de la página.
• Console: Permite ejecutar JavaScript y consultar mensajes y errores.
• Sources: Permite consultar y depurar el código fuente.
• Network: Permite analizar las peticiones y respuestas realizadas por la aplicación.
• Application: Permite consultar diferentes mecanismos de almacenamiento y recursos de la aplicación.
• Performance: Permite analizar el rendimiento de la aplicación.

Durante el módulo utilizaremos continuamente estas herramientas para observar cómo funciona una aplicación, ejecutar código y localizar errores.

En la siguiente actividad utilizaremos las DevTools para explorar directamente el navegador como entorno de ejecución de JavaScript.