Bangun pengalaman WordPress dalam browser dengan WordPress Playground dan WebAssembly

WordPress versi lengkap yang didukung oleh PHP yang berjalan hanya di browser dengan WebAssembly

Adam Zieliński

Thomas Nattestad

Saat pertama kali melihat WordPress Playground, tampaknya seperti situs biasa–mungkin kecuali untuk latar belakang berwarna-warni. Apa saja tapi. Apa yang sebenarnya Anda lihat adalah seluruh tech stack WordPress, termasuk PHP dan {i>database<i}, yang berjalan langsung di browser Anda.

Dalam postingan ini, Adam Zieli berbagiki (pimpinan dari WordPress Playground) dan Thomas Nattestad (Manajer Produk untuk V8) mengeksplorasi:

• Cara WordPress Playground dapat membantu Anda sebagai developer WordPress.
• Cara kerjanya di balik layar.
• Artinya bagi masa depan WordPress.

Gunakan WordPress tanpa menginstal, menyematkannya di aplikasi, dan bahkan mengontrolnya dengan JavaScript

Anda dapat menggunakan dan menyesuaikan WordPress yang disematkan di playground.wordpress.net secara gratis. Ada tidak ada infrastruktur dan dukungan cloud yang harus dibayar, karena situs tersebut hidup di browser Anda–tidak ada orang lain yang dapat mengunjunginya. Hal ini juga bersifat sementara. Segera setelah Anda memuat ulang halaman, fungsi ini hilang. Anda bisa mendapatkan situs sebanyak mungkin yang Anda inginkan membuat prototipe, mencoba plugin, dan menjelajahi ide dengan cepat.

Anda bahkan bisa menggunakannya untuk menguji kode Anda di lingkungan yang berbeda menggunakan pengalih versi PHP dan WordPress bawaan:

WordPress Playground adalah cara yang benar-benar baru dalam menggunakan WordPress. Kekuatan penuhnya, namun, Anda hanya dapat membukanya dengan menyertakannya dalam aplikasi. Cara mudahnya adalah menyematkan WordPress Playground di <iframe> dan mengonfigurasinya menggunakan API parameter kueri. Itulah yang ditampilkan secara resmi fungsi tersebut. Misalnya, jika Anda memilih Tema liontin dan Plugin Coblocks, iframe tersemat diperbarui agar mengarah ke https://playground.wordpress.net/?theme=pendant&amp;plugin=coblocks.

iframe adalah cara mudah untuk memulai, tetapi juga terbatas pada opsi konfigurasi dasar. Jika Anda membutuhkan lebih dari itu, ada hal lain, API yang canggih.

Klien JavaScript WordPress Playground memungkinkan kontrol penuh atas situs tersemat

Anda dapat mengontrol seluruh situs WordPress, termasuk sistem file dan PHP, menggunakan API lengkap yang tersedia melalui NPM @wp-playground/client paket. Contoh berikut menunjukkan cara menggunakannya—centang tutorial interaktif untuk contoh lainnya:

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

Gunakan WebAssembly PHP bahkan tanpa WordPress

WordPress Playground bukan monolit. WebAssembly PHP dirilis terpisah dari WordPress dan Anda juga dapat menggunakannya secara terpisah. Untuk web, Anda dapat menggunakan npm @php-wasm/web yang dioptimalkan untuk ukuran paket yang rendah, dan di Node.js, Anda dapat menggunakan di @php-wasm/node yang memberikan ekstensi PHP lainnya. Adam menggunakan yang pertama untuk menambahkan cuplikan PHP interaktif ke tutorial WP_HTML_Tag_Processor ini. Berikut ini cuplikan cara menggunakannya:

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

Pada titik ini, Anda harus berpikir–bagaimana cara kerjanya? Pertanyaan bagus. Mari kita pelajari lebih dalam dan cari tahu. Kencangkan sabuk!

Di balik layar, ada WebAssembly PHP, penerjemah SQL, dan server dalam {i>browser<i}

PHP berjalan sebagai biner WebAssembly

PHP tidak hanya berfungsi di dalam browser. Playground WordPress mengembangkan pipeline khusus membuat penerjemah PHP ke WebAssembly menggunakan Emscripten. Membangun PHP yang biasa tidak terlalu rumit, hanya membutuhkan menyesuaikan tanda tangan fungsi di sini, memaksa variabel konfigurasi di sana, dan menerapkan beberapa patch kecil. Berikut cara membuatnya sendiri:

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

Namun, build PHP biasa tidak terlalu berguna di browser. Sebagai server software lain, PHP tidak memiliki JavaScript API untuk meneruskan isi permintaan, file, atau mengisi aliran php://stdin. WordPress Playground harus membangun satu layar dari awal. Biner WebAssembly dilengkapi dengan modul PHP API khusus yang ditulis dalam C dan Class PHP JavaScript yang mengekspos metode seperti writeFile() atau run().

Karena setiap versi PHP hanyalah file .wasm statis, versi PHP {i>switcher <i}sebenarnya cukup membosankan. Ini hanya memberitahu {i>browser<i} untuk mengunduh, untuk contoh, php_7_3.wasm alih-alih, misalnya, php_8_2.wasm.

Database didukung dengan lapisan terjemahan SQL

WordPress memerlukan MySQL. Namun, tidak ada versi WebAssembly dari MySQL yang dapat Anda jalankan di browser. Oleh karena itu, WordPress Playground mengirimkan PHP dengan driver SQLite native dan mengandalkan SQLite.

Namun, bagaimana cara WordPress berjalan di database yang berbeda?

Di balik layar, pejabat Integrasi Database SQLite plugin mencegat semua kueri MySQL dan menulisnya ulang dalam dialek SQLite. Versi 2.0 kapal rilis lapisan terjemahan baru yang didukung WordPress Playground yang memungkinkan WordPress di SQLite lulus 99% dari rangkaian pengujian unit WordPress.

Server web ada di dalam browser

Di WordPress biasa, mengklik link, misalnya Blog, akan memulai ke backend jarak jauh untuk mengambil halaman blog. Namun, WordPress Playground tidak memiliki backend jarak jauh. Alat ini memiliki Pekerja Layanan yang mencegat semua permintaan keluar dan meneruskannya ke PHP dalam browser instance yang berjalan dalam Pekerja Web.

Jaringan didukung melalui WebSockets

Dalam hal jaringan, program WebAssembly terbatas pada panggilan JavaScript API. Ini merupakan fitur keamanan, tetapi juga menghadirkan tantangan. Bagaimana Anda Anda mendukung kode jaringan sinkron tingkat rendah yang digunakan oleh PHP dengan API asinkron tingkat tinggi yang tersedia di JavaScript?

Untuk WordPress Playground, jawabannya melibatkan {i> WebSocket<i} ke proxy soket TCP, Asynchronousify, dan patching mendalam Internal PHP seperti php_select. Rumit, tapi ada manfaatnya. Tujuan Build PHP yang ditargetkan untuk Node.js dapat meminta API web, menginstal paket composer, dan bahkan terhubung ke server MySQL.

WordPress dapat digunakan di lebih banyak tempat dibandingkan browser

Karena sekarang WordPress dapat berjalan di WebAssembly, Anda juga dapat menjalankannya di Node.js servernya—ini adalah mesin V8 yang sama! Tentu saja dengan StackBlitz Anda juga dapat menjalankan Node.js langsung di browser, artinya Anda dapat menjalankan WordPress dan PHP dikompilasi ke WebAssembly, dieksekusi di Node.js, yang juga dikompilasi untuk WebAssembly sedang berjalan di browser. WebAssembly juga semakin populer di ruang tanpa server, dan di di masa depan, hal ini juga dapat berjalan di infrastruktur itu.

Masa depan dapat menghadirkan aplikasi WordPress tanpa penyiapan, interaktif, dan kolaboratif

Bayangkan langsung ke editor kode di mana Anda bebas untuk mendapatkan langsung membangun, dan semua penyiapan sudah selesai. Anda bahkan dapat membagikan link sederhana dan memulai sesi pengeditan multiplayer, seperti di Google Dokumen. Dan setelah selesai, hanya perlu sekali klik untuk men-deploy aplikasi Anda kreasi ke berbagai layanan hosting, semuanya tanpa perlu menginstal apa pun secara lokal.

Dan itu hanya sekilas. Kita mungkin melihat tutorial interaktif, demo {i>plugin<i} langsung, situs staging, WordPress terdesentralisasi di server edge, dan bahkan membangun plugin di ponsel Anda.

Masa depan itu menarik dan Anda bisa menjadi bagian darinya. Ide dan kontribusi Anda adalah oksigen dari WordPress Playground. Buka repositori GitHub, misalnya hai di #meta-playground Channel Slack WordPress.org, dan silakan untuk menghubungi Adam di [e-mail].