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

PHP ile desteklenen tam WordPress, WebAssembly ile yalnızca tarayıcıda çalışır.

Adam Zieliński
Thomas Nattestad
Thomas Nattestad
X

WordPress Playground'u ilk gördüğünüzde, renkli arka plan dışında sıradan bir site gibi görünür. Her şey olabilir. Gerçekte gördüğünüz şey, PHP ve veritabanı da dahil olmak üzere doğrudan tarayıcınızda çalışan tüm WordPress teknoloji yığınıdır.

Bu yayında Adam Zieliński (WordPress Playground yöneticisi) ve Thomas Nattestad (V8 Ürün Müdürü) şu konuları ele alıyor:

  • WordPress Playground, WordPress geliştiricisi olarak size nasıl yardımcı olabilir?
  • İşleyiş şekli.
  • Bu durum WordPress'in geleceği için ne anlama geliyor?

WordPress'i yüklemeden kullanma, uygulamanıza yerleştirme ve hatta JavaScript ile kontrol etme

playground.wordpress.net adresinde yerleşik olarak bulunan WordPress'i ücretsiz olarak kullanabilir ve özelleştirebilirsiniz. Bu site tamamen tarayıcınızda bulunduğundan ve başka hiç kimse tarafından ziyaret edilemediğinden, ödemeniz gereken bulut altyapısı ve destek yoktur. Ayrıca bu durum geçicidir. Sayfayı yenilediğinizde bu öğe kaybolur. Prototip oluşturmak, eklentileri denemek ve fikirleri hızlıca keşfetmek için bu sitelerden istediğiniz kadarını alabilirsiniz.

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

phpinfo sayfasına gidin.

WordPress Playground, WordPress'i kullanmanın tamamen yeni bir yoludur. Ancak tüm gücünden yararlanmak için WordPress Playground'u uygulamanıza dahil etmeniz gerekir. Bunun en kolay yolu, WordPress Playground'u bir <iframe> içine yerleştirip sorgu parametreleri API'sini kullanarak yapılandırmaktır. Resmi vitrin bu işlevi görür. Örneğin, Pendant temasını ve Coblocks eklentisini seçtiğinizde, yerleşik iFrame https://playground.wordpress.net/?theme=pendant&plugin=coblocks adresini gösterecek şekilde güncellenir.

WordPress Playground vitrini.

Iframe, başlangıç için kolay bir yöntemdir 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ü bir API de mevcuttur.

WordPress Playground JavaScript istemcisi, yerleştirilmiş site üzerinde tam kontrol sağlar

@wp-playground/client npm paketi üzerinden sunulan tam API'yi kullanarak dosya sistemi ve PHP dahil olmak üzere WordPress sitesinin tamamını kontrol edebilirsiniz. Aşağıdaki örnekte bu işlevin nasıl kullanılacağı gösterilmektedir. Daha fazla örnek için etkileşimli eğitime 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 kullanma

WordPress Playground tek bir birim değildir. WebAssembly PHP, WordPress'ten bağımsız olarak yayınlanır ve ayrı olarak da kullanabilirsiniz. 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'u kullanabilirsiniz. Adam, bu WP_HTML_Tag_Processor eğiticisine etkileşimli PHP snippet'leri eklemek için ilkini kullandı. Bu özelliği nasıl kullanacağınıza dair bir önizleme aşağıda verilmiştir:

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 bu nasıl çalışır? diye düşünüyor olabilirsiniz. Bu sorunuzla önemli bir noktaya değindiniz. İçeriğine göz atarak bunu öğrenelim. Emniyet kemerinizi bağlayın.

WebAssembly PHP, SQL çevirmeni ve tarayıcı içi sunucu

PHP, WebAssembly ikili dosyası olarak çalışır

PHP, kutudan çıkar çıkmaz tarayıcıda çalışmaz. WordPress Playground, Emscripten'i kullanarak PHP yorumlayıcısını WebAssembly'de oluşturmak için özel bir ardışık düzen geliştirdi. Basit PHP oluşturmak çok karmaşık değildir. Bunun için burada bir işlev imzasını düzenlemek, orada bir yapılandırma değişkenini zorlamak ve birkaç küçük düzeltme uygulamak yeterlidir. Aşağıdaki adımları uygulayarak kendi mülkünüze sahip olabilirsiniz:

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 standart PHP derlemeleri tarayıcıda çok kullanışlı değildir. Sunucu yazılımı olarak PHP, istek gövdesini iletmek, dosya yüklemek veya php://stdin akışını doldurmak için bir JavaScript API'sine sahip değildir. WordPress Playground, sıfırdan bir tane oluşturmak zorunda kaldı. WebAssembly ikili dosyası, C dilinde yazılmış bir özel PHP API modülü ve writeFile() veya run() gibi yöntemleri gösteren bir JavaScript PHP sınıfı içerir.

Her PHP sürümü yalnızca statik bir .wasm dosyası olduğundan PHP sürüm değiştirici aslında oldukça sıkıcı bir işlemdir. Tarayıcıya, örneğin php_8_2.wasm yerine php_7_3.wasm dosyasını indirmesini söyler.

Veritabanı, SQL çeviri katmanı ile desteklenir

WordPress için MySQL gerekir. Ancak MySQL'in tarayıcıda çalıştırabileceğiniz bir WebAssembly sürümü yoktur. Bu nedenle WordPress Playground, PHP'yi yerel SQLite sürücüsüyle birlikte gönderir ve SQLite'yi kullanır.

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

Resmi SQLite Veritabanı Entegrasyonu eklentisi, perde arkasında tüm MySQL sorgularını yakalayıp SQLite lehçesiyle yeniden yazar. 2.0 sürümünde, SQLite'teki WordPress'in WordPress birim testi paketinin% 99'unu geçmesine olanak tanıyan yeni bir WordPress Playground destekli çeviri katmanı sunulur.

Web sunucusu tarayıcıda bulunur

Normal bir WordPress'te, Blog gibi bir bağlantıyı tıkladığınızda uzak arka uçtan blog sayfasını almak için bir HTTP isteği başlatılır. Ancak WordPress Playground'un uzak arka ucu yoktur. Tüm giden isteklere müdahale eden ve bunları ayrı bir Web İşleyici'de çalışan tarayıcı içi bir PHP örneğine aktaran bir Servis İşleyici'si vardır.

wp-admin kaynağını işaret eden bir iframe ile başlayan akış şeması. Bu iframe&#39;e yapılan çağrılar hizmet çalışanı tarafından yakalanır, çalışan iş parçacığında oluşturulur ve nihayetinde tarayıcı içi sunucu tarafından WordPress yanıtına çevrilir.

Ağ bağlantısı WebSocket'ler üzerinden desteklenir

WebAssembly programları, ağ oluşturma konusunda JavaScript API'lerini çağırmakla sınırlıdır. Bu, güvenlik özelliği olmasına rağmen bir zorluk da teşkil eder. PHP tarafından kullanılan düşük düzeyli, eşzamanlı ağ kodunu JavaScript'te bulunan yüksek düzeyli eşzamansız API'lerle nasıl desteklersiniz?

WordPress Playground için yanıt, TCP soket proxy'sine WebSocket, Asyncify ve php_select gibi PHP'nin derin iç kısımlarına yama uygulamayı içerir. Karmaşık bir süreçtir ancak ödülü de vardır. Node.js hedeflenen PHP derlemesi, web API'leri isteyebilir, composer paketlerini 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 motorunu kullanan bir Node.js sunucusunda da çalıştırabilirsiniz. Elbette StackBlitz ile Node.js'i doğrudan tarayıcıda da çalıştırabilirsiniz. Yani WebAssembly'e derlenmiş WordPress ve PHP'yi, tarayıcıda çalışan WebAssembly'e derlenmiş Node.js'de çalıştırabilirsiniz. WebAssembly, sunucusuz alanda da popülerlik kazanıyor ve gelecekte bu altyapıda da çalışabilir.

Gelecekte sıfır kurulum gerektiren, etkileşimli ve ortak çalışmaya uygun WordPress uygulamaları görebiliriz

Tüm kurulumların tamamlandığı, hemen çalışmaya başlayabileceğiniz bir kod düzenleyicide olduğunuzu hayal edin. Basit bir bağlantı paylaşarak Google Dokümanlar gibi uygulamalarda çok oyunculu düzenleme oturumu bile başlatabilirsiniz. İşiniz bittiğinde, yerel olarak hiçbir şey yüklemeden, oluşturduğunuz içerikleri çeşitli barındırma hizmetlerine tek tıklamayla sorunsuz bir şekilde dağıtabilirsiniz.

Bunlar sadece bir örnek. Etkileşimli eğitici içerikler, canlı eklenti denemeleri, hazırlık siteleri, uç sunucularda merkezi olmayan WordPress ve hatta telefonunuzda eklenti oluşturma gibi içerikler görebiliriz.

Gelecek heyecan verici ve siz de bu heyecana ortak olabilirsiniz. Fikirleriniz ve katkılarınız WordPress Playground'un oksijenidir. GitHub deposunu ziyaret edin, WordPress.org Slack kanalındaki #meta-playground kanalına göz atın ve adam@adamziel.com adresinden Adam ile iletişime geçebilirsiniz.