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. والفروق في التفاصيل:

هذه دالة مع دالة رد نداء (callback) بلغة 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 بعد ذلك إذا أردت العمل مع ووردبريس أو Laravel أو مواقع PHP الكثيرة الموجودة، أو إذا أردت أبسط طريقة لوضع موقع ديناميكي على استضافة رخيصة. ابدأ بـ ما هي PHP.
• ابقَ مع JavaScript (Node.js) إذا أردت لغة واحدة للمنظومة كلها أو كنت تبني ميزات آنية.

المسار الشائع هو HTML وCSS، ثم JavaScript في المتصفح، ثم لغة خادم واحدة. وأيًا كانت لغة الخادم التي تختارها، فالنماذج والجلسات وقواعد البيانات وواجهات JSON تعمل على أفكار HTTP نفسها، لذا تنتقل المعرفة معك.