PHP vs JavaScript: server, browser e Node.js

PHP gira sul server: costruisce la pagina, invia l'HTML finito e si ferma. JavaScript gira nel browser del visitatore, dove reagisce ai clic e modifica la pagina dopo il caricamento; con Node.js può girare anche sul server. Quindi i due sono più partner che rivali: un sito tipico usa PHP (o Node.js) sul server e JavaScript nel browser.

Questo codice PHP gira sul server. Il browser riceve solo ciò che stampa, e la scheda Page mostra quel risultato:

<?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>

Guarda la scheda Output: non c'è più traccia di PHP, solo HTML. La stessa lista costruita da JavaScript nel browser ha questo aspetto:

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 versione PHP invia una pagina completa, che i motori di ricerca e i telefoni lenti leggono subito. La versione JavaScript può aggiornare la lista più tardi senza ricaricare, per esempio quando il visitatore rimuove un elemento.

Dove gira ciascun linguaggio

L'ultima riga conta per la sicurezza: tutto ciò che sta nel JavaScript del browser è visibile al visitatore, quindi password, chiavi API e controlli sui prezzi vanno sul server.

Sintassi a confronto

I due linguaggi si somigliano perché entrambi prendono da C: graffe, if, for, while, function, return. Le differenze stanno nei dettagli:

Ecco una funzione con una callback in 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";

E in JavaScript, dove map e filter sono metodi dell'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(", "));

L'operatore +: la trappola classica

In JavaScript + somma i numeri e unisce le stringhe, quindi una stringa da qualche parte trasforma la somma in concatenazione. PHP tiene separate le due cose: + somma sempre e . unisce sempre.

<?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

Entrambi i linguaggi hanno anche == non stretto e === stretto. Il consiglio è lo stesso in entrambi: usa === a meno che tu non voglia confrontare tipi diversi.

Passare dati da PHP a JavaScript

PHP gira per primo, quindi può scrivere i dati direttamente nella pagina perché il JavaScript del browser li usi. json_encode trasforma un array PHP in JavaScript valido:

<?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 scheda Output mostra lo script generato con i dati già inseriti. Il flag JSON_HEX_TAG fa l'escape di < e >, così un valore che contiene </script> non può chiudere lo script prima del tempo. Altre opzioni in json_encode.

La direzione opposta passa da HTTP: il JavaScript del browser chiama fetch("/api/cart.php"), lo script PHP gira e risponde 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 sul server

Quando JavaScript gira sul server tramite Node.js, il confronto diventa una vera scelta.

Il modello di PHP perdona: un bug o una perdita di memoria colpisce solo una richiesta, e ogni richiesta parte pulita. Il modello di Node può tenere aperti stato e connessioni, il che si adatta a chat e dashboard live, ma un crash o un ciclo bloccante colpisce tutti gli utenti di quel processo.

Quale imparare

JavaScript ti servirà per qualsiasi pagina web interattiva, perché è l'unico linguaggio che i browser eseguono. La domanda è cosa gira sul server:

• Impara PHP come passo successivo se vuoi lavorare con WordPress, Laravel o i tanti siti PHP esistenti, oppure se vuoi il modo più semplice per mettere un sito dinamico su un hosting economico. Inizia da cos'è PHP.
• Resta su JavaScript (Node.js) se vuoi un solo linguaggio per tutto lo stack o stai costruendo funzionalità in tempo reale.

Un percorso comune è HTML e CSS, poi JavaScript nel browser, poi un linguaggio lato server. Qualunque linguaggio lato server tu scelga, form, sessioni, database e API JSON si basano sulle stesse idee di HTTP, quindi le conoscenze si trasferiscono.