WordPress Playground और WebAssembly की मदद से, ब्राउज़र में मौजूद WordPress की सुविधाओं को इस्तेमाल करने का अनुभव पाएं

PHP से चलने वाला पूरा WordPress सिर्फ़ WebAssembly के साथ ब्राउज़र में चल रहा है

Adam Zieliński

Thomas Nattestad

जब आपको पहली बार WordPress Playground दिखता है, तो यह एक आम साइट की तरह लगता है. शायद इसमें रंगीन बैकग्राउंड न हो. यह कुछ भी हो सकता है. आप असल में जो देख रहे हैं वह एक पूरा WordPress टेक्नोलॉजी स्टैक है. इसमें PHP और एक डेटाबेस शामिल है, जो सीधे आपके ब्राउज़र में चल रहा है.

इस पोस्ट में, एडम ज़िलिंस्की (WordPress प्लेग्राउंड के लीड) और थॉमस नेटेटैदाद (V8 के लिए प्रॉडक्ट मैनेजर) इनके बारे में एक्सप्लोर करते हैं:

• WordPress डेवलपर के तौर पर, WordPress Playground आपकी मदद कैसे कर सकता है.
• यह हुड के तहत कैसे काम करता है.
• WordPress के भविष्य पर इसका क्या असर होगा.

WordPress को इंस्टॉल किए बिना इस्तेमाल करें, उसे अपने ऐप्लिकेशन में एम्बेड करें, और JavaScript से उसे कंट्रोल भी करें

आपके पास, playground.wordpress.net पर एम्बेड किए गए WordPress को इस्तेमाल करने और उसे अपनी पसंद के मुताबिक बनाने का विकल्प है. पैसे चुकाने के लिए कोई क्लाउड इन्फ़्रास्ट्रक्चर और सहायता नहीं है, क्योंकि वह साइट पूरी तरह से आपके ब्राउज़र में ही मौजूद है. कोई और इस पर विज़िट नहीं कर सकता. यह कुछ समय के लिए भी होता है. जैसे ही आप पेज को रीफ़्रेश करते हैं, वह पेज हट जाता है. प्रोटोटाइप बनाने, प्लग इन आज़माने, और तेज़ी से आइडिया एक्सप्लोर करने के लिए, जितनी चाहें उतनी साइटें पाएं.

यहां तक कि आप बिल्ट-इन PHP और WordPress वर्शन स्विचर का इस्तेमाल करके अलग-अलग माहौल में अपने कोड का टेस्ट करने के लिए भी इस्तेमाल कर सकते हैं:

WordPress Playground, WordPress का इस्तेमाल करने का बिलकुल नया तरीका है. हालांकि, इसकी पूरी क्षमता सिर्फ़ आपके ऐप्लिकेशन में शामिल करने पर ही अनलॉक होती है. WordPress Playground को <iframe> में एम्बेड करने और क्वेरी पैरामीटर एपीआई का इस्तेमाल करके इसे कॉन्फ़िगर करने का आसान तरीका है. आधिकारिक शोकेस यही काम करता है. उदाहरण के लिए, पेंडंट थीम और Coblocks प्लगिन चुनने पर, एम्बेड किया गया iframe अपडेट हो जाता है और यह https://playground.wordpress.net/?theme=pendant&plugin=coblocks पर ले जाता है.

iframe शुरू करने का एक आसान तरीका है, लेकिन यह सिर्फ़ बुनियादी कॉन्फ़िगरेशन विकल्प तक ही सीमित है. अगर आपको इससे ज़्यादा एपीआई की ज़रूरत है, तो इसका एक और बेहतर एपीआई है.

WordPress प्लेग्राउंड JavaScript क्लाइंट, एम्बेड की गई साइट पर पूरा कंट्रोल चालू करता है

आपके पास @wp-playground/client npm पैकेज में उपलब्ध पूरे एपीआई का इस्तेमाल करके, फ़ाइल सिस्टम और PHP के साथ-साथ पूरी WordPress साइट को कंट्रोल करने का विकल्प होता है. नीचे दिए गए उदाहरण में, इसके इस्तेमाल का तरीका बताया गया है. ज़्यादा उदाहरणों के लिए, इंटरैक्टिव ट्यूटोरियल देखें:

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);

WordPress के बिना भी WebAssembly PHP का इस्तेमाल करें

WordPress प्लेग्राउंड कोई मोनोलिथ नहीं है. WebAssembly PHP को WordPress से स्वतंत्र रूप से रिलीज़ किया गया है और आप इसका अलग से भी इस्तेमाल कर सकते हैं. वेब के लिए, आपके पास कम बंडल साइज़ के लिए ऑप्टिमाइज़ किए गए @php-wasm/web npm पैकेज का इस्तेमाल करने का विकल्प है. Node.js में, @php-wasm/node पर भरोसा किया जा सकता है, जिससे आपको ज़्यादा PHP एक्सटेंशन मिलते हैं. एडम ने इस WP_HTML_Tag_Processor ट्यूटोरियल में इंटरैक्टिव PHP स्निपेट जोड़ने के लिए पहले वाले वर्शन का इस्तेमाल किया. यहां इसे इस्तेमाल करने का तरीका बताया गया है:

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 ने Emscripten का इस्तेमाल करके, WebAssembly के लिए PHP अनुवादक बनाने के लिए खास पाइपलाइन बनाई. वनीला 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 के पास अनुरोध का मुख्य हिस्सा भेजने, फ़ाइलें अपलोड करने या php://stdin स्ट्रीम को भरने के लिए, JavaScript API नहीं होता. WordPress Playground को शुरू से एक बनाना पड़ा. WebAssembly बाइनरी में, C में लिखा गया डेडिकेटेड PHP API मॉड्यूल और JavaScript PHP क्लास का इस्तेमाल किया जाता है. इसमें writeFile() या run() जैसे तरीके शामिल होते हैं.

हर PHP वर्शन सिर्फ़ एक स्थिर .wasm फ़ाइल होती है, इसलिए PHP वर्शन स्विचर वास्तव में काफ़ी उबाऊ है. यह ब्राउज़र को डाउनलोड करने के लिए कहता है. उदाहरण के लिए, php_8_2.wasm के बजाय, php_7_3.wasm डाउनलोड करें.

डेटाबेस, SQL अनुवाद लेयर के साथ काम करता है

WordPress के लिए MySQL की ज़रूरत है. हालांकि, MySQL का कोई ऐसा WebAssembly वर्शन नहीं है जिसे आप ब्राउज़र में चला सकें. इसलिए, WordPress Playground, नेटिव SQLite ड्राइवर की मदद से PHP को शिप करता है. साथ ही, SQLite पर इस्तेमाल होता है.

लेकिन WordPress को किसी दूसरे डेटाबेस पर कैसे चलाया जा सकता है?

पर्दे के पीछे, SQLite Database इंटिग्रेशन का आधिकारिक प्लग इन, सभी MySQL क्वेरी को बीच में दिखाता है और उन्हें SQLite भाषा में दोबारा लिखता है. 2.0 रिलीज़ शिप करने के लिए, WordPress Playground की जानकारी देने वाली एक नई अनुवाद लेयर शामिल की गई है. इसकी मदद से, SQLite पर WordPress, WordPress यूनिट टेस्ट सुइट का 99% हिस्सा पास कर पाता है.

वेब सर्वर, ब्राउज़र के अंदर होता है

सामान्य WordPress में, किसी लिंक पर क्लिक करने से ब्लॉग पर क्लिक करके, blog पेज को फ़ेच करने के लिए रिमोट बैकएंड से एक एचटीटीपी अनुरोध भेजा जाएगा. हालांकि, WordPress प्लेग्राउंड का कोई रिमोट बैकएंड नहीं है. इसमें एक सर्विस वर्कर है, जो सभी आउटगोइंग अनुरोधों को इंटरसेप्ट करता है और उन्हें किसी अलग वेब वर्कर में चल रहे ब्राउज़र में चलने वाले PHP इंस्टेंस को पास करता है.

नेटवर्किंग, WebSockets के ज़रिए काम करती है

जब नेटवर्किंग की बात होती है, तो WebAssembly प्रोग्राम, JavaScript एपीआई को कॉल करने तक ही सीमित होते हैं. यह एक सुरक्षा सुविधा है, लेकिन एक चुनौती भी है. आप JavaScript में उपलब्ध उच्च-लेवल एसिंक्रोनस API के साथ PHP से इस्तेमाल किए जाने वाले निम्न-स्तरीय, सिंक्रोनस नेटवर्किंग कोड की सुविधा कैसे देते हैं?

WordPress Playground के लिए, इसके जवाब में WebSocket से टीसीपी सॉकेट प्रॉक्सी, Asyncify, और php_select जैसे डीप पीएचपी इंटरनल पैचिंग शामिल हैं. यह थोड़ा मुश्किल है, लेकिन इसके लिए भी एक इनाम है. Node.js को टारगेट करने वाला PHP बिल्ड वेब एपीआई के लिए अनुरोध कर सकता है, कंपोज़र पैकेज इंस्टॉल कर सकता है, और यहां तक कि MySQL सर्वर से कनेक्ट भी कर सकता है.

WordPress का इस्तेमाल, ब्राउज़र के मुकाबले और भी ज़्यादा जगहों पर किया जा सकता है

WordPress अब WebAssembly पर चल सकता है. इसलिए, इसे Node.js सर्वर पर भी चलाया जा सकता है. यह वही V8 इंजन है! हालांकि, StackBlitz के साथ आप सीधे ब्राउज़र में भी Node.js को चला सकते हैं. इसका मतलब है कि आपके पास WordPress और PHP को WebAssembly में कंपाइल करके, Node.js को एक्ज़ीक्यूट करके, ब्राउज़र में चल रहे WebAssembly में भी चलाया जा सकता है. बिना सर्वर वाले क्षेत्र में WebAssembly भी तेज़ी से लोकप्रिय हो रहा है. आने वाले समय में, यह उस इन्फ़्रास्ट्रक्चर पर भी चल सकता है.

आने वाले समय में, ज़ीरो-सेटअप वाले, इंटरैक्टिव, और साथ मिलकर काम करने वाले WordPress ऐप्लिकेशन उपलब्ध हो सकते हैं

सोचें कि सीधे एक कोड एडिटर पर जाएं, जहां पूरा सेटअप पूरा होने के बाद, तुरंत प्रोजेक्ट बनाया जा सकता है. आप एक आसान लिंक भी शेयर कर सकते हैं और मल्टीप्लेयर एडिटिंग सेशन शुरू कर सकते हैं, जैसे कि Google Docs. पूरा करने के बाद, सिर्फ़ एक क्लिक करके, अपने कॉन्टेंट को कई तरह की होस्टिंग सेवाओं पर डिप्लॉय किया जा सकता है. ये सेवाएं, अलग-अलग डिवाइसों पर इंस्टॉल किए बिना भी लागू होती हैं!

यह बस एक झलक है! हमें इंटरैक्टिव ट्यूटोरियल, लाइव प्लग इन डेमो, स्टेजिंग साइटें, एज सर्वर पर डीसेंट्रलाइज़्ड WordPress और यहां तक कि आपके फ़ोन पर प्लगिन बनाने का तरीका भी दिख सकता है.

भविष्य रोमांचक है और आप भी उसका हिस्सा बन सकते हैं! आपके विचार और योगदान WordPress Playground की ताकत हैं. GitHub रिपॉज़िटरी पर जाएं और #meta-playground WordPress.org Slack चैनल पर नमस्ते कहें. साथ ही, एडम से [e-mail] पर संपर्क करें.