PHP ou JavaScript: servidor, navegador e Node.js

O PHP roda no servidor: monta a página, envia o HTML pronto e para. O JavaScript roda no navegador do visitante, onde reage a cliques e altera a página depois que ela carregou; com Node.js ele também pode rodar no servidor. Então os dois são menos rivais do que parceiros: um site típico usa PHP (ou Node.js) no servidor e JavaScript no navegador.

Este código PHP roda no servidor. O navegador recebe só o que ele imprime, e a aba Page mostra esse 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>

Olhe a aba Output: não sobrou nada de PHP, só HTML. A mesma lista montada por JavaScript no navegador fica assim:

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

A versão em PHP envia uma página completa, que mecanismos de busca e celulares lentos leem na hora. A versão em JavaScript pode atualizar a lista depois sem recarregar, por exemplo quando o visitante remove um item.

Onde cada linguagem roda

A última linha importa para a segurança: tudo o que está no JavaScript do navegador fica visível ao visitante, então senhas, chaves de API e verificações de preço ficam no servidor.

Sintaxe lado a lado

As duas linguagens se parecem porque ambas herdam do C: chaves, if, for, while, function, return. As diferenças estão nos detalhes:

Aqui está uma função com callback em 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 em JavaScript, onde map e filter são métodos do 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(", "));

O operador +: a armadilha clássica

No JavaScript, + tanto soma números quanto junta strings, então uma string em qualquer lugar transforma a soma em concatenação. O PHP separa as duas coisas: + sempre soma e . sempre junta.

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

As duas linguagens também têm o == frouxo e o === estrito. O conselho é o mesmo nas duas: use ===, a menos que você queira comparar tipos diferentes.

Passar dados do PHP para o JavaScript

O PHP roda primeiro, então pode escrever dados direto na página para o JavaScript do navegador usar. json_encode transforma um array PHP em 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>

A aba Output mostra o script gerado com os dados já preenchidos. A flag JSON_HEX_TAG escapa < e >, então um valor contendo </script> não consegue encerrar o script antes da hora. Mais sobre as opções em json_encode.

O caminho inverso passa por HTTP: o JavaScript do navegador chama fetch("/api/cart.php"), o script PHP roda e responde com 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 ou Node.js no servidor

Quando o JavaScript roda no servidor com Node.js, a comparação vira uma escolha de verdade.

O modelo do PHP perdoa bastante: um bug ou vazamento de memória afeta só uma requisição, e cada requisição começa limpa. O modelo do Node pode manter estado e conexões abertas, o que combina com chat e dashboards ao vivo, mas uma falha ou um loop bloqueante afeta todos os usuários daquele processo.

Qual aprender

Você vai precisar de JavaScript em qualquer página web interativa, porque é a única linguagem que os navegadores executam. A questão é o que roda no servidor:

• Aprenda PHP em seguida se você quer trabalhar com WordPress, Laravel ou os muitos sites PHP que já existem, ou se quer o jeito mais simples de colocar um site dinâmico numa hospedagem barata. Comece por o que é PHP.
• Fique no JavaScript (Node.js) se você quer uma linguagem para a stack inteira ou está criando recursos em tempo real.

Um caminho comum é HTML e CSS, depois JavaScript no navegador, depois uma linguagem de servidor. Qualquer que seja a linguagem de servidor escolhida, formulários, sessões, bancos de dados e APIs JSON funcionam com as mesmas ideias de HTTP, então o conhecimento se transfere.