PHP или JavaScript: сервер, браузер и Node.js

PHP работает на сервере: собирает страницу, отправляет готовый HTML и завершается. JavaScript работает в браузере посетителя, где реагирует на клики и меняет страницу после загрузки; с Node.js он может работать и на сервере. Так что эти языки не столько соперники, сколько партнёры: типичный сайт использует PHP (или Node.js) на сервере и JavaScript в браузере.

Этот PHP-код выполняется на сервере. Браузер получает только то, что он напечатал, а вкладка Page показывает результат:

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

Посмотрите на вкладку Output: PHP там не осталось, только HTML. Тот же список, собранный JavaScript в браузере, выглядит так:

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

Версия на PHP отправляет полную страницу, которую поисковики и медленные телефоны читают сразу. Версия на JavaScript может обновить список позже без перезагрузки, например когда посетитель удаляет товар.

Где выполняется каждый язык

Последняя строка важна для безопасности: всё, что есть в браузерном JavaScript, видно посетителю, поэтому пароли, API-ключи и проверки цен должны быть на сервере.

Синтаксис рядом

Языки похожи, потому что оба заимствуют у C: фигурные скобки, if, for, while, function, return. Различия в деталях:

Вот функция с колбэком на 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";

И на JavaScript, где map и filter это методы массива:

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

Оператор +: классическая ловушка

В JavaScript + и складывает числа, и склеивает строки, поэтому одна строка превращает сложение в конкатенацию. PHP разделяет эти действия: + всегда складывает, а . всегда склеивает.

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

В обоих языках также есть нестрогое == и строгое ===. Совет одинаковый: используйте ===, если не собираетесь сравнивать значения разных типов.

Передача данных из PHP в JavaScript

PHP выполняется первым, поэтому может записать данные прямо в страницу, чтобы ими воспользовался JavaScript в браузере. json_encode превращает массив PHP в корректный 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>

Вкладка Output показывает сгенерированный скрипт с уже подставленными данными. Флаг JSON_HEX_TAG экранирует < и >, так что значение с </script> не сможет преждевременно закрыть скрипт. Подробнее об опциях в json_encode.

В обратную сторону данные идут через HTTP: браузерный JavaScript вызывает fetch("/api/cart.php"), PHP-скрипт выполняется и отвечает 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 или Node.js на сервере

Когда JavaScript работает на сервере через Node.js, сравнение превращается в настоящий выбор.

Модель PHP прощает ошибки: баг или утечка памяти затрагивают только один запрос, и каждый запрос начинается с чистого листа. Модель Node позволяет держать состояние и соединения открытыми, что подходит для чатов и живых дашбордов, но сбой или блокирующий цикл затрагивает всех пользователей этого процесса.

Что учить

JavaScript понадобится для любой интерактивной веб-страницы, потому что это единственный язык, который выполняют браузеры. Вопрос в том, что будет работать на сервере:

• Учите PHP следующим, если хотите работать с WordPress, Laravel или множеством существующих PHP-сайтов, или если нужен самый простой способ разместить динамический сайт на недорогом хостинге. Начните с того, что такое PHP.
• Оставайтесь с JavaScript (Node.js), если хотите один язык на весь стек или делаете функции реального времени.

Частый путь такой: HTML и CSS, потом JavaScript в браузере, потом один серверный язык. Какой бы серверный язык вы ни выбрали, формы, сессии, базы данных и JSON API работают на одних и тех же идеях HTTP, так что знания переносятся.