Pregunta 1¿Dónde se ejecuta el código de la pantalla de una app web (index.html y app.js)?
Dónde se ejecuta tu código — navegador, servidor y apps de teléfono
Este artículo forma parte del curso Fundamentos de informática, que construye desde cero los conocimientos prácticos de informática que necesitas como mínimo para programar y hacer vibe coding.
El mismo código se comporta de otra manera dentro de un navegador, dentro de un servidor y sobre el OS de un teléfono. Los diagramas recorren cómo eliges entre una app web y una app nativa.
Este artículo trata dónde se ejecuta el código que escribes.
Hay tres lugares donde se ejecuta: dentro del navegador, dentro del servidor y dentro de la app instalada en un teléfono.
El código de una app web se ejecuta en dos lugares: el navegador y el servidor
El software que lee el HTML en el dispositivo del usuario y dibuja la pantalla es el navegador (browser), y una computadora preparada para aceptar solicitudes en cualquier momento es un servidor (server).
Los navegadores más habituales son Chrome, Safari, Edge y Firefox.
El lenguaje que un navegador puede leer y ejecutar directamente es JavaScript.
my-app está hecho de cuatro archivos: los dos de la pantalla son el frontend, y server.js, que recibe las reservas, es el backend.
Cuando un usuario abre la URL, al dispositivo solo le llegan los dos archivos de la pantalla.
Equipo del usuario
Navegador
- index.html — la forma de la pantalla de reservas
- app.js — lo que pasa al pulsar el botón
- El usuario puede abrir y leer el contenido de los dos
Servidor público
node server.js
- Ejecuta el código que recibe las reservas
- No llega al dispositivo, así que nadie lo lee
reserve.db
- El archivo donde se escriben los datos de las reservas
Aun siendo los archivos del mismo my-app, el lugar donde se ejecutan se reparte en dos marcos.
Al dispositivo solo le llegan index.html y app.js, y a partir de ahí entre los dos marcos solo pasan datos.
De las tres líneas siguientes, la del medio existe solo dentro del navegador y la última solo dentro del entorno de ejecución del servidor.
console.log("Reservar");
console.log(navigator.language);
console.log(process.version);
Si ejecutas estas tres líneas dentro del navegador, los resultados salen así.
El código de una app web se reparte en dos lugares
index.html y app.js, que construyen la pantalla, llegan al dispositivo del usuario y se ejecutan dentro del navegador.
server.js, que recibe las reservas, no sale del servidor público, así que los textos que no enseñas a los demás se escriben de ese lado.
Para que se pueda usar en el teléfono, o lo dejas como app web o haces una app nativa
Los teléfonos también tienen navegador.
my-app funciona tal cual si abres la URL en el navegador del teléfono.
Esta es la primera forma, y no hace falta rehacer el código.
El software que gestiona el arranque de las apps, la pantalla, las comunicaciones y los archivos dentro de un dispositivo es el OS (Operating System), que en un teléfono es iOS o Android.
La segunda forma es una app nativa (native app: una app que se pone directamente sobre el OS y se ejecuta ahí), que se hace por separado para iPhone y para Android y se entrega a través de App Store y Google Play.
Poner una app en un dispositivo de manera que se pueda arrancar desde el OS es instalarla (install).
El teléfono del usuario
OS (iOS / Android)
my-app (la app instalada)
- Archivos instalados desde App Store
- Se arranca con el icono de la pantalla de inicio
Navegador
- Al abrir la URL se ejecuta la app web
- index.html y app.js llegan aquí
Como muestra el diagrama, una app nativa se apoya sobre el OS, mientras que una app web se ejecuta sobre el navegador que hay dentro de ese OS.
Un programa o un dispositivo que envía solicitudes a un servidor se llama cliente (client), y al lado que se ejecuta en el dispositivo también se le llama lado del cliente, y al que se ejecuta en el servidor, lado del servidor.
Para elegir entre los dos, pones sus ventajas y sus desventajas una al lado de la otra.
| Qué mirar | App web | App nativa |
|---|---|---|
| Funciones del dispositivo que puedes usar | Solo las que ofrece el navegador | Acceso amplio a las funciones del OS |
| Dónde te encuentra la gente | Buscadores y URL compartidas | La búsqueda de App Store o Google Play |
| Trabajo para hacerla llegar a los usuarios | Basta con que abran una URL | Pasar la revisión de la tienda y que la instalen |
| Tiempo hasta que un arreglo llega a los usuarios | La siguiente vez que abran la URL | Esperar a que el usuario actualice |
| Cuántos códigos hay que escribir | Con uno funciona en iPhone y en Android | Uno para iPhone y otro para Android, por separado |
Desde el navegador solo llegas hasta las funciones que ofrece el navegador, y cuando quieres funciones del dispositivo más allá de eso, haces una app nativa.
Lo mismo cuando quieres que te encuentren desde la búsqueda de la tienda; si no se da ninguno de los dos casos, lo dejas como app web.
También hay una manera de hacer apps para varios OS a partir de un solo código fuente, y su nombre se trata en el siguiente artículo.
Cambie como cambie la entrega, server.js es común
Si lo dejas como app web, funciona con solo abrir la URL en el navegador del teléfono.
La app nativa se hace por separado para iPhone y para Android y se instala desde una tienda, pero elijas lo que elijas, server.js y reserve.db se quedan en el servidor público.
En qué se diferencia estar funcionando en tu máquina de estar funcionando publicado
El my-app que hiciste todavía solo se puede abrir desde tu computadora.
El interior de tu computadora, visto como lugar donde se ejecuta el código, se llama local (local).
El número del final de http://localhost:3000 que abres en local sirve para distinguir destinos dentro de la misma computadora, y se trata en el artículo «Qué pasa cuando escribes una URL» de este curso.
Dentro del marco está tu computadora, una sola máquina, y el navegador, server.js y reserve.db están todos ahí.
Al publicar, el contenido de esta única máquina se reparte en dos lugares, pero quién ocupa cada papel no cambia.
| Mismo papel | Local | Después de publicar |
|---|---|---|
| Ejecuta la pantalla | El navegador de tu computadora | Navegador del usuario |
| Recibe las reservas | node server.js en tu computadora | node server.js en el servidor público |
| Guarda los datos | reserve.db en tu computadora | reserve.db en el servidor público |
| URL que abre el usuario | http://localhost:3000 | La URL del servidor público |
Los nombres de los archivos que se ejecutan son los mismos en local y después de publicar.
Mover los cuatro archivos juntos a un servidor público fuera de tu computadora es el despliegue.
Los cuatro archivos pasan al servidor público, y en tu computadora solo queda el navegador.
Si abres el mismo example.com desde cualquier dispositivo, sale la misma pantalla.
Mientras siga en local no acepta solicitudes que vengan de fuera, así que otras personas no lo pueden usar desde sus dispositivos.
localhost:3000 señala al propio dispositivo donde lo escribiste, así que escribirlo en el teléfono de un colega no llega a tu computadora.
En qué consiste el trabajo de publicar se trata en «Despliegue y variables de entorno — de funcionar en tu computadora a estar publicado» de este curso.
Si cambias dónde lo pones, cambias quién lo puede usar
El my-app que conseguiste poner en marcha siguiendo los pasos de un libro para principiantes solo se puede abrir desde dentro de tu computadora, es decir, en local.
Si mueves los cuatro archivos a un servidor público, los dispositivos de otras personas también lo pueden abrir, y ese trabajo es el despliegue.
QUIZ
Verificación de conocimientos
Responde cada pregunta una a una.
Pregunta 2¿Con qué forma se puede usar en el teléfono el my-app que hiciste, sin rehacer el código?
Pregunta 3¿Qué hace falta para que un my-app que funciona en local se pueda usar desde los dispositivos de otras personas?