Compiler berbasis browser menjalankan kode Anda di dalam halaman web itu sendiri, memakai WebAssembly: format biner yang ringkas dan terisolasi (sandbox), yang diterjemahkan browser menjadi kode mesin yang cepat. Compiler dan interpreter sungguhan seperti Clang, CPython, R, dan SQLite dikompilasi ke WebAssembly, diunduh sekali, lalu mengompilasi atau menjalankan program Anda di perangkat Anda sendiri, tanpa mengirim apa pun ke server. Compiler online tradisional bekerja sebaliknya: kode Anda diunggah ke server yang menjalankannya lalu mengirim kembali hasilnya.
- WebAssembly adalah target kompilasi portabel yang dijalankan semua browser utama dengan kecepatan mendekati kode native, di dalam sandbox keamanan yang sama dengan JavaScript.
- Compiler C dan C++ kami menjalankan Clang di tab browser: Clang mengubah kode Anda menjadi modul WebAssembly, lalu modul itu dieksekusi dengan lapisan WASI kecil yang menyediakan input dan output.
- Python, R, SQL, Ruby, PHP, Lua, dan Prolog berjalan sebagai build WebAssembly dari interpreter resminya; bahasa keluarga JavaScript memakai mesin bawaan browser.
- Berjalan secara lokal berarti privasi, tanpa antrean server, dan bisa dipakai offline setelah runtime tersimpan di cache.
- Konsekuensinya: unduhan sekali di awal, tanpa thread atau network socket, sistem file sementara di memori, dan tanpa exception pada build C++ kami.
Apa itu WebAssembly
WebAssembly (sering disingkat Wasm) adalah format instruksi tingkat rendah yang dirancang sebagai target kompilasi. Biasanya Anda tidak menulisnya dengan tangan. Compiler seperti Clang atau compiler Rust menghasilkan file .wasm dari kode sumber biasa, sama seperti saat menghasilkan file eksekusi untuk prosesor x86 atau ARM. Format ini adalah standar terbuka yang dikembangkan di W3C, didokumentasikan di webassembly.org, dan didukung Chrome, Edge, Firefox, dan Safari.
Tiga sifat membuatnya berguna untuk menjalankan kode di browser:
- Portabel. File
.wasmyang sama berjalan di Windows, macOS, Linux, Android, dan iOS, di prosesor apa pun, karena browser menerjemahkannya menjadi kode mesin setempat. - Cepat. WebAssembly bertipe dan dekat dengan perangkat keras, sehingga mesin browser dapat mengompilasinya menjadi kode mesin yang efisien sebelum dieksekusi. Kode yang berat di CPU biasanya berjalan jauh lebih cepat daripada JavaScript yang setara dan secara umum berada di kisaran yang sama dengan kode native, meskipun biasanya sedikit lebih lambat.
- Terisolasi (sandbox). Modul WebAssembly mendapat blok memori pribadi dan hanya bisa memanggil fungsi yang secara eksplisit diberikan kepadanya. Modul ini tidak bisa membaca file Anda, membuka koneksi jaringan, atau menyentuh bagian lain halaman kecuali kode host menyediakan caranya.
WASI: antarmuka sistem untuk WebAssembly
Program C mengharapkan adanya sistem operasi: sesuatu untuk membaca standard input, menulis output, membuka file, dan mengambil waktu. WebAssembly tidak memiliki semua itu secara bawaan. WebAssembly System Interface (WASI) mendefinisikan sekumpulan fungsi standar semacam itu yang bisa diimpor program WebAssembly. Di luar browser, runtime seperti Wasmtime menerapkan WASI di atas sistem operasi sungguhan. Di dalam browser, pustaka JavaScript kecil bernama WASI shim menerapkan fungsi-fungsi itu di atas data di memori.
Cara kerja compiler online tradisional
Sebagian besar compiler online lama dan situs latihan coding menjalankan kode Anda di server mereka:
- Browser Anda mengirim kode sumber (dan input apa pun) ke server situs.
- Server menempatkannya di lingkungan terisolasi, biasanya container atau mesin virtual ringan, dengan batas waktu, memori, dan proses.
- Compiler atau interpreter sungguhan yang terpasang di sana membangun dan menjalankan program.
- Output ditangkap dan dikirim kembali ke browser Anda, lalu lingkungan itu dibuang.
Model ini punya keunggulan nyata. Server bisa menawarkan hampir semua bahasa dan versi, fitur sistem operasi lengkap seperti thread dan proses, dan kadang akses jaringan serta pustaka besar. Namun kode Anda meninggalkan perangkat, layanan yang ramai bisa membuat permintaan mengantre, setiap eksekusi bergantung pada perjalanan pulang-pergi lewat jaringan, dan pengelola harus membayar daya komputasi untuk setiap eksekusi, itulah sebabnya banyak yang membatasi jumlah eksekusi atau mewajibkan akun.
Cara kerja compiler di browser kami
Di compiler online kami, runtime untuk setiap bahasa diunduh ke browser Anda dan dijalankan di dalam Web Worker, yaitu thread latar belakang yang menjaga halaman tetap responsif saat program Anda berjalan. Batas waktu dan tombol Hentikan memungkinkan halaman menghentikan worker jika program berjalan terlalu lama, misalnya karena perulangan tak berujung. File runtime dikunci pada versi yang tepat, dan sebagian besar diperiksa terhadap hash kriptografis sebelum dieksekusi.
C dan C++: compiler sungguhan di tab browser
Compiler C Online dan Compiler C++ Online memakai Clang 21, compiler berbasis LLVM, yang dikemas sebagai WebAssembly oleh proyek YoWASP. Setiap eksekusi berlangsung dalam dua tahap:
- Kompilasi. Clang, yang sendiri berjalan sebagai WebAssembly, mengompilasi
main.cataumain.cppAnda dengan optimisasi dan peringatan diaktifkan (C17 atau C++20). Hasilnya bukan file eksekusi x86 atau ARM, melainkan modul WebAssembly baru yang menargetkan WASI. Peringatan dan error compiler ditampilkan persis seperti yang dicetak Clang. - Eksekusi. Browser mengompilasi modul itu menjadi kode mesin dan menjalankannya dengan WASI shim. Shim menghubungkan standard input ke teks di kotak input dan mengirim standard output serta standard error ke panel output.
Dengan kata lain, compiler yang dikompilasi ke WebAssembly menghasilkan program Anda yang dikompilasi ke WebAssembly, dan keduanya berjalan di tab yang sama.
Interpreter yang dikompilasi ke WebAssembly
| Bahasa | Runtime | Apa itu |
|---|---|---|
| Python | Pyodide | CPython, interpreter Python acuan, yang dikompilasi ke WebAssembly. Paket seperti NumPy dan pandas juga sudah dibangun untuknya. |
| R | webR | Build WebAssembly resmi dari R, termasuk grafik dasar. |
| SQL | sql.js | Mesin database SQLite yang dikompilasi ke WebAssembly, dengan database disimpan di memori. |
| Ruby | ruby.wasm | Interpreter CRuby resmi yang dibangun untuk WASI, lengkap dengan pustaka standarnya. |
| PHP | php-wasm | Interpreter PHP yang dikompilasi ke WebAssembly. |
| Lua | wasmoon | Interpreter Lua 5.4 acuan yang dikompilasi ke WebAssembly. |
| Prolog | swipl-wasm | SWI-Prolog yang dikompilasi ke WebAssembly. |
Karena ini adalah interpreter yang sama dengan yang dipasang orang di komputernya, perilaku dan pesan error-nya sangat mirip dengan versi desktop. Anda bisa mencobanya di Compiler Python Online, Compiler R Online, dan Compiler SQL Online.
Bahasa yang memakai mesin bawaan browser
Sebagian bahasa tidak memerlukan WebAssembly sama sekali. Compiler JavaScript Online menjalankan kode langsung di mesin JavaScript browser. TypeScript dan CoffeeScript diterjemahkan menjadi JavaScript oleh compiler resminya, yang didistribusikan sebagai JavaScript, lalu hasilnya dijalankan dengan cara yang sama. Scheme memakai BiwaScheme dan Clojure memakai SCI (Small Clojure Interpreter), keduanya interpreter yang sendiri berjalan sebagai JavaScript.
Keuntungan menjalankan kode di browser
- Privasi. Kode sumber dan input Anda tetap berada di perangkat Anda. Keduanya tidak diunggah, disimpan, atau dicatat oleh server kami, karena server tidak pernah menerimanya.
- Tanpa antrean dan tanpa akun. Setiap pengunjung memakai prosesornya sendiri, sehingga tidak ada antrean eksekusi bersama dan tidak perlu menjatah jumlah eksekusi.
- Bisa offline setelah dimuat. Setelah halaman dan runtime diunduh dan disimpan di cache, Anda bisa terus mengedit dan menjalankan kode jika koneksi terputus, selama tab tetap terbuka. Paket tambahan yang dimuat sesuai kebutuhan, seperti beberapa pustaka Python, tetap memerlukan koneksi saat pertama kali.
- Eksekusi ulang yang cepat. Setelah pemuatan pertama, bahasa yang diinterpretasi dimulai hampir seketika, dan tidak ada perjalanan pulang-pergi lewat jaringan antara menekan Jalankan dan melihat output.
Batasan dan konsekuensinya
| Batasan | Alasannya | Artinya dalam praktik |
|---|---|---|
| Ukuran unduhan | Seluruh compiler atau interpreter harus sampai ke browser Anda. | Clang, R, dan Ruby berukuran puluhan megabyte; Lua dan SQLite kurang dari satu. Kunjungan berikutnya memakai cache browser. |
| Tanpa thread | Runtime kami berjalan single-thread; thread WebAssembly memerlukan pengaturan isolasi browser tambahan dan dukungan runtime. | pthread, std::thread, atau threading Python untuk paralelisme sungguhan tidak akan berfungsi seperti di desktop. |
| Tanpa network socket | Sandbox tidak memberi program cara untuk membuka koneksi jaringan mentah. | Kode yang membuka socket atau membuat permintaan HTTP dari C, Python, atau R akan gagal. JavaScript di browser tetap bisa memakai fetch. |
| Tanpa sistem file sungguhan | Runtime paling banyak mendapat sistem file virtual di memori, tidak pernah disk Anda. | Python dan beberapa runtime lain bisa membuat file selama sesi, tetapi file itu hilang saat halaman ditutup; program C dan C++ kami hanya mendapat standard input dan output. |
| Tanpa exception C++ | Build C++ kami dikompilasi dengan exception dinonaktifkan (-fno-exceptions). | Kode yang memakai try, catch, atau throw tidak akan terkompilasi; gunakan nilai kembalian atau kode error sebagai gantinya. |
| Memori | WebAssembly 32-bit hanya bisa mengalamatkan paling banyak 4 GiB, dan browser atau perangkat mungkin mengizinkan lebih sedikit. | Array atau kumpulan data yang sangat besar bisa gagal dengan error kehabisan memori, terutama di ponsel. |
| Input tidak interaktif | Standard input disediakan sebelum program dimulai. | Ketik semua input di kotak input lebih dulu; prompt tidak bisa menunggu Anda di tengah eksekusi. |
Untuk belajar, menguji algoritma, dan mengerjakan tugas kuliah, batasan ini jarang menjadi masalah. Untuk program yang memerlukan jaringan, banyak proses, atau banyak memori, gunakan instalasi lokal atau lingkungan berbasis server.
Model keamanan
Menjalankan kode sembarang terdengar berisiko, tetapi compiler di browser mengandalkan perlindungan yang sudah diterapkan browser pada setiap situs web.
- Isolasi WebAssembly. Modul hanya bisa membaca dan menulis memori liniernya sendiri, yang dicek batasnya, dan hanya bisa memanggil fungsi yang secara eksplisit diimpor ke dalamnya. Program C dengan buffer overflow bisa merusak memorinya sendiri, tetapi tidak bisa keluar ke browser atau sistem operasi.
- Sandbox browser. Semua kode halaman, termasuk WebAssembly dan Web Worker, berjalan di dalam sandbox proses browser dan aturan same-origin, sehingga tidak bisa membaca data situs lain atau file Anda.
- Worker dan batas waktu. Berjalan di worker berarti program yang lepas kendali bisa dihentikan tanpa membekukan atau memuat ulang halaman.
- Runtime terverifikasi. Mengunci versi runtime yang tepat, dan memeriksa hash bila metode pemuatan memungkinkan, melindungi dari content delivery network yang diam-diam menyajikan file yang berbeda atau telah diubah.
Satu catatan: JavaScript yang Anda jalankan di compiler JavaScript memiliki kemampuan yang sama dengan skrip mana pun di halaman web, termasuk membuat permintaan jaringan. Seperti kode apa pun, jalankan hanya potongan kode yang Anda pahami, terutama yang disalin dari orang asing.
Kapan memakai jenis compiler online yang mana
- Jika kode Anda bersifat pribadi, misalnya tugas kuliah atau kode pekerjaan, pilih compiler di browser agar kode tidak pernah meninggalkan perangkat Anda.
- Jika Anda memerlukan thread, socket, pustaka sistem tertentu, atau bahasa tanpa build WebAssembly, gunakan layanan berbasis server atau instalasi lokal.
- Jika koneksi Anda lambat atau berkuota, mulailah dengan runtime yang lebih ringan; pemuatan pertama runtime besar adalah biaya utamanya.
Pertanyaan yang sering diajukan
Apakah kode saya dikirim ke server saat memakai compiler online Anda?
Tidak. Halaman mengunduh compiler atau interpreter, dan kode serta input Anda dikompilasi dan dijalankan di perangkat Anda sendiri. Server hanya mengirimkan halaman dan file runtime.
Apakah WebAssembly secepat kode native?
Biasanya mendekati tetapi sedikit lebih lambat, dan selisihnya bergantung pada beban kerja dan browser. Untuk latihan dan algoritma biasa, perbedaannya tidak terasa; unduhan pertama kali adalah jeda yang lebih besar.
Mengapa eksekusi pertama lebih lama?
Eksekusi pertama mengunduh dan menginisialisasi runtime, yang untuk Clang, R, atau Ruby berarti puluhan megabyte. Browser menyimpan file-file ini di cache, sehingga kunjungan berikutnya dimulai jauh lebih cepat.
Mengapa kode C++ saya dengan try dan catch tidak terkompilasi?
Build C++ kami dikompilasi dengan exception dinonaktifkan, karena penanganan exception di WebAssembly memerlukan dukungan tambahan dari toolchain dan runtime yang tidak dipakai dalam konfigurasi ini. Tulis ulang penanganan error dengan nilai kembalian, std::optional, atau kode error, atau kompilasi secara lokal jika Anda memerlukan exception.
Bisakah program di compiler online merusak komputer saya?
Kode yang berjalan sebagai WebAssembly di browser terbatas pada memorinya sendiri dan fungsi yang disediakan halaman, dan sandbox browser menambah satu lapisan lagi. Kode itu tidak bisa membaca file Anda atau memasang perangkat lunak. Kode JavaScript tetap bisa membuat permintaan web seperti skrip halaman mana pun, jadi hindari menjalankan kode yang tidak Anda percaya.