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 בהמשך אם אתם רוצים לעבוד עם WordPress, עם Laravel או עם אתרי PHP הרבים שכבר קיימים, או אם אתם רוצים את הדרך הפשוטה ביותר להעלות אתר דינמי לאחסון זול. התחילו עם מה זה PHP.
• הישארו עם JavaScript (Node.js) אם אתם רוצים שפה אחת לכל המערכת או בונים יכולות בזמן אמת.

מסלול נפוץ הוא HTML ו-CSS, אחר כך JavaScript בדפדפן, ואז שפת שרת אחת. איזו שפת שרת שלא תבחרו, טפסים, סשנים, מסדי נתונים ו-API של JSON עובדים על אותם רעיונות של HTTP, כך שהידע עובר.