WordPress Playground: WordPress yang Berjalan Sepenuhnya di Browser

 (developer.wordpress.org)
5 poin oleh GN⁺ 2023-07-15 | 1 komentar | Bagikan ke WhatsApp
  • WordPress Playground adalah alat online untuk bereksperimen dan belajar WordPress tanpa instalasi, dan halaman ini berperan sebagai hub dokumentasi resmi, bukan situs produk
  • Dokumentasi dibagi menjadi Documentation, Blueprints, Developers, dan API Reference, yang masing-masing memandu cara memulai, konfigurasi berbasis JSON, integrasi kode, dan referensi API
  • Pengguna dapat menyalakan situs WordPress baru dalam 5 menit, menguji blok, tema, dan plugin, atau menguji versi WordPress/PHP tertentu
  • Developer dapat memilih pendekatan yang sesuai dari Query API, Blueprints API, JavaScript API, dan memanfaatkan Playground sebagai lingkungan pengembangan lokal tanpa konfigurasi
  • Berjalan di dalam sandbox browser dan minim ketergantungan pada backend maupun autentikasi, sehingga cocok untuk demo cepat, prototipe, dan lingkungan eksperimen yang dibuat AI

Hub dokumentasi WordPress Playground

  • Situs web resmi Playground telah dipindahkan ke wordpress.org/playground/, dan halaman ini digunakan sebagai titik masuk dokumentasi
  • WordPress Playground adalah alat online untuk bereksperimen dan mempelajari WordPress
  • Dokumentasi terdiri dari empat hub
    • Documentation: pengenalan WordPress Playground, panduan memulai, dan titik masuk dokumentasi
    • Blueprints: dokumentasi file JSON untuk mengonfigurasi instance Playground
    • Developers: cara memanfaatkan Playground dari dalam kode
    • API Reference: referensi lengkap API yang diekspos oleh WordPress Playground

Memulai dan alur pengembangan

  • Pengguna baru dapat mulai cepat melalui Quick Start Guide untuk membuat situs WordPress baru, menguji blok, tema, dan plugin, serta menguji versi WordPress/PHP tertentu
  • Playground web instance membahas instance Playground yang disediakan di https://playground.wordpress.net/
  • Di About Playground, pengguna dapat melihat keamanan Playground, cara pemakaiannya, dan keterbatasan saat ini
    • Melalui dokumentasi Build, Test, Launch, pengguna dapat meninjau alur pemanfaatan Playground untuk pengembangan, validasi, dan peluncuran produk
  • Guides adalah kumpulan dokumentasi panduan langkah demi langkah dan cara penggunaan, sementara Links and resources adalah kumpulan materi terkait

Langkah pertama dan pemilihan API

Kontribusi dan pemanfaatan AI

  • WordPress Playground adalah proyek open source dan menerima kontribusi kode, desain, dokumentasi, serta triase
  • Playground dirancang untuk digunakan bersama agen coding AI dan alat berbasis AI
    • Berjalan sepenuhnya di sisi klien pada WebAssembly, tidak memerlukan autentikasi dan backend, serta tidak meninggalkan efek samping persisten di luar sandbox browser
    • Using Playground with AI agents: di Claude Code, Cursor, Gemini CLI, GitHub Copilot, dan lainnya, pengguna dapat memasang skill wp-playground untuk mendelegasikan eksekusi perintah
    • AI-readable site index: ringkasan llms.txt yang dapat dibaca mesin tentang fitur, API, dan dokumentasi Playground
    • AGENTS.md: panduan untuk agen coding AI yang berkontribusi pada codebase ini
  • WordPress Playground adalah perangkat lunak bebas di bawah GNU General Public License version 2 atau versi setelahnya, dan lisensi lengkap tersedia di LICENSE.md

Bacaan terkait

1 komentar

 
GN⁺ 2023-07-15
Opini Hacker News

  • Saya mencobanya di Firefox pada tablet Android murah; responsnya memang tidak instan, tetapi tidak jauh berbeda dengan menjalankan seluruh stack LAMP di instance cloud atau VPS yang lumayan, jadi cukup mengejutkan.
    Di dalamnya ada interpreter PHP lengkap, ribuan baris codebase WordPress, bahkan SQLite. Meski begitu, fakta bahwa ini cukup layak dipakai memang mengesankan.

    • Saya selalu merasa performa WordPress tidak banyak berbeda antara hardware kelas rendah dan kelas tinggi. Pada akhirnya sepertinya WordPress itu sendiri yang menjadi bottleneck.

  • Cara mereka membuat ini berjalan sangat modern: PHP dijalankan sebagai binary WebAssembly, MySQL digantikan oleh SQLite lewat plugin WordPress, dan web server diimplementasikan sebagai Service Worker JavaScript.

  • Dari kalimat “Playground mendukung aplikasi catatan untuk perangkat mobile, lingkungan pengujian otomatis, hingga demo WooCommerce yang berjalan di situs”, dua yang terakhir benar-benar masuk akal, tetapi gagasan membuat aplikasi mobile berbasis WordPress yang menjalankan PHP lewat WebAssembly di dalam browser membuat kepala terasa pusing.

  • WordPress sangat membelah selera HN. Satu pihak melihat WordPress sebagai alat pengganda nilai yang memungkinkan non-developer fokus pada pekerjaan utama tanpa memikirkan coding, sementara pihak lain membencinya karena codebase yang berantakan dan terpaku pada kode super-ekstensibel yang diformat sempurna, yang nyatanya hampir tidak akan dipakai siapa pun.
    WordPress menjalankan lebih dari separuh web. Ia mungkin bukan teknologi terbaik, bahkan mungkin teknologi terburuk, tetapi pelajaran yang terus luput dari banyak programmer adalah tidak ada yang peduli bagaimana sosis dibuat.

    • Untuk membuat situs utilitas kecil seperti situs band, saya sepenuhnya setuju dengan itu. Cukup taruh seadanya di hosting murah dan berharap bandnya bubar sebelum integrasi Google Calendar rusak.
      Namun, karena saya sedang menunda pekerjaan memindahkan SSO pihak ketiga dari situs WordPress lama yang berantakan ke situs WordPress baru yang juga berantakan, izinkan saya curhat sedikit: sebenarnya ada kelompok ketiga yang melakukan maintenance agar kelompok pertama tidak perlu peduli bagaimana sosis dibuat.
      Saya sudah melakukan pekerjaan seperti ini sekitar 14 tahun, meng-host sekitar 300 situs WordPress untuk universitas menengah, juga membangun dan memelihara situs .gov, serta membuat beberapa blok berbasis React di tiga pola yang sangat berbeda karena arah tim Gutenberg. Saya sudah melakukan semuanya, mulai dari deployment server, memperbaiki CSS untuk IE6, scraping CMS yang tidak ada dokumentasinya untuk memigrasikan ribuan halaman dan puluhan ribu gambar ke WordPress, menulis perintah WP-CLI, sampai membuat kode yang memaksa event kalender menyebar di multisite.
      Harus ada seseorang yang tahu bagaimana sosis dibuat, dan saya tahu. Karena itu saya juga tahu betapa rapuhnya tumpukan sampah bernama WordPress. Saya pernah menangani codebase yang benar-benar berguna dengan tooling yang lebih baik dan database yang bisa dipahami, dan saya juga tahu platform lain punya masalah, tetapi WordPress benar-benar buruk.
      Jadi saya tidak sungkan mencelanya. Saya benar-benar burnout, sampai terpikir untuk berhenti saja, tinggal di truk, dan bermain musik. Ini platform yang buruk, dan orang-orang juga tidak terlalu mau membayar untuk pekerjaan menjaga agar semuanya tetap berjalan. Pada akhirnya, ada orang-orang yang karena keadaan terus kembali ke WordPress seperti kembali ke gedung yang sedang terbakar, dan kebencian kolektif terhadap platform ini punya dasar yang kuat.
    • WordPress sangat bagus untuk kelompok pertama yang disebutkan tadi. Saya melihatnya mirip dengan alat seperti Excel, FileMaker, dan Visual Basic yang mendemokratisasi software dan membuatnya bisa diakses semua orang.
      Tentu saja alat-alat seperti ini punya keterbatasan dan masalah kualitas, dan sebagian pengguna pada akhirnya akan berhadapan dengan itu. Hal itu sendiri tidak apa-apa. Masalah muncul ketika para profesional diharapkan mengintegrasikan atau membangun sesuatu di atasnya. Orang-orang yang datang ke web developer membawa ekspektasi kualitas, masalah unik, dan kebutuhan tertentu, tetapi warisan WordPress menaruh terlalu banyak jebakan dan rintangan di depan tujuan itu, sehingga sering kali terasa seperti memasukkan pasak persegi ke lubang bundar. Hal serupa juga bisa dikatakan tentang CRM atau platform e-commerce umum.
    • Saya menganggap diri saya software engineer yang serius, tetapi untuk situs web perusahaan, saya memakai WordPress.
    • Mungkin bukan “pergi demi kode yang diformat sempurna dan super-scalable”, melainkan berhenti mengerjakan codebase yang tidak sempurna saat ini dan memulai proyek baru yang kelak akan sempurna.
    • Perpecahan ini tampaknya lebih dekat dengan perbedaan antara generasi baru developer full-stack JavaScript dan orang-orang yang belajar dengan PHP + MySQL.

  • Pada keynote State of the Word Desember 2022, rencananya ini akan dibahas cukup besar-besaran: https://wordpress.tv/2023/01/04/matt-mullenweg-state-of-the-...
    Sebagai engineer, melihatnya benar-benar berjalan dan memikirkan semua lapisan yang harus saling berinteraksi untuk itu cukup mengejutkan. Menarik melihatnya jadi topik di HN 6 bulan kemudian

    • Ini sangat menarik karena saya tertarik menjalankan hal-hal yang selama ini dianggap sebagai aplikasi “sisi server” di dalam browser. Terutama karena ini tampak seperti contoh pertama menjalankan SQLite di produk nyata, yang membuatnya makin menarik; sebelumnya saya hanya melihat demo mainan
      Setelah sedikit melihat kodenya, saya juga sadar bahwa saat ini saya hampir tidak tahu PHP, dan tampaknya ini bukan memakai pendekatan “tradisional” SQLite-over-OPFS untuk persistensi. Setelah membaca lebih lanjut, bahkan belum jelas apakah penyimpanan persisten lewat Emscripten masih memungkinkan. Akhirnya saya menemukan https://github.com/WordPress/wordpress-playground/issues/19, yang sepertinya berarti persistensi belum memungkinkan di WordPress dalam browser, jadi itu agak disayangkan
    • Presentasinya bagus. Bagi yang penasaran, Wordpress Playground diperkenalkan mulai 48:33

  • Murni penasaran: jika database dikesampingkan dulu, apakah ini berarti WordPress bisa dijalankan sebagai Cloudflare Worker? https://developers.cloudflare.com/workers/runtime-apis/webas...

  • Saya sering memakai WordPress untuk beberapa situs yang hampir statis. Ini bagus untuk membiarkan orang nonteknis terus menambahkan konten, dan untuk tujuan ini hampir tidak ada alternatif yang mendekati WordPress
    Namun plugin yang dipakai harus dipilih dengan cermat, frontend Cloudflare yang tepat harus disiapkan, dan pengguna harus dicegah melakukan hal-hal yang tampak sederhana tetapi berbahaya. Sebagian besar kebencian terhadap WordPress terasa berasal dari orang yang memakainya sangat lama dulu, punya kebutuhan yang tidak bisa dipenuhi WordPress, atau mewarisinya sebagai legacy

    • Bagi saya, itu gabungan dari kasus kedua dan ketiga, plus klien yang bersikeras memakai WordPress untuk proyek yang sebenarnya akan jauh lebih baik dengan headless CMS + kode kustom
      Memang bukan salah WordPress, tetapi itu tidak mengubah fakta bahwa mendengar namanya saja membuat saya sedikit meringkuk ketakutan

  • Playground yang menjalankan PHP di WASM ini jauh lebih responsif daripada 95% situs web pada umumnya

    • Bagian paling keren di sini adalah ia memangkas bolak-balik ke server secara drastis. Semua panggilan database dan permintaan aset terjadi di klien. Tentu saja, waktu loading beberapa detik harus diterima
      WordPress mungkin adalah solusi aplikasi multi-halaman yang paling banyak dipakai, tetapi ini pada dasarnya mengubahnya menjadi aplikasi satu halaman. Selain itu, karena tidak perlu terus-menerus mengirim permintaan API ke server, performanya juga lebih baik daripada kebanyakan aplikasi satu halaman.
      Bagian aplikasi satu halaman seperti editor pos/halaman dan editor situs adalah aplikasi React yang kompleks, tetapi dalam demo ini terasa lebih gesit daripada lingkungan pengembangan lokal. Ini menunjukkan dengan baik seberapa bagus aplikasi satu halaman bisa menjadi ketika bolak-balik ke server dihilangkan. Sebagai catatan, saya bekerja di Automattic, dan menyaksikan eksperimen ini benar-benar keren

  • Tidak perlu merendahkan WordPress, tetapi sejarahnya panjang dan masalahnya juga banyak. Akan menyenangkan jika ada alternatif self-hosting modern yang bisa dipakai tanpa static site generation atau hosting yang rumit

    • Pesaing mana pun harus melewati masalah ayam-dan-telur yang sangat berat. WordPress punya plugin yang bisa melakukan hampir apa saja, dan biasanya dukungan berbayar juga tersedia, jadi sulit dihindari
      Codebase-nya tidak bagus, mengembangkan di atasnya menyiksa, dan cara desainnya maupun pengelolaan store resminya juga tidak mencegah kekacauan dan risiko di sisi database. Meski begitu, proposal “bagus, siapkan dua hari dan keluarkan 80 dolar per bulan untuk plugin/tema” jauh lebih mudah dijual daripada “bagus, pertama-tama kami butuh waktu pengembangan minimal dua bulan.”
      Kalaupun pekerjaan pengembangan diperlukan, mudah menemukan orang yang berpengalaman mengembangkan WordPress, dan kalau tidak ingin merekrut langsung, ada banyak agensi spesialis WordPress. Pesaing baru yang sedang naik daun tidak punya keuntungan skala seperti ini. Merancang sistem yang dapat diperluas dengan struktur plugin dan tema agar jauh lebih baik daripada WordPress bukan pekerjaan kecil, tetapi juga bukan hal mustahil dan tidak membutuhkan tim jenius. Namun dalam jalan untuk menggeser WordPress di pasar nyata, itu justru tahap yang paling mudah
    • Ada banyak pengganti yang secara fungsional sempurna, tetapi proposisi nilai WordPress yang sebenarnya adalah ekosistem plugin, kumpulan developer, dan basis pendukung pengguna
      Semua orang pasti pernah bertemu klien yang hanya menginginkan WordPress dan tidak mau yang lain. Sering juga terjadi, meskipun solusi baru yang rapi sudah di-deploy, klien kembali lagi ke WordPress. Saya melihat nilai dalam pendekatan hibrida: kebutuhan yang kompleks ditangani oleh aplikasi kustom yang dibuat dengan framework lain, sementara konten dikelola lewat instance WordPress dan connector
    • Alasan WordPress berhasil sampai hari ini adalah karena selama bertahun-tahun, ketika CMS lain terus mematahkan API mereka, WordPress pada umumnya mempertahankan stabilitas, dan berkat itu ekosistem plugin yang sangat besar bisa tumbuh
      Selain itu, WordPress PHP API hampir tidak memakai pemrograman berorientasi objek dan sebagian besar berupa fungsi serta array, sehingga orang yang hanya memahami pemrograman sangat dasar pun bisa membuat plugin atau tema sendiri
    • CMS yang ingin diajak bekerja sama oleh developer dan CMS yang ingin dipakai perusahaan itu berbeda. Untuk masuk ke kategori yang kedua, harus membuat banyak pilihan pragmatis yang menjauhkannya dari kategori pertama
      Perusahaan menyukai sesuatu yang bertahan lama, dan hal-hal seperti itu menurut definisi sering kali sudah kuno
    • Ada di sini: https://github.com/Qbix/Platform

  • Teknologi di balik demo ini benar-benar keren. Akan bagus jika bisa melihat log error/peringatan PHP secara real-time, dan saya terutama ingin memastikan seberapa lengkap simulator ini, termasuk penulisan ulang database SQLite
    Pengujian plugin atau tema juga sangat mudah. Cukup tambahkan &plugin=plugin-slug-from-dir, dan jika slug-nya cocok dengan slug plugin di URL WordPress.org, plugin itu otomatis diunduh dan ditambahkan ke sandbox. Dokumentasi lengkap query API untuk menyusun sandbox ada di sini: https://wordpress.github.io/wordpress-playground/query-api/
    Saya yakin pasti ada cara untuk membuka atau menampilkan debug log. Kalau tidak ada, mereka tidak mungkin bisa mengembangkan ini