WebAssembly ile yalnızca tarayıcıda çalışan, PHP tarafından desteklenen tam WordPress
WordPress Playground'u ilk gördüğünüzde, renkli arka plan dışında sıradan bir site gibi görünür. Başka bir şey söz konusu. Aslında baktığınız şey, PHP ve bir veritabanını da içeren ve doğrudan tarayıcınızda çalışan kapsamlı bir WordPress teknoloji yığınıdır.
Bu yayında Adam Zieliński (WordPress Playground lideri) ve Thomas Nattestad (V8 Ürün Müdürü) şunları keşfediyor:
- WordPress Playground, WordPress geliştiricisi olarak size nasıl yardımcı olabilir?
- Gelişmiş işleyiş şekli.
- Bu, WordPress'in geleceği için ne anlama geliyor?
WordPress'i yüklemeden kullanın, uygulamanıza yerleştirin, hatta JavaScript'le kontrol edin
playground.wordpress.net adresinde yerleşik WordPress'i ücretsiz olarak kullanabilir ve özelleştirebilirsiniz. Söz konusu site tamamen sizin tarayıcınızda bulunduğundan bulut altyapısı ve destek için ödeme yapmanız gerekmez. Başka hiç kimse ziyaret edemez. Aynı zamanda geçicidir. Sayfayı yeniler yenilemez kaybolur. Prototip oluşturmak, eklentileri denemek ve fikirleri hızla keşfetmek için bu sitelerden istediğiniz kadar edinebilirsiniz.
Ayrıca, yerleşik PHP ve WordPress sürüm değiştiriciyi kullanarak bu araçları kodunuzu farklı ortamlarda test etmek için de kullanabilirsiniz:
WordPress Playground, WordPress'i kullanmanın yepyeni bir yoludur. Bununla birlikte, WordPress Playground'un tam gücünden yararlanabilmek için bunu uygulamanıza eklemeniz gerekir. Bunun kolay yolu, WordPress Playground'u bir <iframe> içine yerleştirmek ve sorgu parametreleri API'sini kullanarak yapılandırmaktır.
Resmi vitrinin işlevi budur. Örneğin, Pendant teması ve Coblocks eklentisini seçtiğinizde yerleştirilmiş iframe, https://playground.wordpress.net/?theme=pendant&plugin=coblocks öğesini işaret edecek şekilde güncellenir.
iframe, başlamanın kolay bir yoludur, ancak yalnızca temel yapılandırma seçeneğiyle sınırlıdır. Daha fazlasına ihtiyacınız varsa daha güçlü başka bir API'dan yararlanabilirsiniz.
WordPress Playground JavaScript istemcisi, yerleştirilmiş site üzerinde tam denetim sağlar
@wp-playground/client npm paketi aracılığıyla kullanılabilen tam API'yi kullanarak dosya sistemi ve PHP dahil olmak üzere WordPress sitesinin tamamını kontrol edebilirsiniz. Aşağıdaki örnekte, bu aracın nasıl kullanılacağı gösterilmektedir. Daha fazla örnek için etkileşimli eğiticiye göz atın:
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 olmadan bile WebAssembly PHP'yi kullanın
WordPress Playground bir monolit değildir. WebAssembly PHP, WordPress'ten bağımsız olarak yayınlanır ve ayrı olarak kullanılabilir. Web için düşük paket boyutu için optimize edilmiş @php-wasm/web npm paketini kullanabilirsiniz. Node.js'de ise daha fazla PHP uzantısı sağlayan @php-wasm/node öğesine başvurabilirsiniz. Adam bu WP_HTML_Tag_Processor eğiticisine etkileşimli PHP snippet'leri eklemek için önceki kodu kullandı. Aşağıda, bunu nasıl kullanabileceğinize dair bir önizleme sunulmuştur:
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
Bu noktada kendinize şunu düşünmeniz gerekir: Bu yöntem nasıl işliyor? Bu sorunuzla önemli bir noktaya değindiniz. Şimdi işin içine girelim ve öğrenelim. Bağlayın!
Temelde, WebAssembly PHP, bir SQL çevirmeni ve tarayıcı içi sunucu vardır.
PHP, WebAssembly ikili programı olarak çalışır
PHP, hemen yeni tarayıcıda çalışmaz. WordPress Playground, Emscripten kullanarak PHP yorumlayıcısını WebAssembly'ye derlemek için özel bir ardışık düzen geliştirdi. Vanilla PHP oluşturmak çok karmaşık değildir. Sadece burada bir işlev imzası ayarlamak, burada bir yapılandırma değişkenini zorunlu kılmak ve birkaç küçük yama uygulamak yeterlidir. Kendi kendinize şu şekilde oluşturabilirsiniz:
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 vanilla PHP derlemeleri tarayıcıda çok kullanışlı değildir. Sunucu yazılımı olarak PHP'nin istek gövdesini iletecek, dosya yükleyecek veya php://stdin akışını dolduracak bir JavaScript API'si yoktur. WordPress Playground'un sıfırdan
bir tane derlemesi gerekti. WebAssembly ikili programı, C'de yazılmış özel bir PHP API modülü ve writeFile() veya run() gibi yöntemler sunan bir JavaScript PHP sınıfıyla birlikte sunulur.
Her PHP sürümü sadece statik bir .wasm dosyası olduğundan, PHP sürüm değiştiricisi aslında oldukça sıkıcıdır. Tarayıcıya, örneğin php_8_2.wasm yerine php_7_3.wasm dosyasını indirmesini söyler.
Veritabanı SQL çeviri katmanıyla destekleniyor
WordPress için MySQL gerekir. Ancak tarayıcıda çalıştırabileceğiniz MySQL'in WebAssembly sürümü yoktur. Bu nedenle WordPress Playground, PHP'yi yerel SQLite sürücüsüyle gönderir ve SQLite'tan yararlanır.
Peki, WordPress farklı bir veritabanında nasıl çalışabilir?
Resmi SQLite Veritabanı Entegrasyonu eklentisi arka planda tüm MySQL sorgularını engeller ve bunları SQLite dilinde yeniden yazar. 2.0 sürümü, SQLite üzerindeki WordPress'in WordPress birim test paketinin% 99'unu geçmesini sağlayan yeni bir WordPress Playground-bilgili çeviri katmanı sunar.
Web sunucusu tarayıcının içinde bulunur
Normal bir WordPress'te Blog gibi bir bağlantıyı tıklamak, blog sayfasını getirmek için uzak arka uca bir HTTP isteği başlatır. Ancak, WordPress Playground'un uzak bir arka ucu yoktur. Tüm giden isteklere müdahale eden ve bunları ayrı bir Web Worker'da çalışan tarayıcı içi PHP örneğine ileten bir Service Worker bulunur.
Ağ iletişimi WebSockets üzerinden desteklenir
Ağ iletişimi söz konusu olduğunda, WebAssembly programları JavaScript API'lerini çağırmakla sınırlıdır. Bu bir güvenlik özelliği olmakla beraber bazı zorlukları da beraberinde getirmektedir. PHP tarafından kullanılan alt düzey, eşzamanlı ağ iletişimi kodunu JavaScript'te bulunan üst düzey eşzamansız API'lerle nasıl destekliyorsunuz?
WordPress Playground için cevap, WebSocket'ten TCP'ye yuva proxy'si, Asyncify ve php_select gibi derin PHP dahili öğelerine yama uygulama içerir. Karmaşık bir süreç ancak bu işin bir ödülü var. Node.js hedefli PHP derlemesi web API'leri isteyebilir, oluşturucu paketleri yükleyebilir ve hatta bir MySQL sunucusuna bağlanabilir.
WordPress, tarayıcıdan daha fazla yerde kullanılabilir
WordPress artık WebAssembly'de çalışabildiğinden, aynı V8 motoru olan Node.js sunucusunda da çalıştırabilirsiniz. Elbette StackBlitz ile Node.js'yi doğrudan tarayıcıda da çalıştırabilirsiniz. Bu, WebAssembly'ye derlenmiş WordPress ve PHP'yi, aynı zamanda tarayıcıda çalışan WebAssembly'ye derlenen Node.js'de çalıştırabileceğiniz anlamına gelir. WebAssembly'nin sunucusuz alanda popülerliği de giderek artıyor. Gelecekte bu altyapı üzerinde de çalışabilir.
Kurulum gerektirmeyen, etkileşimli ve ortak çalışmaya dayalı WordPress uygulamaları gelecekte de olabilir
Diyelim ki doğrudan bir kod düzenleyiciyle uğraşıp kurulum işlemini tamamlayıp hemen geliştirme yapabiliyorsunuz. Hatta basit bir bağlantı paylaşabilir ve Google Dokümanlar'da olduğu gibi çok oyunculu düzenleme oturumu başlatabilirsiniz. İşiniz bittiğinde, oluşturduğunuz içerikleri çeşitli barındırma hizmetlerine sorunsuz bir şekilde dağıtmak için tek bir tıklama yeterli olacaktır. Üstelik yerel olarak hiçbir şey yüklemeden!
Üstelik bu sadece kısa bir bakış! Etkileşimli eğiticiler, canlı eklenti demoları, hazırlık siteleri, uç sunucularda merkezi olmayan WordPress, hatta telefonunuzda eklentiler bile görüntüleyebiliriz.
Gelecek heyecan verici ve siz de bunun bir parçası olabilirsiniz! Fikirleriniz ve katkılarınız WordPress Playground'un oksijenidir. GitHub deposunu ziyaret edin, #meta-playground WordPress.org Slack kanalında merhaba deyin ve adam@adamziel.com adresinden Adam ile iletişime geçin.