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

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

Adam Zieliński

Thomas Nattestad

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

ในโพสต์นี้ Adam Zieliński (หัวหน้าทีม WordPress Playground) และ Thomas Nattestad (ผู้จัดการผลิตภัณฑ์เวอร์ชัน 8) กำลังสำรวจเรื่องต่อไปนี้

• วิธีที่ WordPress Playground จะช่วยคุณในฐานะนักพัฒนาซอฟต์แวร์ WordPress
• วิธีการทํางานเบื้องหลัง
• ผลกระทบที่จะเกิดขึ้นในอนาคตของ WordPress

ใช้ WordPress โดยไม่ต้องติดตั้ง ฝังไว้ในแอป และแม้แต่ควบคุมด้วย JavaScript

คุณสามารถใช้และปรับแต่ง WordPress ที่ฝังอยู่ที่ playground.wordpress.net ได้ฟรี ไม่มีโครงสร้างพื้นฐานของระบบคลาวด์และการสนับสนุนที่จะจ่ายเงิน เนื่องจากเว็บไซต์นั้นอยู่ในเบราว์เซอร์ของคุณทั้งหมด ผู้อื่นจะเข้าชมไม่ได้ แต่เป็นกฎชั่วคราวเท่านั้น ทันทีที่คุณรีเฟรชหน้า หน้าจะหายไป คุณสามารถนำเว็บไซต์เหล่านี้มาสร้างต้นแบบ ลองใช้ปลั๊กอิน และสำรวจแนวคิดต่างๆ ได้อย่างรวดเร็วตามที่ต้องการ

คุณยังใช้โค้ดเหล่านี้เพื่อทดสอบโค้ดในสภาพแวดล้อมต่างๆ ได้โดยใช้ตัวสลับเวอร์ชัน WordPress และ WordPress ในตัว ดังนี้

WordPress Playground เป็นวิธีใหม่ในการใช้ WordPress แต่ระบบจะปลดล็อกด้วยความสามารถทั้งหมดได้ก็ต่อเมื่อรวมไว้ในแอปเท่านั้น วิธีง่ายๆ คือการฝัง WordPress Playground ใน <iframe> และกำหนดค่าโดยใช้ API พารามิเตอร์การค้นหา นั่นคือสิ่งที่Showcase อย่างเป็นทางการ ทำ ตัวอย่างเช่น เมื่อคุณเลือก ธีม Pendant และ ปลั๊กอิน Coblocks iframe ที่ฝัง จะได้รับการอัปเดตให้ชี้ไปยัง https://playground.wordpress.net/?theme=pendant&plugin=coblocks

iframe เป็นวิธีง่ายๆ ในการเริ่มต้น แต่ก็ยังใช้ได้เพียงตัวเลือกการกำหนดค่าพื้นฐานเท่านั้น ถ้าคุณต้องการมากกว่านั้น เรามี API อีกตัวหนึ่งที่มีประสิทธิภาพมากกว่า

ไคลเอ็นต์ JavaScript Playground ของ WordPress ช่วยให้ควบคุมเว็บไซต์ที่ฝังได้โดยสมบูรณ์

คุณสามารถควบคุมทั้งเว็บไซต์ 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 Playground ไม่ใช่หินขนาดใหญ่ WebAssembly PHP เปิดตัวเป็นอิสระ จาก WordPress และคุณสามารถใช้แยกกันได้เช่นกัน สำหรับเว็บ คุณอาจใช้แพ็กเกจ npm @php-wasm/web ซึ่งเพิ่มประสิทธิภาพสำหรับแพ็กเกจขนาดเล็ก และใน Node.js คุณสามารถใช้ @php-wasm/node ซึ่งมีส่วนขยาย PHP เพิ่มเติม Adam ใช้โซลูชันแรกเพื่อเพิ่มข้อมูลโค้ด 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 การสร้าง Vanilla PHP นั้นไม่ซับซ้อนเกินไป เพียงแค่ปรับลายเซ็นของฟังก์ชันที่นี่, บังคับใช้ตัวแปรการกำหนดค่าที่นั่น และใช้แพตช์เล็กๆ เพียงไม่กี่ครั้ง มาดูวิธีสร้างด้วยตัวเอง

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 และคลาส JavaScript PHP ที่มีเมธอดอย่างเช่น writeFile() หรือ run()

เนื่องจาก PHP ทุกเวอร์ชันเป็นเพียงไฟล์ .wasm แบบคงที่ ตัวสลับเวอร์ชัน PHP นี้จริงๆ แล้วก็ค่อนข้างน่าเบื่อ แต่จะบอกให้เบราว์เซอร์ดาวน์โหลด เช่น 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 ไม่มีแบ็กเอนด์ระยะไกล โดยมี Service Worker ที่สกัดกั้นคำขอขาออกทั้งหมดและส่งไปยังอินสแตนซ์ PHP ในเบราว์เซอร์ที่ทำงานใน Web Worker แยกต่างหาก

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

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

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

ใช้งาน WordPress ได้ในหลายแพลตฟอร์มกว่าเบราว์เซอร์

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

ในอนาคตอาจทำให้แอป WordPress แบบไม่ต้องตั้งค่า โต้ตอบ และทำงานร่วมกันได้ในอนาคต

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

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

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