JavaScript en todas partes: cómo escribir código para todas las plataformas a la vez

¿Por qué JavaScript es el nuevo «write once, run anywhere»?

¿Recuerdan el viejo sueño de los desarrolladores: escribir el código una vez y que funcione en todas partes? Java lo prometió con su máquina virtual, pero en la práctica todo se reducía a bailes con el diablo. Y ahora miren a JavaScript. El lenguaje que alguna vez se consideró «de juguete» para animar botones, hoy ha conquistado el mundo. ¿Y saben qué? Realmente cumple esa promesa.

El desarrollo multiplataforma en JavaScript no es solo una tendencia de moda. Es una forma de reducir el tiempo de salida del producto, ahorrar presupuesto y mantener en el equipo a los mismos especialistas. En este artículo analizaremos cómo un solo lenguaje permite crear aplicaciones para navegador, dispositivos móviles, escritorio y servidor. Y sí, habrá ejemplos reales de código.

Arquitectura de una aplicación multiplataforma moderna

Antes de lanzarnos al código, entendamos cómo está organizado el ecosistema moderno. La idea clave es dividir la lógica de la aplicación en tres capas:

• Lógica de negocio — procesamiento de datos, validación, trabajo con API. Este es el núcleo que no debe depender de la plataforma.
• Capa de UI — la interfaz. Puede ser diferente para web, móviles y escritorio, pero a menudo utiliza componentes comunes.
• Capa de almacenamiento — bases de datos locales, caché, trabajo con el sistema de archivos.

JavaScript permite escribir las tres capas en un mismo lenguaje. Veamos las herramientas principales.

Parte del servidor: Node.js como base

Cualquier sistema multiplataforma comienza con el backend. Node.js es un entorno de ejecución de JavaScript fuera del navegador, construido sobre el motor V8. Es ideal para crear API REST, manejar conexiones WebSocket y trabajar con bases de datos.

Aquí hay un ejemplo simple de un servidor con Express que atenderá tanto a la web como a la aplicación móvil:

const express = require('express');const app = express();const port = 3000;

// Middleware para procesar JSONapp.use(express.json());

// Ejemplo de endpoint para obtener lista de usuariosapp.get('/api/users', (req, res) => {  const users = [    { id: 1, name: 'Ana', email: 'ana@example.com' },    { id: 2, name: 'Iván', email: 'ivan@example.com' }  ];  res.json(users);});

// Solicitud POST para crear un nuevo usuarioapp.post('/api/users', (req, res) => {  const newUser = req.body;  // Aquí normalmente se guardaría en la base de datos  console.log('Nuevo usuario:', newUser);  res.status(201).json({ message: 'Usuario creado', user: newUser });});

app.listen(port, () => {  console.log(`Servidor iniciado en http://localhost:${port}`);});

Este código funcionará igual en Windows, macOS y Linux. Además, puede ejecutarlo en una Raspberry Pi o en un contenedor en la nube: no requerirá ningún cambio.

Interfaz web: React como bloque de construcción universal

Cuando se trata de desarrollo multiplataforma en JavaScript, React es el primer candidato. Su arquitectura basada en componentes permite reutilizar hasta el 70% del código entre la web y las aplicaciones móviles.

Creemos un componente simple para mostrar una lista de usuarios:

import React, { useState, useEffect } from 'react';

function UserList() {  const [users, setUsers] = useState([]);  const [loading, setLoading] = useState(true);

  useEffect(() => {    fetch('/api/users')      .then(response => response.json())      .then(data => {        setUsers(data);        setLoading(false);      })      .catch(error => console.error('Error:', error));  }, []);

  if (loading) {    return <div>Cargando...</div>;  }

  return (    <div>      <h2>Lista de usuarios</h2>      <ul>        {users.map(user => (          <li key={user.id}>            {user.name} — {user.email}          </li>