PHP vs JavaScript: serwer, przeglądarka i Node.js

PHP działa na serwerze: buduje stronę, wysyła gotowy HTML i kończy pracę. JavaScript działa w przeglądarce odwiedzającego, gdzie reaguje na kliknięcia i zmienia stronę po jej wczytaniu; z Node.js może też działać na serwerze. Te dwa języki to więc mniej rywale, a bardziej partnerzy: typowa strona używa PHP (albo Node.js) na serwerze i JavaScriptu w przeglądarce.

Ten kod PHP działa na serwerze. Przeglądarka dostaje tylko to, co wypisze, a karta Page pokazuje ten wynik:

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

Zajrzyj do karty Output: nie ma w niej już PHP, tylko HTML. Ta sama lista zbudowana przez JavaScript w przeglądarce wygląda tak:

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);
}

Wersja w PHP wysyła kompletną stronę, którą wyszukiwarki i wolne telefony odczytują od razu. Wersja w JavaScripcie może później zaktualizować listę bez przeładowania, na przykład gdy odwiedzający usunie pozycję.

Gdzie działa każdy z języków

Ostatni wiersz ma znaczenie dla bezpieczeństwa: wszystko w JavaScripcie przeglądarki jest widoczne dla odwiedzającego, więc hasła, klucze API i sprawdzanie cen należą do serwera.

Składnia obok siebie

Oba języki wyglądają podobnie, bo oba zapożyczają z C: nawiasy klamrowe, if, for, while, function, return. Różnice tkwią w szczegółach:

Oto funkcja z callbackiem w 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";

I w JavaScripcie, gdzie map i filter to metody tablicy:

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(", "));

Operator +: klasyczna pułapka

W JavaScripcie + zarówno dodaje liczby, jak i łączy łańcuchy, więc łańcuch w dowolnym miejscu zamienia dodawanie w konkatenację. PHP trzyma te operacje osobno: + zawsze dodaje, a . zawsze łączy.

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

Oba języki mają też luźne == i ścisłe ===. Rada jest w obu ta sama: używaj ===, chyba że świadomie porównujesz różne typy.

Przekazywanie danych z PHP do JavaScriptu

PHP wykonuje się pierwszy, więc może wpisać dane prosto w stronę, żeby użył ich JavaScript w przeglądarce. json_encode zamienia tablicę PHP w poprawny JavaScript:

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

Karta Output pokazuje wygenerowany skrypt z już wstawionymi danymi. Flaga JSON_HEX_TAG escapuje < i >, więc wartość zawierająca </script> nie zakończy skryptu przedwcześnie. Więcej o opcjach w json_encode.

W drugą stronę działa to przez HTTP: JavaScript w przeglądarce wywołuje fetch("/api/cart.php"), skrypt PHP się wykonuje i odpowiada JSON-em:

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

Gdy JavaScript działa na serwerze przez Node.js, porównanie staje się prawdziwym wyborem.

Model PHP wybacza błędy: błąd lub wyciek pamięci dotyczy tylko jednego żądania, a każde żądanie zaczyna od czystej karty. Model Node może trzymać stan i otwarte połączenia, co pasuje do czatu i dashboardów na żywo, ale awaria albo blokująca pętla dotyka każdego użytkownika tego procesu.

Czego się uczyć

JavaScript będzie Ci potrzebny na każdej interaktywnej stronie, bo to jedyny język, który uruchamiają przeglądarki. Pytanie brzmi, co działa na serwerze:

• Ucz się PHP jako następnego, jeśli chcesz pracować z WordPressem, Laravelem albo licznymi istniejącymi stronami w PHP, albo jeśli chcesz najprościej postawić dynamiczną stronę na tanim hostingu. Zacznij od tego, czym jest PHP.
• Zostań przy JavaScripcie (Node.js), jeśli chcesz jednego języka dla całego stosu albo budujesz funkcje czasu rzeczywistego.

Typowa ścieżka to HTML i CSS, potem JavaScript w przeglądarce, potem jeden język serwerowy. Niezależnie od wybranego języka serwerowego formularze, sesje, bazy danych i API w JSON opierają się na tych samych zasadach HTTP, więc wiedza się przenosi.