PHP vs JavaScript: servidor, navegador y Node.js

PHP se ejecuta en el servidor: genera la página, envía el HTML terminado y se detiene. JavaScript se ejecuta en el navegador del visitante, donde reacciona a los clics y cambia la página después de cargarla; con Node.js también puede ejecutarse en el servidor. Así que los dos son menos rivales que compañeros: un sitio típico usa PHP (o Node.js) en el servidor y JavaScript en el navegador.

Este código PHP se ejecuta en el servidor. El navegador solo recibe lo que imprime, y la pestaña Página muestra ese resultado:

<?php
$products = [
    ["name" => "Keyboard", "price" => 49],
    ["name" => "Mouse", "price" => 19],
    ["name" => "Monitor", "price" => 189],
];
$total = array_sum(array_column($products, "price"));
?>
<h2>Cart</h2>
<ul>
<?php foreach ($products as $p): ?>
    <li><?= $p["name"] ?>: $<?= $p["price"] ?></li>
<?php endforeach; ?>
</ul>
<p>Total: $<?= $total ?></p>

Mira la pestaña Salida: ya no queda nada de PHP, solo HTML. La misma lista construida por JavaScript en el navegador tiene este aspecto:

const products = [
  { name: "Keyboard", price: 49 },
  { name: "Mouse", price: 19 },
  { name: "Monitor", price: 189 },
];

const ul = document.querySelector("#cart"); // an empty <ul id="cart"> in the HTML
for (const p of products) {
  const li = document.createElement("li");
  li.textContent = `${p.name}: $${p.price}`;
  ul.append(li);
}

La versión en PHP envía una página completa, que los buscadores y los móviles lentos leen de inmediato. La versión en JavaScript puede actualizar la lista más tarde sin recargar, por ejemplo cuando el visitante quita un producto.

Dónde se ejecuta cada lenguaje

La última fila importa para la seguridad: todo lo que hay en el JavaScript del navegador es visible para el visitante, así que las contraseñas, las claves de API y las comprobaciones de precios van en el servidor.

Sintaxis lado a lado

Los dos lenguajes se parecen porque ambos toman prestado de C: llaves, if, for, while, function, return. Las diferencias están en los detalles:

Esta es una función con un callback en PHP:

<?php
$prices = [12.5, 8, 30, 4.25];

$withTax = array_map(fn($p) => round($p * 1.2, 2), $prices);
$cheap = array_filter($withTax, fn($p) => $p < 15);

echo implode(", ", $withTax), "\n";
echo "Under 15: " . implode(", ", $cheap) . "\n";
echo "Count: " . count($cheap) . "\n";

Y en JavaScript, donde map y filter son métodos del array:

const prices = [12.5, 8, 30, 4.25];

const withTax = prices.map((p) => Math.round(p * 1.2 * 100) / 100);
const cheap = withTax.filter((p) => p < 15);

console.log(withTax.join(", "));
console.log("Under 15: " + cheap.join(", "));

El operador +: la trampa clásica

En JavaScript, + suma números y también une cadenas, así que una cadena en cualquier lugar convierte la suma en concatenación. PHP separa las dos cosas: + siempre suma y . siempre une.

<?php
var_dump("10" + 5);     // int(15): + always adds
var_dump("10" . 5);     // string "105": . always joins
var_dump(10 . "");      // number to string
var_dump("3" * "4");    // numeric strings multiply
var_dump(0.1 + 0.2 === 0.3); // floats are inexact in both languages

console.log("10" + 5);  // "105"
console.log("10" - 5);  // 5
console.log("3" * "4"); // 12
console.log(0.1 + 0.2 === 0.3); // false

Los dos lenguajes tienen también el == flexible y el === estricto. El consejo es el mismo en ambos: usa === salvo que quieras comparar entre tipos distintos.

Pasar datos de PHP a JavaScript

PHP se ejecuta primero, así que puede escribir datos directamente en la página para que los use el JavaScript del navegador. json_encode convierte un array de PHP en JavaScript válido:

<?php
$user = ["name" => "Ada", "role" => "admin", "unread" => 3];
?>
<p id="greeting">Loading...</p>
<script>
const user = <?= json_encode($user, JSON_HEX_TAG | JSON_HEX_AMP) ?>;
document.getElementById("greeting").textContent =
    "Hi " + user.name + ", you have " + user.unread + " new messages";
</script>

La pestaña Salida muestra el script generado con los datos ya rellenados. La opción JSON_HEX_TAG escapa < y >, de modo que un valor que contenga </script> no puede terminar el script antes de tiempo. Hay más sobre las opciones en json_encode.

La otra dirección funciona mediante HTTP: el JavaScript del navegador llama a fetch("/api/cart.php"), el script PHP se ejecuta y responde con JSON:

<?php
// api/cart.php
header('Content-Type: application/json');
echo json_encode(['items' => 3, 'total' => 257]);

const res = await fetch("/api/cart.php");
const cart = await res.json();
console.log(cart.total); // 257

PHP vs Node.js en el servidor

Cuando JavaScript se ejecuta en el servidor mediante Node.js, la comparación se convierte en una elección real.

El modelo de PHP es indulgente: un bug o una fuga de memoria solo afecta a una petición, y cada petición empieza limpia. El modelo de Node puede mantener estado y conexiones abiertas, lo que encaja con chats y paneles en vivo, pero un fallo o un bucle bloqueante afecta a todos los usuarios de ese proceso.

Cuál aprender

Necesitarás JavaScript para cualquier página web interactiva, porque es el único lenguaje que ejecutan los navegadores. La cuestión es qué se ejecuta en el servidor:

• Aprende PHP a continuación si quieres trabajar con WordPress, Laravel o los muchos sitios PHP que ya existen, o si buscas la forma más sencilla de poner un sitio dinámico en un hosting barato. Empieza por qué es PHP.
• Quédate con JavaScript (Node.js) si quieres un solo lenguaje para todo el stack o estás construyendo funciones en tiempo real.

Un camino habitual es HTML y CSS, luego JavaScript en el navegador y después un lenguaje de servidor. Elijas el que elijas, los formularios, las sesiones, las bases de datos y las APIs JSON funcionan con las mismas ideas de HTTP, así que el conocimiento se traslada.