สร้างประสบการณ์การใช้งาน WordPress ในเบราว์เซอร์ด้วย WordPress Playground และ WebAssembly

WordPress เต็มรูปแบบที่ขับเคลื่อนโดย PHP ที่ทำงานในเบราว์เซอร์ด้วย WebAssembly เท่านั้น

Adam Zieliński

Thomas Nattestad

เมื่อเห็น WordPress Playground เป็นครั้งแรกจะดูเหมือนว่า เหมือนไซต์ทั่วไป - บางทีอาจมีแค่พื้นหลังหลากสี อะไรก็ได้ แต่ สิ่งที่คุณดูอยู่ก็คือกลุ่มเทคโนโลยี WordPress ทั้งหมด รวมทั้ง PHP และฐานข้อมูลที่ทำงานในเบราว์เซอร์ของคุณโดยตรง

ในโพสต์นี้ Adam Zieliński (หัวหน้าทีม WordPress Playground) และ Thomas 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 Playground ของ WordPress ทำให้คุณควบคุมเว็บไซต์ที่ฝังอยู่ได้อย่างเต็มที่

คุณสามารถควบคุมระบบไฟล์ 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 และคุณสามารถใช้แยกต่างหากได้ด้วย สำหรับเว็บ คุณสามารถใช้ @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 ได้พัฒนา ไปป์ไลน์เฉพาะ เพื่อสร้างล่าม PHP ไปยัง WebAssembly โดยใช้ Emscripten การสร้าง Vanilla PHP ไม่ใช่เรื่องที่ซับซ้อนเกินไป ใช้เวลาเพียงเท่านั้น ปรับลายเซ็นของฟังก์ชันที่นี่ บังคับใช้ตัวแปรการกำหนดค่า และกำลังใช้ แพตช์เล็กๆ 2-3 รายการ ต่อไปนี้คือวิธีที่คุณสามารถสร้างเทมเพลตดังกล่าวด้วยตนเอง

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

อย่างไรก็ตาม เวอร์ชัน Vanilla PHP ไม่ค่อยมีประโยชน์ในเบราว์เซอร์ ในฐานะเซิร์ฟเวอร์ ซอฟต์แวร์นั้น PHP ไม่มี JavaScript API สำหรับส่งต่อเนื้อหาของคำขอ หรือสร้างสตรีม php://stdin WordPress Playground ต้องสร้าง ตั้งแต่ต้น ไบนารี WebAssembly มาพร้อมกับ โมดูล PHP API เฉพาะ เขียนด้วยภาษา C และ a คลาส JavaScript PHP ที่ จะแสดงเมธอด เช่น writeFile() หรือ run()

เนื่องจากเวอร์ชัน PHP ทุกๆ เวอร์ชันเป็นเพียงไฟล์ .wasm แบบคงที่ เวอร์ชัน PHP Switcher ค่อนข้างน่าเบื่อ แต่เป็นการบอกเบราว์เซอร์ให้ดาวน์โหลด ตัวอย่างเช่น php_7_3.wasm แทนที่จะเป็น php_8_2.wasm

ฐานข้อมูลได้รับการสนับสนุนที่มีเลเยอร์การแปล SQL

WordPress ต้องใช้ MySQL แต่ไม่มี MySQL เวอร์ชัน WebAssembly ที่คุณเรียกใช้ในเบราว์เซอร์ได้ WordPress Playground จึงจัดส่ง PHP พร้อม ไดรเวอร์ SQLite ดั้งเดิมและ SQLite

แต่ WordPress จะทำงานในฐานข้อมูลอื่นได้อย่างไร

เบื้องหลังการทำงาน การผสานรวมฐานข้อมูล SQLite ปลั๊กอินจะสกัดกั้นการค้นหา MySQL ทั้งหมดและเขียนใหม่ในภาษา SQLite 2.0 ปล่อยเรือ เลเยอร์การแปลภาษาแบบใหม่จาก WordPress Playground ซึ่งทำให้ WordPress บน SQLite ผ่านชุดทดสอบหน่วย WordPress ได้ 99%

เว็บเซิร์ฟเวอร์อยู่ภายในเบราว์เซอร์

ใน WordPress ทั่วไป การคลิกที่ลิงก์ เช่น บล็อก จะเริ่มต้น HTTP คำขอไปยังแบ็กเอนด์ระยะไกลเพื่อดึงหน้า blog อย่างไรก็ตาม WordPress Playground ไม่มีแบ็กเอนด์ระยะไกล มี โปรแกรมทำงานของบริการ ที่สกัดกั้นคำขอขาออกทั้งหมดและส่งไปยัง PHP ในเบราว์เซอร์ อินสแตนซ์ที่ทำงานแยกต่างหาก Web Worker

เครือข่ายสนับสนุนผ่าน WebSockets

เมื่อพูดถึงเครือข่าย โปรแกรม WebAssembly จะจำกัดเฉพาะการเรียกใช้ JavaScript API นี่เป็นฟีเจอร์ด้านความปลอดภัย แต่ก็มีความท้าทายด้วย คุณจะรู้ได้อย่างไร คุณรองรับโค้ดเครือข่ายแบบซิงโครนัสระดับต่ำที่ใช้โดย PHP พร้อมกับ API แบบอะซิงโครนัสระดับสูงที่ใช้งานได้ใน JavaScript คืออะไร

สำหรับ WordPress Playground คำตอบคือ WebSocket ไปยังพร็อกซีซ็อกเก็ต TCP Asyncify และแพตช์ Deep Link ภายใน PHP เช่น php_select ถึงจะซับซ้อน แต่ก็มีรางวัลให้นะ บิลด์ PHP ที่กำหนดเป้าหมาย Node.js สามารถขอ Web API, ติดตั้งแพ็กเกจคอมโพสเซอร์ และ แม้แต่เชื่อมต่อกับเซิร์ฟเวอร์ MySQL

คุณสามารถใช้ WordPress ได้ในหลายที่กว่าเบราว์เซอร์

เนื่องจากตอนนี้ WordPress สามารถทำงานบน WebAssembly แล้ว คุณจึงเรียกใช้ใน Node.js ได้ด้วย เซิร์ฟเวอร์ - เป็นเครื่องมือ V8 เดียวกัน! แน่นอนว่า StackBlitz ช่วยให้คุณเรียกใช้ Node.js ในเบราว์เซอร์โดยตรง ซึ่งหมายความว่าคุณสามารถเรียกใช้ WordPress และ PHP คอมไพล์ไปยัง WebAssembly โดยดำเนินการใน Node.js ซึ่งยังคอมไพล์ไปยัง WebAssembly กำลังทำงาน ในเบราว์เซอร์ WebAssembly ยังได้รับความนิยมเพิ่มขึ้นเรื่อยๆ ในพื้นที่แบบ Serverless และใน บนโครงสร้างพื้นฐานดังกล่าวได้เช่นกัน

ในอนาคตอาจนำแอป WordPress แบบเป็นศูนย์ รองรับการทำงานร่วมกัน และโต้ตอบได้

ลองจินตนาการถึงการใช้ตัวแก้ไขโค้ด ที่มีเวลาว่างแล้ว สิ่งปลูกสร้างต่างๆ ในทันที ซึ่งการตั้งค่าทั้งหมดเสร็จเรียบร้อยแล้ว คุณยังสามารถแชร์ ลิงก์ง่ายๆ และเริ่มต้นเซสชันการแก้ไขผู้เล่นหลายคน เช่น ใน Google เอกสาร และ เมื่อดำเนินการเสร็จแล้ว ก็เพียงแค่คลิกครั้งเดียวเพื่อติดตั้งใช้งาน สร้างสรรค์ให้กับบริการโฮสติ้งที่หลากหลาย โดยไม่ต้องติดตั้งอะไรเลย ในประเทศ!

นี่เป็นเพียงตัวอย่างเท่านั้น เราอาจเห็นบทแนะนำแบบอินเทอร์แอกทีฟ การสาธิตปลั๊กอินแบบสด เว็บไซต์ทดลองใช้, WordPress แบบกระจายศูนย์บน Edge Server และแม้แต่การสร้าง ปลั๊กอินในโทรศัพท์

อนาคตเป็นสิ่งที่น่าตื่นเต้นและคุณก็เป็นส่วนหนึ่งในอนาคตได้ แนวคิดและการมีส่วนร่วมของคุณ คือออกซิเจนของ WordPress Playground ไปที่เว็บไซต์ ที่เก็บ GitHub เช่น หวัดดีใน #meta-playground ช่อง Slack ของ WordPress.org และโปรดทราบว่า เพื่อติดต่อ Adam ได้ที่ [e-mail]