WordPress lengkap yang didukung oleh PHP yang hanya berjalan di browser dengan WebAssembly
Saat Anda pertama kali melihat WordPress Playground, tampaknya situs ini seperti situs biasa, kecuali karena latar belakangnya yang penuh warna. Tidak apa-apa, tapi. Yang sebenarnya Anda lihat adalah seluruh tech stack WordPress, termasuk PHP dan database, yang berjalan langsung di browser Anda.
Dalam postingan ini, Adam Zieli Anski (pimpinan di WordPress Playground) dan Thomas Nattestad (Product Manager untuk V8) membahas:
- Cara WordPress Playground dapat membantu Anda sebagai developer WordPress.
- Cara kerjanya di balik layar.
- Artinya bagi masa depan WordPress.
Gunakan WordPress tanpa penginstalan, sematkan di aplikasi, dan bahkan kontrol dengan JavaScript
Anda dapat menggunakan dan menyesuaikan WordPress yang disematkan di playground.wordpress.net secara gratis. Tidak ada infrastruktur cloud dan dukungan yang perlu dibayar, karena situs tersebut sepenuhnya ada di browser Anda–tidak ada orang lain yang dapat mengunjunginya. Data ini juga bersifat sementara. Segera setelah Anda menyegarkan laman, laman akan hilang. Anda bisa mendapatkan situs tersebut sebanyak yang diinginkan untuk membuat prototipe, mencoba plugin, dan menjelajahi ide dengan cepat.
Anda bahkan dapat menggunakannya untuk menguji kode di berbagai lingkungan menggunakan pengalih versi PHP dan WordPress bawaan:
WordPress Playground adalah cara yang benar-benar baru untuk menggunakan WordPress. Namun, kekuatan penuhnya
hanya tersedia dengan menyertakannya dalam aplikasi Anda. Cara mudahnya adalah dengan menyematkan
WordPress Playground di <iframe> dan mengonfigurasinya menggunakan
API parameter kueri.
Itulah yang dilakukan acara resmi. Saat Anda memilih, misalnya, Tema Pendant dan
plugin Coblocks, iframe tersemat
akan diupdate agar mengarah ke
https://playground.wordpress.net/?theme=pendant&plugin=coblocks.
iframe adalah cara mudah untuk memulai, tetapi juga terbatas hanya pada opsi konfigurasi dasar. Jika Anda membutuhkan lebih dari itu, ada API lain yang lebih canggih.
Klien JavaScript Playground WordPress memungkinkan kontrol penuh atas situs tersemat
Anda dapat mengontrol seluruh situs WordPress, termasuk sistem file dan PHP, menggunakan API lengkap yang tersedia melalui paket npm @wp-playground/client. Contoh berikut menunjukkan cara menggunakannya. Baca tutorial interaktif untuk melihat lebih banyak contoh:
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 secara terpisah dari WordPress dan Anda juga dapat menggunakannya secara terpisah. Untuk web, Anda dapat menggunakan paket npm @php-wasm/web yang dioptimalkan untuk ukuran paket yang rendah, dan di Node.js Anda dapat mengandalkan @php-wasm/node yang menyediakan lebih banyak ekstensi PHP. Adam menggunakan kode tersebut untuk menambahkan cuplikan PHP interaktif ke tutorial WP_HTML_Tag_Processor ini. Berikut sedikit gambaran 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 selami bagian-bagian dalamnya dan cari tahu. Pasang sabuk pengaman!
Di balik layar, ada WebAssembly PHP, penerjemah SQL, dan server dalam {i>browser<i}
PHP berjalan sebagai biner WebAssembly
PHP tidak hanya bisa langsung dikerjakan di {i>browser<i}. WordPress Playground mengembangkan pipeline khusus untuk mem-build penafsir PHP ke WebAssembly menggunakan Emscripten. Mem-build vanilla PHP tidak terlalu rumit. Anda hanya perlu menyesuaikan tanda tangan fungsi di sini, memaksa variabel konfigurasi di sana, dan menerapkan beberapa patch kecil. Berikut ini 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 software server, PHP tidak memiliki JavaScript API untuk meneruskan isi permintaan, mengupload file, atau mengisi aliran php://stdin. WordPress Playground harus membuatnya
dari awal. Biner WebAssembly dilengkapi dengan modul PHP API khusus yang ditulis di C dan class PHP JavaScript yang mengekspos metode seperti writeFile() atau run().
Karena setiap versi PHP hanyalah file .wasm statis, pengalih versi PHP sebenarnya cukup membosankan. Kode ini hanya memberi tahu browser untuk mendownload,
misalnya, php_7_3.wasm, bukan php_8_2.wasm.
Database didukung dengan lapisan terjemahan SQL
WordPress memerlukan MySQL. Namun, tidak ada versi WebAssembly MySQL yang dapat Anda jalankan di browser. Oleh karena itu, WordPress Playground mengirimkan PHP dengan driver SQLite native dan mengandalkan SQLite.
Namun, bagaimana WordPress dapat berjalan di database yang berbeda?
Di balik layar, plugin Integrasi Database SQLite resmi mencegat semua kueri MySQL dan menulisnya ulang dalam dialek SQLite. Rilis 2.0 mengirimkan lapisan terjemahan baru yang berdasarkan WordPress Playground yang memungkinkan WordPress di SQLite lulus 99% dari rangkaian pengujian unit WordPress.
Server web ada di dalam {i>browser<i}
Pada WordPress reguler, mengklik link, misalnya Blog, akan memulai permintaan HTTP ke backend jarak jauh untuk mengambil halaman blog. Namun, WordPress
Playground tidak memiliki backend jarak jauh. Fungsi ini memiliki
Pekerja Layanan
yang mencegat semua permintaan keluar dan meneruskannya ke instance PHP dalam browser
yang berjalan di
Pekerja Web terpisah.
Jaringan didukung melalui WebSockets
Dalam hal jaringan, program WebAssembly dibatasi untuk memanggil JavaScript API. Ini bukan hanya fitur keamanan, tetapi juga menghadirkan tantangan. Bagaimana cara mendukung kode jaringan sinkron tingkat rendah yang digunakan oleh PHP dengan API asinkron tingkat tinggi yang tersedia di JavaScript?
Untuk WordPress Playground, jawabannya melibatkan proxy soket WebSocket ke TCP,
Asyncify, dan patch internal PHP
dalam seperti php_select. Sungguh rumit, tetapi pasti ada manfaatnya. Build PHP yang ditargetkan Node.js dapat meminta API web, menginstal paket composer, dan bahkan terhubung ke server MySQL.
WordPress dapat digunakan di lebih banyak tempat
Karena WordPress kini dapat berjalan di WebAssembly, Anda juga dapat menjalankannya di server Node.js—ini adalah mesin V8 yang sama. Tentu saja dengan StackBlitz, Anda juga dapat menjalankan Node.js langsung di browser, yang berarti Anda dapat menjalankan WordPress dan PHP yang dikompilasi ke WebAssembly, mengeksekusi di Node.js, yang juga dikompilasi ke WebAssembly yang berjalan di browser. WebAssembly juga makin populer di ruang serverless, dan di masa mendatang, WebAssembly juga dapat berjalan di infrastruktur tersebut.
Masa depan mungkin akan menghadirkan aplikasi WordPress tanpa penyiapan, interaktif, dan kolaboratif
Bayangkan langsung membuka editor kode di mana Anda dapat langsung mem-build aplikasi, dan semua penyiapannya sudah selesai. Anda bahkan dapat membagikan link sederhana dan memulai sesi pengeditan multiplayer, seperti di Google Dokumen. Setelah selesai, hanya perlu satu klik untuk men-deploy kreasi Anda ke berbagai layanan hosting dengan lancar, tanpa perlu menginstal apa pun secara lokal.
Dan itu hanya sekilas. Kami dapat menemukan tutorial interaktif, demo plugin live, situs staging, WordPress terdesentralisasi di server edge, dan bahkan pembuatan plugin di ponsel Anda.
Masa depan itu menarik dan Anda dapat menjadi bagian darinya! Ide dan kontribusi Anda adalah oksigen dari WordPress Playground. Kunjungi repositori GitHub, sapa saluran Slack WordPress.org, dan jangan ragu untuk menghubungi Adam di adam@adamziel.com.