WordPress versi lengkap yang didukung oleh PHP yang berjalan hanya di browser dengan WebAssembly
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&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 adam@adamziel.com.