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

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

Adam Zieliński
Thomas Nattestad
Thomas Nattestad
X

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

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

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

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

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

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

דף המידע ב-phpinfo.

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

מצגת ב-WordPress Playground.

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

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

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

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 Playground הוא לא מונולית. WebAssembly PHP הושק בנפרד מ-WordPress, ואפשר להשתמש בו גם בנפרד. באינטרנט, אפשר להשתמש ב-npm @php-wasm/web עברו אופטימיזציה של חבילה בהתאם לגודל החבילה, וב-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 אין ממשק API של JavaScript להעברת גוף הבקשה, העלאה קבצים, או לאכלס את מקור הנתונים php://stdin. היה צורך ליצור את WordPress Playground מההתחלה. הקובץ הבינארי של WebAssembly כולל מודול ייעודי של PHP API שכתוב בדו מחלקה PHP של JavaScript חושף שיטות כמו writeFile() או run().

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

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

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

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

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

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

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

תרשים זרימה שמתחיל ב-iframe שמצביע על המשאב wp-admin, קריאות שאליהן קובץ השירות רוטט, מעובד בשרשור של העובד ובסופו של דבר מתורגמות לתגובה של WordPress על ידי השרת בדפדפן.

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

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

ב-WordPress Playground, התשובה קשורה לשרת proxy לשקע TCP ב-WebSocket, אסינכרוני ותיקון שגיאות עומק גורמים פנימיים של 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 גם צוברת פופולריות בתחום ללא שרת (serverless), זה יכול לרוץ גם בתשתית הזו.

בעתיד יכול להיות שיהיה אפשר להתקין אפליקציות WordPress, אינטראקטיביות ומבוססות-אפס

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

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

העתיד מרגש ואפשר לקחת בו חלק! הרעיונות והתרומות שלך הן החמצן ב-WordPress Playground. כניסה לאתר את המאגר ב-GitHub, שלום ב- #meta-playground ערוץSlack של WordPress.org, וזה לא הכול! ליצירת קשר עם Adam בכתובת adam@adamziel.com.