WordPress Playground ve WebAssembly ile tarayıcı içi WordPress deneyimleri oluşturun

ilk gördüğünde WordPress Oyun Alanı, sıradan bir site gibi görünüyor – belki renkli arka plan dışında. Başka bir şey değil. Aslında baktığınız şey, doğrudan tarayıcınızda çalışan PHP ve bir veritabanı dahil olmak üzere eksiksiz bir WordPress teknoloji yığınıdır.

Bu yazıda, Adam Zieliński (WordPress Playground’un lideri) ve Thomas Nattestad (V8 Ürün Müdürü) şunları keşfediyor:

• WordPress Playground, bir WordPress geliştiricisi olarak size nasıl yardımcı olabilir?
• Kaputun altında nasıl çalışır.
• WordPress’in geleceği için ne anlama geliyor?

WordPress’i yüklemeden kullanın, uygulamanıza ekleyin ve hatta JavaScript ile kontrol edin #

Gömülü WordPress’i kullanabilir ve özelleştirebilirsiniz. oyun alanı.wordpress.net ücretsiz. Parası ödenecek bir bulut altyapısı ve desteği yok çünkü o site tamamen sizin tarayıcınızda yaşıyor, başka hiç kimse onu ziyaret edemez. Aynı zamanda geçicidir. Sayfayı yenilediğiniz anda, gitti. Prototip oluşturmak, eklentileri denemek ve hızlı bir şekilde fikir keşfetmek için bu sitelerden istediğiniz kadar alabilirsiniz.

Bunları, yerleşik PHP ve WordPress sürüm değiştiriciyi kullanarak farklı ortamlarda kodunuzu test etmek için bile kullanabilirsiniz:

WordPress Playground, WordPress’i kullanmanın tamamen yeni bir yoludur. Bununla birlikte, tam gücünün kilidi yalnızca uygulamanıza dahil edilerek açılır. Bunun kolay yolu, WordPress Playground’u bir &LTiframe> kullanarak yapılandırın ve sorgu parametreleri API’sı. işte bu resmi vitrin yapmak. örneğin öğesini seçtiğinizde, Kolye teması ve Coblock eklentisikatıştırılmış iframe, işaret edecek şekilde güncellenir https://playground.wordpress.net/?theme=pendant&plugin=coblocks.

iframe, başlamanın kolay bir yoludur, ancak aynı zamanda yalnızca temel yapılandırma seçeneğiyle sınırlıdır. Bundan daha fazlasına ihtiyacınız varsa, daha güçlü başka bir API var.

WordPress Playground JavaScript istemcisi, gömülü site üzerinde tam kontrol sağlar #

Dosya sistemi ve PHP dahil olmak üzere tüm WordPress sitesini, şu adreste bulunan tam API’yi kullanarak kontrol edebilirsiniz: @wp-oyun alanı/istemci npm paketi. Aşağıdaki örnek nasıl kullanılacağını gösterir—kontrol edin etkileşimli eğitim daha fazla örnek için:

import {
connectPlayground,
login,
connectPlayground,
} from '@wp-playground/client';
const client = await connectPlayground(
document.getElementById('wp'), // An iframe
{ loadRemote: ' },
);
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: '&LT?php echo "Hi!"; ?>' });
// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);

WebAssembly PHP’yi WordPress olmadan da kullanın #

WordPress Oyun Alanı bir yekpare değildir. WebAssembly PHP, WordPress’ten bağımsız olarak yayınlanır ve onu ayrı olarak da kullanabilirsiniz. Web için, @php-wasm/web Düşük bir paket boyutu için optimize edilmiş npm paketi ve Node.js’de güvenebileceğiniz @php-wasm/düğüm bu da daha fazla PHP uzantısı sağlar. Adam, öncekini etkileşimli PHP parçacıkları eklemek için kullandı. bu WP_HTML_Tag_İşlemci öğreticisi. İşte nasıl kullanılacağına dair kısa bir göz atalım:

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', `&LT?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

Bu noktada şunu düşünüyor olmalısınız:Bu nasıl çalışıyor ki? Harika soru! İç kısımlara dalalım ve öğrenelim. Kemer bağlamak!

Donanımın altında WebAssembly PHP, bir SQL tercümanı ve bir tarayıcı içi sunucu bulunur. #

PHP bir WebAssembly ikili dosyası olarak çalışır #

PHP kutudan çıkar çıkmaz yalnızca tarayıcıda çalışmaz. WordPress Playground bir geliştirdi özel boru hattı inşa etmek PHP yorumlayıcı kullanarak WebAssembly’a yazmak. Vanilya PHP’yi oluşturmak aşırı derecede karmaşık değildir; yalnızca alır burada bir işlev imzasını ayarlamak, orada bir yapılandırma değişkenini zorlamakve uygulama birkaç küçük yama. Bunu kendiniz nasıl oluşturabileceğiniz aşağıda açıklanmıştır:

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

Ancak, normal PHP yapıları tarayıcıda pek kullanışlı değildir. Bir sunucu yazılımı olarak PHP, istek gövdesini iletmek, dosyaları yüklemek veya doldurmak için bir JavaScript API’sine sahip değildir. php://stdin aktarım. WordPress Playground’un sıfırdan bir tane oluşturması gerekiyordu. WebAssembly ikili dosyası bir özel PHP API modülü C ile yazılmış ve JavaScript PHP sınıfı gibi yöntemleri ortaya çıkaran writeFile() veya run().

Çünkü her PHP versiyonu sadece statiktir. .wasm dosya, PHP sürüm değiştirici aslında oldukça sıkıcı. Tarayıcıya indirmesini söyler, örneğin, php_7_3.wasm söylemek yerine, php_8_2.wasm.

Veritabanı bir SQL çeviri katmanı ile desteklenir #

WordPress, MySQL gerektirir. Ancak, MySQL’in tarayıcıda çalıştırabileceğiniz bir WebAssembly sürümü yoktur. WordPress Playground bu nedenle PHP ile birlikte gelir yerel SQLite sürücüsü ve SQLite’a yaslanıyor.

Ancak WordPress farklı bir veritabanında nasıl çalışabilir?

Resmi makamlar, kamera arkası SQLite Veritabanı Entegrasyonu eklenti, tüm MySQL sorgularını yakalar ve bunları SQLite lehçesinde yeniden yazar. 2.0 sürüm gemileri yeni bir WordPress Playground bilgili çeviri katmanı bu, SQLite üzerinde WordPress’in WordPress birim test paketinin %99’unu geçmesine olanak tanır.

Web sunucusu tarayıcının içinde yaşar #

Normal bir WordPress’te, bir bağlantıya tıklayarak, diyelim ki Blog, getirmek için uzak arka uca bir HTTP isteği başlatırdı. blog sayfa. Ancak, WordPress Playground’un uzak arka ucu yoktur. bir var servis elemanı tüm giden istekleri yakalar ve bunları ayrı bir sunucuda çalışan bir tarayıcı içi PHP örneğine iletir. Web Çalışanı.

Ağ, WebSockets aracılığıyla desteklenir #

Ağ söz konusu olduğunda, WebAssembly programları JavaScript API’lerini çağırmakla sınırlıdır. Bu bir güvenlik özelliğidir, ancak aynı zamanda bir meydan okuma da sunar. PHP tarafından kullanılan düşük seviyeli, senkronize ağ kodunu JavaScript’te bulunan yüksek seviyeli eşzamansız API’lerle nasıl desteklersiniz?

WordPress Oyun Alanı için yanıt, WebSocket’tan TCP soket proxy’sine, Eşzamansızlaştırve derin PHP iç bileşenlerine yama uygulamak php_select. Karmaşık, ama bir ödül var. Node.js hedefli PHP yapısı, web API’leri isteyebilir, besteci paketleri kurabilir ve hatta bir MySQL sunucusuna bağlanabilir.

WordPress, tarayıcıdan daha fazla yerde kullanılabilir #

WordPress artık WebAssembly üzerinde çalışabildiğinden, onu bir Node.js sunucusunda da çalıştırabilirsiniz; bu aynı V8 motorudur! Elbette StackBlitz ile Node.js’yi doğrudan tarayıcıda da çalıştırabilirsiniz, yani WebAssembly için derlenmiş WordPress ve PHP’yi çalıştırabilir, Node.js’de çalıştırabilirsiniz, bu da yine WebAssembly için derlenmiştir tarayıcıda. WebAssembly, sunucusuz alanda da popülaritesini artırıyor ve gelecekte bu, bu altyapı üzerinde de çalışabilir.

Gelecek, sıfır kurulumlu, etkileşimli ve işbirlikçi WordPress uygulamaları getirebilir #

Tüm kurulum tamamlandıktan sonra hemen oluşturmaya başlamakta özgür olduğunuz bir kod düzenleyiciye doğrudan atladığınızı hayal edin. Hatta basit bir bağlantı paylaşabilir ve Google Dokümanlar’da olduğu gibi çok oyunculu bir düzenleme oturumu başlatabilirsiniz. İşiniz bittiğinde, kreasyonlarınızı çeşitli barındırma hizmetlerine sorunsuz bir şekilde dağıtmak yalnızca tek bir tıklama alır – üstelik yerel olarak hiçbir şey yüklemeden!

Ve bu sadece bir bakış! Etkileşimli öğreticiler, canlı eklenti demoları, hazırlık siteleri, uç sunucularda merkezi olmayan WordPress ve hatta telefonunuzda eklentiler oluşturabiliriz.

Gelecek heyecan verici ve sen de onun bir parçası olabilirsin! Fikirleriniz ve katkılarınız WordPress Playground’un oksijenidir. Ziyaret etmek GitHub deposu#meta-playground’da merhaba deyin WordPress.org Slack kanalıve adam@adamziel.com adresinden Adam ile iletişime geçmekten çekinmeyin.