با وردپرس Playground و WebAssembly تجربیات وردپرس درون مرورگر ایجاد کنید

وردپرس کامل با PHP که فقط در مرورگر با WebAssembly اجرا می شود

Adam Zieliński

Thomas Nattestad

وقتی برای اولین بار وردپرس Playground را می بینید، به نظر یک سایت معمولی است – شاید به جز پس زمینه رنگارنگ. این چیزی است جز. چیزی که شما در واقع به آن نگاه می کنید، کل پشته فناوری وردپرس، از جمله PHP و پایگاه داده است که مستقیماً در مرورگر شما اجرا می شود.

در این پست، Adam Zieliński (سرپرست WordPress Playground) و Thomas Nattestad (مدیر محصول برای V8) بررسی می کنند:

• چگونه WordPress Playground می تواند به شما به عنوان یک توسعه دهنده وردپرس کمک کند.
• چگونه زیر کاپوت کار می کند.
• معنای آن برای آینده وردپرس چیست.

از وردپرس بدون نصب استفاده کنید، آن را در برنامه خود جاسازی کنید و حتی آن را با جاوا اسکریپت کنترل کنید

می توانید از وردپرس تعبیه شده در playground.wordpress.net به صورت رایگان استفاده و سفارشی کنید. هیچ زیرساخت ابری و پشتیبانی برای پرداخت وجود ندارد، زیرا آن سایت به طور کامل در مرورگر شما زندگی می کند – هیچ کس دیگری نمی تواند از آن بازدید کند. آن هم موقتی است. به محض اینکه صفحه را رفرش کردید، از بین رفته است. می‌توانید به تعداد دلخواه از این سایت‌ها برای نمونه‌سازی، آزمایش پلاگین‌ها و کاوش سریع ایده‌ها دریافت کنید.

حتی می توانید از آنها برای آزمایش کد خود در محیط های مختلف با استفاده از تعویض کننده نسخه PHP و وردپرس داخلی استفاده کنید:

WordPress Playground یک روش کاملاً جدید برای استفاده از وردپرس است. با این حال، قدرت کامل آن تنها با گنجاندن آن در برنامه شما باز می شود. راه آسان این است که WordPress Playground را در <iframe> جاسازی کنید و آن را با استفاده از پارامترهای پرس و جو API پیکربندی کنید. این کاری است که ویترین رسمی انجام می دهد. هنگامی که برای مثال، تم آویز و افزونه Coblocks را انتخاب می کنید، iframe تعبیه شده به روز می شود تا به https://playground.wordpress.net/?theme=pendant&plugin=coblocks اشاره کند.

iframe یک راه آسان برای شروع است، اما فقط به گزینه پیکربندی اولیه محدود می شود. اگر به بیش از این نیاز دارید، API قدرتمندتر دیگری وجود دارد.

کلاینت WordPress Playground JavaScript کنترل کامل بر روی سایت تعبیه شده را امکان پذیر می کند

شما می توانید کل سایت وردپرس، از جمله سیستم فایل و 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 استفاده کنید

زمین بازی وردپرس یکپارچه نیست. WebAssembly PHP به طور مستقل از وردپرس منتشر شده است و می توانید از آن به طور جداگانه نیز استفاده کنید. برای وب، می‌توانید از بسته @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 وانیلی خیلی پیچیده نیست – فقط نیاز به تنظیم یک امضای تابع در اینجا ، مجبور کردن یک متغیر پیکربندی در آنجا و اعمال چند وصله کوچک دارد. در اینجا نحوه ساخت آن توسط خودتان آمده است:

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

با این حال، بیلدهای پی اچ پی وانیلی در مرورگر چندان کاربردی نیستند. به عنوان یک نرم افزار سرور، PHP یک API جاوا اسکریپت برای ارسال بدنه درخواست، آپلود فایل ها یا پر کردن جریان php://stdin ندارد. زمین بازی وردپرس مجبور شد یکی از آن ها را از ابتدا بسازد. باینری WebAssembly همراه با یک ماژول اختصاصی PHP API نوشته شده به زبان C و یک کلاس PHP جاوا اسکریپت است که متدهایی مانند writeFile() یا run() را نشان می دهد.

از آنجایی که هر نسخه PHP فقط یک فایل .wasm استاتیک است، تغییر دهنده نسخه PHP در واقع بسیار خسته کننده است. به سادگی به مرورگر می گوید که مثلاً php_7_3.wasm به جای مثلاً php_8_2.wasm دانلود کند.

پایگاه داده با یک لایه ترجمه SQL پشتیبانی می شود

وردپرس به MySQL نیاز دارد. با این حال، نسخه WebAssembly MySQL وجود ندارد که بتوانید آن را در مرورگر اجرا کنید. بنابراین وردپرس Playground PHP را با درایور اصلی SQLite ارسال می کند و به SQLite تکیه می کند.

اما چگونه وردپرس می تواند روی یک پایگاه داده متفاوت اجرا شود؟

در پشت صحنه، پلاگین رسمی SQLite Database Integration تمام پرس و جوهای MySQL را رهگیری می کند و آنها را به گویش SQLite بازنویسی می کند. نسخه 2.0 یک لایه ترجمه جدید با وردپرس Playground ارائه می کند که به وردپرس در SQLite اجازه می دهد تا 99٪ از مجموعه تست واحد وردپرس را بگذراند.

وب سرور در داخل مرورگر زندگی می کند

در یک وردپرس معمولی، با کلیک بر روی یک پیوند، مثلاً وبلاگ، یک درخواست HTTP به پشتیبان راه دور برای واکشی صفحه blog آغاز می شود. با این حال، وردپرس Playground هیچ پشتیبانی از راه دور ندارد. یک Service Worker دارد که تمام درخواست‌های خروجی را رهگیری می‌کند و آنها را به یک نمونه PHP درون مرورگر که در یک Web Worker جداگانه اجرا می‌شود، ارسال می‌کند.

شبکه از طریق WebSockets پشتیبانی می شود

وقتی صحبت از شبکه می شود، برنامه های WebAssembly به فراخوانی API های جاوا اسکریپت محدود می شوند. این یک ویژگی ایمنی است، اما یک چالش را نیز به همراه دارد. چگونه از کدهای شبکه سطح پایین و همزمان استفاده شده توسط PHP با APIهای ناهمزمان سطح بالا موجود در جاوا اسکریپت پشتیبانی می کنید؟

برای وردپرس Playground، پاسخ شامل یک پروکسی سوکت WebSocket به TCP، Asyncify و وصله داخلی های عمیق PHP مانند php_select است. این پیچیده است، اما یک پاداش وجود دارد. ساخت PHP با هدف Node.js می تواند API های وب را درخواست کند، بسته های آهنگساز را نصب کند و حتی به یک سرور MySQL متصل شود.

وردپرس را می توان حتی در مکان های بیشتری از مرورگر استفاده کرد

از آنجایی که وردپرس اکنون می‌تواند روی WebAssembly اجرا شود، می‌توانید آن را در سرور Node.js نیز اجرا کنید—این همان موتور V8 است! البته با StackBlitz می‌توانید Node.js را مستقیماً در مرورگر نیز اجرا کنید، به این معنی که می‌توانید وردپرس و پی‌اچ‌پی کامپایل شده در WebAssembly را اجرا کنید، در Node.js اجرا کنید، که همچنین در WebAssembly در حال اجرا در مرورگر کامپایل شده است. محبوبیت WebAssembly در فضای بدون سرور نیز در حال افزایش است و در آینده می‌تواند روی آن زیرساخت نیز اجرا شود.

آینده ممکن است برنامه های وردپرس بدون راه اندازی، تعاملی و مشارکتی را به ارمغان بیاورد

تصور کنید مستقیماً وارد یک ویرایشگر کد می‌شوید، جایی که می‌توانید با تکمیل تمام تنظیمات، فوراً ساخت‌وساز کنید. حتی می‌توانید یک پیوند ساده را به اشتراک بگذارید و یک جلسه ویرایش چند نفره را شروع کنید، مانند Google Docs. و وقتی کارتان تمام شد، تنها با یک کلیک می‌توانید به‌طور یکپارچه ساخته‌هایتان را در انواع سرویس‌های میزبانی مستقر کنید – همه اینها بدون نصب چیزی به صورت محلی!

و این فقط یک نگاه اجمالی است! ممکن است شاهد آموزش های تعاملی، دموهای زنده افزونه ها، سایت های استیجینگ، وردپرس غیرمتمرکز در سرورهای لبه و حتی ساخت پلاگین ها در گوشی شما باشیم.

آینده هیجان انگیز است و شما می توانید بخشی از آن باشید! ایده ها و مشارکت های شما اکسیژن زمین بازی وردپرس است. از مخزن GitHub دیدن کنید، در کانال #meta-playground WordPress.org Slack سلام کنید، و با خیال راحت با Adam در [e-mail] تماس بگیرید.