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

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

Adam Zieliński

Thomas Nattestad

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

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

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

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

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

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

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

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

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

WordPress की पूरी साइट को कंट्रोल किया जा सकता है. इसमें फ़ाइल सिस्टम और PHP, पूरे एपीआई का इस्तेमाल करके @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);

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

WordPress प्लेग्राउंड में कोई मोनोलिथ नहीं है. WebAssembly PHP का अपडेट जारी किया गया यह WordPress से अलग है और इसे अलग से भी इस्तेमाल किया जा सकता है. वेब के लिए, तो आप @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, एसक्यूएल अनुवादक, और ब्राउज़र में मौजूद एक सर्वर शामिल है

PHP पर WebAssembly बाइनरी के तौर पर चलता है

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

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

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

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

हालांकि, WordPress किसी दूसरे डेटाबेस पर कैसे काम कर सकता है?

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

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

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

नेटवर्किंग का इस्तेमाल WebSockets के ज़रिए किया जा सकता है

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

WordPress Playground के लिए, WebSocket से टीसीपी सॉकेट प्रॉक्सी के जवाब में, एसिंक्रोनस और डीप पैच करना php_select जैसे PHP इंटरनल. यह मुश्किल है, लेकिन इनाम भी है. कॉन्टेंट बनाने 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 चैनल. संपर्क करने के लिए, adam@adamziel.com पर एडमिशन से संपर्क करें.