יצירת חוויות דפדפן ב-WordPress באמצעות מגרש המשחקים של WordPress ו-WebAssembly

גרסת WordPress המלאה מופעלת על ידי PHP ופועלת אך ורק בדפדפן עם WebAssembly

Adam Zieliński

Thomas Nattestad

כאשר רואים את WordPress Playground, הוא נראה כמו אתר רגיל - אולי למעט הרקע הצבעוני. זה הכול אבל לא. למעשה רואים בו סטאק תוכנות שלם של WordPress, כולל PHP ומסד נתונים, שפועל ישירות בדפדפן.

בפוסט הזה, אדם זילינסקי (מנהל קהילת WordPress Playground) ותומאס Nattestad (מנהל מוצר של V8) חוקרים:

• איך WordPress Playground יכול לעזור לכם כמפתחי WordPress.
• איך זה עובד מאחורי הקלעים.
• מה המשמעות עבור העתיד של WordPress.

משתמשים ב-WordPress ללא התקנה, מטמיעים אותה באפליקציה ואפילו שולטים בה באמצעות JavaScript

אתם יכולים להשתמש בפלטפורמת WordPress המוטמעת באתר playground.wordpress.net ולהתאים אותה אישית בחינם. אין תשתית ענן ותמיכה בתשלום, כי האתר הזה נמצא בדפדפן שלכם לגמרי - אף אחד אחר לא יכול להיכנס אליו. זה גם זמני. ברגע שמרעננים את הדף, הוא נעלם. אפשר ליצור כמה אתרים שרוצים כדי ליצור אב טיפוס, לנסות יישומי פלאגין ולבחון רעיונות במהירות.

אפשר אפילו להשתמש בהם כדי לבדוק את הקוד בסביבות שונות באמצעות מחליף הגרסאות המובנה של PHP ו-WordPress:

WordPress Playground הוא דרך חדשה לגמרי לשימוש ב-WordPress. עם זאת, העוצמה המלאה מתאפשרת רק אם כוללים אותה באפליקציה. הדרך הקלה היא להטמיע את WordPress Playground ב-<iframe> ולהגדיר אותו באמצעות ה-API של הפרמטרים של השאילתות. זה מה שהתצוגה הרשמית עושה. לדוגמה, כשאתם בוחרים את עיצוב התלייה ואת הפלאגין של Coblocks, ה-iframe המוטמע מתעדכן כך שיצביע על https://playground.wordpress.net/?theme=pendant&plugin=coblocks.

השימוש ב-iframe הוא דרך קלה להתחיל, אבל הוא מוגבל גם לאפשרות התצורה הבסיסית. אם אתם צריכים יותר מזה, יש API אחר וחזק יותר.

לקוח ה-JavaScript של WordPress Playground מאפשר שליטה מלאה באתר המוטמע

אפשר לשלוט בכל האתר ב-WordPress, כולל במערכת הקבצים וב-PHP, באמצעות ה-API המלא שזמין דרך חבילת ה-Npm @wp-playground/client. הדוגמה הבאה ממחישה איך להשתמש בו – תוכלו להיעזר במדריך האינטראקטיבי כדי לראות עוד דוגמאות:

import {
  connectPlayground,
  login,
  connectPlayground,
} from '@wp-playground/client';

const client = await connectPlayground(
  document.getElementById('wp'), // An iframe
  { loadRemote: 'https://playground.wordpress.net/remote.html' },
);
await client.isReady();

// Login the user as admin and go to the post editor:
await login(client, 'admin', 'password');
await client.goTo('/wp-admin/post-new.php');

// Run arbitrary PHP code:
await client.run({ code: '<?php echo "Hi!"; ?>' });

// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);

שימוש ב-WebAssembly ב-PHP גם בלי WordPress

מגרש המשחקים של WordPress אינו מונולית PHP WebAssembly מופץ בנפרד מ-WordPress, וגם אפשר להשתמש בו בנפרד. באינטרנט, ניתן להשתמש בחבילה @php-wasm/web npm שעברה אופטימיזציה לגודל חבילה נמוך, וב-Node.js תוכלו להיעזר בכתובת @php-wasm/node שמספקת יותר תוספי PHP. אדם השתמש בכלי הקודם כדי להוסיף קטעי קוד אינטראקטיביים של PHP למדריך הזה בנושא WP_HTML_Tag_Processor. הנה הצצה לאופן השימוש בכלי:

import { PHP } from '@php-wasm/web';
const php = await PHP.load('8.0', {
  requestHandler: {
    documentRoot: '/www',
  },
});

// Create and run a script directly
php.mkdirTree('/www');
php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);
php.run({ scriptPath: '/www/index.php' });

// Or use the familiar HTTP concepts:
const response = php.request({
  method: 'POST',
  relativeUrl: '/index.php',
  data: { name: 'John' },
});
console.log(response.text); // Hello John

בשלב הזה אתם בטח חושבים איך זה עובד? שאלה מצוינת! בואו נצלול פנימה ולגלות. אבזם!

מאחורי הקלעים יש את WebAssembly PHP, מתרגם SQL ושרת מובנה בדפדפן

PHP פועל בתור קובץ בינארי של WebAssembly

PHP לא פועל רק בדפדפן ללא התקנה. ב-WordPress Playground פיתחנו צינור עיבוד נתונים ייעודי כדי לפתח את המתרגם של PHP ל-WebAssembly באמצעות Emscripten. בניית PHP של וניל היא לא יותר מדי - צריך רק להתאים כאן חתימת פונקציה, לאכוף שם משתנה config ולהחיל כמה תיקונים קטנים. כך תוכלו לבנות אותה בעצמכם:

git clone https://github.com/WordPress/wordpress-playground
cd wordpress-playground && npm install
# Below, you can replace "8.2" with any other valid PHP version number.
npm run recompile:php:web:8.2

עם זאת, גרסאות build של PHP מסוג וניל אינן שימושיות במיוחד בדפדפן. כתוכנת שרת, ל-PHP אין ממשק JavaScript API שמאפשר להעביר את גוף הבקשה, להעלות קבצים או לאכלס את מקור הנתונים php://stdin. ב-WordPress Playground היה צורך ליצור אתר מאפס. הקובץ הבינארי של WebAssembly מגיע עם מודול ייעודי של PHP API שכתוב ב-C, וסיווג JavaScript PHP שחושף שיטות כמו writeFile() או run().

מכיוון שכל גרסת PHP היא רק קובץ .wasm סטטי, הכלי להחלפת גרסאות של PHP הוא למעשה די משעמם. הוא פשוט מורה לדפדפן להוריד, לדוגמה, php_7_3.wasm במקום php_8_2.wasm.

מסד הנתונים נתמך באמצעות שכבת תרגום SQL

כדי להשתמש ב-WordPress יש צורך ב-MySQL. עם זאת, אין גרסה של WebAssembly של MySQL שאפשר להריץ בדפדפן. לכן, WordPress Playground שולח את PHP עם מנהל ההתקן המקורי של SQLite, ונשען על SQLite.

אבל איך אפשר להפעיל את WordPress במסד נתונים אחר?

מאחורי הקלעים, הפלאגין הרשמי של השילוב של מסד הנתונים SQLite מיירט את כל השאילתות של MySQL ומשכתב אותן בדיאלקט של SQLite. גרסת 2.0 כוללת שכבת תרגום חדשה של WordPress Playground, שמאפשרת ל-WordPress ב-SQLite לעבור 99% מחבילת הבדיקה של יחידות ב-WordPress.

שרת האינטרנט נמצא בתוך הדפדפן

ב-WordPress רגיל, לחיצה על קישור (למשל Blog,) תפעיל בקשת HTTP לקצה העורפי המרוחק כדי לאחזר את הדף blog. עם זאת, ל-WordPress Playground אין קצה עורפי מרוחק. יש לו Service Worker שמיירט את כל הבקשות היוצאות ומעביר אותן למכונת PHP בדפדפן שפועלת ב-Web Worker נפרד.

הרשת נתמכת באמצעות WebSockets

בכל הנוגע לרשתות, תוכניות WebAssembly מוגבלות לקריאה לממשקי API של JavaScript. זהו אמצעי בטיחות, אבל גם מהווה אתגר. איך אתם תומכים בקוד רשת סינכרוני ברמה נמוכה שמשמש את PHP עם ממשקי ה-API האסינכרוניים ברמה גבוהה שזמינים ב-JavaScript?

ב-WordPress Playground, התשובה כוללת הוספת שרת proxy מסוג WebSocket לשקע TCP, Asyncify ותיקון רכיבים פנימיים של PHP בעומק PHP כמו php_select. זה מורכב, אבל יש תגמול. גרסת ה-build של PHP שמטורגטת ל-Node.js יכולה לבקש ממשקי API לאינטרנט, להתקין חבילות של מלחין ואפילו להתחבר לשרת MySQL.

אפשר להשתמש ב-WordPress במקומות רבים יותר מאשר בדפדפן

מאחר ש-WordPress יכולה לפעול עכשיו ב-WebAssembly, אפשר גם להריץ אותה בשרת של Node.js – זה אותו מנוע V8! כמובן שבעזרת StackBlitz אפשר גם להריץ את Node.js ישירות בדפדפן, כלומר אפשר להריץ את WordPress ו-PHP הידור של WebAssembly ולבצע ב-Node.js, שגם הוא מקודר ל-WebAssembly שפועל בדפדפן. הפופולריות של WebAssembly גם מדהימה מאוד בתחום ללא שרת, ובעתיד היא תוכל להופיע גם בתשתית הזו.

העתיד עלול להיות ללא התקנה, אפליקציות אינטראקטיביות ושיתוף פעולה של WordPress

נניח שאתם נכנסים ישירות לעורך קוד, שבו אתם יכולים להתחיל לפתח מיד, כשכל ההתקנה מסתיימת. תוכלו אפילו לשתף קישור פשוט ולהתחיל סשן עריכה רב-משתתפים, כמו ב-Google Docs. כשתסיימו, נדרשת רק לחיצה אחת כדי לפרוס בצורה חלקה את היצירות במגוון שירותי אירוח – בלי להתקין שום דבר באופן מקומי.

וזו רק הצצה קטנה! אנחנו עשויים לראות מדריכים אינטראקטיביים, הדגמות של יישומי פלאגין פעילים, אתרים לסביבת Staging, רכיבי WordPress מבוזרים בשרתי קצה ואפילו פיתוח של יישומי פלאגין בטלפון.

העתיד מרגש, ואתם יכולים לקחת חלק בו! הרעיונות והתרומות שלכם הם החמצן ב-WordPress Playground. אתם יכולים להיכנס אל מאגר GitHub, למשל ב- #meta-playground בערוץ WordPress.org Slack, וליצור קשר עם Adam בכתובת [e-mail].