Tarayıcı tabanlı derleyiciler kodunuzu doğrudan web sayfasının içinde, WebAssembly ile çalıştırır. WebAssembly, tarayıcıların hızlı makine koduna çevirdiği, derli toplu ve korumalı (sandbox) bir ikili biçimdir. Clang, CPython, R ve SQLite gibi gerçek derleyiciler ve yorumlayıcıların kendileri WebAssembly'ye derlenir, bir kez indirilir ve ardından programınızı kendi cihazınızda derler veya çalıştırır; hiçbir şey sunucuya gönderilmez. Geleneksel online derleyiciler ise tam tersini yapar: kodunuzu çalıştıran bir sunucuya yükler ve çıktıyı size geri gönderir.
- WebAssembly, tüm büyük tarayıcıların JavaScript ile aynı güvenlik korumalı alanı içinde, yerel koda yakın hızlarda çalıştırdığı taşınabilir bir derleme hedefidir.
- C ve C++ derleyicilerimiz Clang'i sekmenin içinde çalıştırır: kodunuzu bir WebAssembly modülüne çevirir, bu modül de girdi ve çıktıyı sağlayan küçük bir WASI katmanıyla yürütülür.
- Python, R, SQL, Ruby, PHP, Lua ve Prolog, resmi yorumlayıcılarının WebAssembly sürümleri olarak çalışır; JavaScript ailesi diller tarayıcının kendi motorunu kullanır.
- Yerelde çalıştırmak gizlilik, sunucu kuyruğunun olmaması ve çalışma zamanı önbelleğe alındıktan sonra çevrimdışı kullanım demektir.
- Bunun karşılığında tek seferlik bir indirme, iş parçacığı (thread) ve ağ soketlerinin olmaması, geçici bir bellek içi dosya sistemi ve C++ sürümümüzde istisnaların (exception) bulunmaması gibi ödünler vardır.
WebAssembly nedir
WebAssembly (sıkça Wasm diye kısaltılır), bir derleme hedefi olarak tasarlanmış düşük seviyeli bir komut biçimidir. Genellikle elle yazılmaz. Bunun yerine Clang veya Rust derleyicisi gibi bir derleyici, sıradan kaynak koddan bir .wasm dosyası üretir; tıpkı x86 veya ARM işlemci için bir çalıştırılabilir dosya üreteceği gibi. Biçim, W3C'de geliştirilen açık bir standarttır, webassembly.org adresinde belgelenmiştir ve Chrome, Edge, Firefox ve Safari tarafından desteklenir.
Üç özelliği, onu tarayıcıda kod çalıştırmak için kullanışlı kılar:
- Taşınabilir. Aynı
.wasmdosyası, tarayıcı onu yerel makine koduna çevirdiği için Windows, macOS, Linux, Android ve iOS'ta, her işlemcide çalışır. - Hızlı. WebAssembly tipli bir biçimdir ve donanıma yakındır; bu yüzden tarayıcı motorları onu çalıştırmadan önce verimli makine koduna derleyebilir. İşlemci yoğunluklu kod, eşdeğer JavaScript'ten tipik olarak çok daha hızlı çalışır ve genel olarak yerel kodla aynı aralıktadır, ancak genellikle biraz daha yavaştır.
- Korumalı. Bir WebAssembly modülüne özel bir bellek bloğu verilir ve yalnızca kendisine açıkça verilen işlevleri çağırabilir. Ana makine kodu bir yol sağlamadıkça dosyalarınızı okuyamaz, ağ bağlantısı açamaz veya sayfanın geri kalanına dokunamaz.
WASI: WebAssembly için bir sistem arayüzü
Bir C programı bir işletim sistemi bekler: standart girdiyi okuyacağı, çıktıyı yazacağı, dosya açacağı ve saati alacağı bir şey. WebAssembly'de bunların hiçbiri yerleşik değildir. WebAssembly System Interface (WASI), bir WebAssembly programının içe aktarabileceği bu tür işlevlerin standart bir kümesini tanımlar. Tarayıcı dışında Wasmtime gibi çalışma zamanları WASI'yi gerçek bir işletim sisteminin üzerinde uygular. Tarayıcının içinde ise WASI shim denen küçük bir JavaScript kitaplığı bu işlevleri bellek içi veriler üzerinde uygular.
Geleneksel online derleyiciler nasıl çalışır
Köklü online derleyicilerin ve kodlama alıştırma sitelerinin çoğu kodunuzu kendi sunucularında çalıştırır:
- Tarayıcınız kaynak kodu (ve varsa girdiyi) web sitesinin sunucusuna gönderir.
- Sunucu bunu, süre, bellek ve işlem sınırları olan, tipik olarak bir kapsayıcı veya hafif bir sanal makine gibi yalıtılmış bir ortama yerleştirir.
- Orada kurulu gerçek derleyici veya yorumlayıcı programı derler ve çalıştırır.
- Çıktı yakalanır ve tarayıcınıza geri gönderilir, ortam ise silinir.
Bu modelin gerçek avantajları vardır. Sunucu neredeyse her dili ve sürümü, iş parçacığı ve işlem gibi tam işletim sistemi özelliklerini, bazen de ağ erişimini ve büyük kitaplıkları sunabilir. Ancak kodunuz cihazınızdan çıkar, yoğun hizmetler istekleri kuyruğa alabilir, her çalıştırma bir ağ gidiş dönüşüne bağlıdır ve işletmeci her yürütme için işlem gücünün bedelini ödemek zorundadır; bu yüzden birçoğu çalıştırmaları sınırlar veya hesap ister.
Tarayıcı içi derleyicilerimiz nasıl çalışır
Online derleyicilerimizde her dilin çalışma zamanı tarayıcınıza indirilir ve bir Web Worker içinde çalıştırılır; bu, programınız çalışırken sayfayı yanıt verir tutan bir arka plan iş parçacığıdır. Bir zaman sınırı ve Durdur düğmesi, bir program çok uzun çalışırsa (örneğin sonsuz döngü yüzünden) sayfanın worker'ı sonlandırmasını sağlar. Çalışma zamanı dosyaları tam sürümlere sabitlenir ve çoğu, çalıştırılmadan önce kriptografik bir özetle (hash) doğrulanır.
C ve C++: sekmenin içinde gerçek bir derleyici
Online C Derleyici ve Online C++ Derleyici, LLVM tabanlı derleyici olan Clang 21'i kullanır; Clang, YoWASP projesi tarafından WebAssembly olarak paketlenmiştir. Her çalıştırma iki aşamada gerçekleşir:
- Derleme. Kendisi de WebAssembly olarak çalışan Clang,
main.cveyamain.cppdosyanızı optimizasyon ve uyarılar açık olarak derler (C17 veya C++20). Çıktısı bir x86 ya da ARM çalıştırılabilir dosyası değil, WASI'yi hedefleyen yeni bir WebAssembly modülüdür. Derleyici uyarıları ve hataları, Clang'in yazdırdığı haliyle aynen gösterilir. - Çalıştırma. Tarayıcı bu modülü makine koduna derler ve bir WASI shim ile başlatır. Shim, standart girdiyi girdi kutusundaki metne bağlar; standart çıktıyı ve standart hatayı da çıktı paneline gönderir.
Başka bir deyişle, WebAssembly'ye derlenmiş bir derleyici, WebAssembly'ye derlenmiş programınızı üretir ve ikisi de aynı sekmede çalışır.
WebAssembly'ye derlenmiş yorumlayıcılar
| Dil | Çalışma zamanı | Nedir |
|---|---|---|
| Python | Pyodide | Referans Python yorumlayıcısı olan CPython'un WebAssembly'ye derlenmiş hali. NumPy ve pandas gibi paketler de bunun için önceden derlenmiştir. |
| R | webR | R'nin temel grafikler dahil resmi WebAssembly sürümü. |
| SQL | sql.js | Veritabanı bellekte tutulacak şekilde WebAssembly'ye derlenmiş SQLite veritabanı motoru. |
| Ruby | ruby.wasm | Standart kitaplığıyla birlikte WASI için derlenmiş resmi CRuby yorumlayıcısı. |
| PHP | php-wasm | WebAssembly'ye derlenmiş PHP yorumlayıcısı. |
| Lua | wasmoon | WebAssembly'ye derlenmiş referans Lua 5.4 yorumlayıcısı. |
| Prolog | swipl-wasm | WebAssembly'ye derlenmiş SWI-Prolog. |
Bunlar insanların bilgisayarlarına kurduğu yorumlayıcıların aynısı olduğundan, davranış ve hata iletileri masaüstü sürümleriyle yakından örtüşür. Bunları Online Python Derleyici, Online R Derleyici ve Online SQL Derleyici üzerinde deneyebilirsiniz.
Tarayıcının kendi motorunu kullanan diller
Bazı dillerin WebAssembly'ye hiç ihtiyacı yoktur. Online JavaScript Derleyici kodu doğrudan tarayıcının JavaScript motorunda çalıştırır. TypeScript ve CoffeeScript, JavaScript olarak dağıtılan resmi derleyicileri tarafından JavaScript'e çevrilir ve sonuç aynı şekilde çalıştırılır. Scheme BiwaScheme'i, Clojure ise SCI'yi (Small Clojure Interpreter) kullanır; ikisi de kendileri JavaScript olarak çalışan yorumlayıcılardır.
Kodu tarayıcıda çalıştırmanın avantajları
- Gizlilik. Kaynak kodunuz ve girdiniz cihazınızda kalır. Sunucumuz bunları hiç almadığı için yüklenmez, saklanmaz ve günlüğe kaydedilmez.
- Kuyruk yok, hesap yok. Her ziyaretçi kendi işlemcisini kullanır; bu yüzden paylaşılan bir yürütme kuyruğu yoktur ve çalıştırmaları kısıtlamaya gerek kalmaz.
- Yüklendikten sonra çevrimdışı çalışır. Sayfa ve çalışma zamanı indirilip önbelleğe alındıktan sonra, sekme açık kaldığı sürece bağlantınız kopsa bile kodu düzenlemeye ve çalıştırmaya devam edebilirsiniz. İhtiyaç anında yüklenen ek paketler, örneğin bazı Python kitaplıkları, ilk seferde yine de bağlantı gerektirir.
- Hızlı tekrar çalıştırma. İlk yüklemeden sonra yorumlanan diller neredeyse anında başlar ve Çalıştır'a basmakla çıktıyı görmek arasında bir ağ gidiş dönüşü olmaz.
Sınırlar ve ödünler
| Sınır | Neden var | Pratikte anlamı |
|---|---|---|
| İndirme boyutu | Derleyicinin veya yorumlayıcının tamamı tarayıcınıza ulaşmak zorundadır. | Clang, R ve Ruby on megabaytlarca yer tutar; Lua ve SQLite bir megabaytın altındadır. Sonraki ziyaretler tarayıcı önbelleğini kullanır. |
| İş parçacığı yok | Çalışma zamanlarımız tek iş parçacıklı çalışır; WebAssembly iş parçacıkları ek tarayıcı yalıtım ayarları ve çalışma zamanı desteği gerektirir. | Gerçek paralellik için pthread, std::thread veya Python'un threading modülü masaüstündeki gibi çalışmaz. |
| Ağ soketi yok | Korumalı alan, programlara ham ağ bağlantıları açma imkânı vermez. | C, Python veya R'den soket açan ya da HTTP isteği yapan kod başarısız olur. Tarayıcıdaki JavaScript ise yine de fetch kullanabilir. |
| Gerçek dosya sistemi yok | Çalışma zamanlarına en fazla bellek içi sanal bir dosya sistemi verilir, diskiniz asla verilmez. | Python ve diğer bazı çalışma zamanları oturum sırasında dosya oluşturabilir, ancak sayfa kapanınca bu dosyalar kaybolur; C ve C++ programlarımız yalnızca standart girdi ve çıktıya erişir. |
| C++ istisnaları yok | C++ sürümümüz istisnalar devre dışı bırakılarak derlenir (-fno-exceptions). | try, catch veya throw kullanan kod derlenmez; bunun yerine dönüş değerlerini veya hata kodlarını kullanın. |
| Bellek | 32 bit WebAssembly en fazla 4 GiB adresleyebilir, tarayıcılar veya cihazlar daha azına izin verebilir. | Çok büyük diziler veya veri kümeleri, özellikle telefonlarda, bellek yetersizliği hatalarıyla başarısız olabilir. |
| Girdi etkileşimli değildir | Standart girdi, program başlamadan önce sağlanır. | Tüm girdiyi önce girdi kutusuna yazın; istemler çalışma sırasında sizi bekleyemez. |
Öğrenme, algoritma deneme ve ders ödevleri için bu sınırlar nadiren önem taşır. Ağ iletişimi, birden çok işlem veya çok fazla bellek gerektiren programlar için yerel bir kurulum ya da sunucu tabanlı bir ortam kullanın.
Güvenlik modeli
Rastgele kod çalıştırmak riskli görünür, ancak tarayıcı içi derleyiciler tarayıcıların her web sitesine zaten uyguladığı korumalara dayanır.
- WebAssembly yalıtımı. Bir modül yalnızca sınırları denetlenen kendi doğrusal belleğini okuyup yazabilir ve yalnızca kendisine açıkça içe aktarılmış işlevleri çağırabilir. Arabellek taşması olan bir C programı kendi belleğini bozabilir, ancak tarayıcıya veya işletim sistemine sıçrayamaz.
- Tarayıcı korumalı alanı. WebAssembly ve Web Worker'lar dahil tüm sayfa kodu tarayıcının işlem korumalı alanı ve aynı kaynak (same-origin) kuralları içinde çalışır; bu yüzden başka sitelerin verilerini veya dosyalarınızı okuyamaz.
- Worker'lar ve zaman sınırları. Bir worker içinde çalışmak, kontrolden çıkan bir programın sayfa donmadan veya yeniden yüklenmeden sonlandırılabilmesi demektir.
- Doğrulanmış çalışma zamanları. Tam çalışma zamanı sürümlerini sabitlemek ve yükleme yöntemi izin verdiği yerde özetleri (hash) denetlemek, bir içerik dağıtım ağının sessizce farklı veya değiştirilmiş bir dosya sunmasına karşı koruma sağlar.
Bir uyarı: JavaScript derleyicisinde çalıştırdığınız JavaScript, ağ istekleri yapmak dahil bir web sayfasındaki herhangi bir betikle aynı yeteneklere sahiptir. Her kodda olduğu gibi yalnızca anladığınız kod parçalarını, özellikle de yabancılardan kopyalananları çalıştırın.
Hangi tür online derleyici ne zaman kullanılır
- Kodunuz özelse, örneğin ders ödeviyse veya iş koduysa, cihazınızdan hiç çıkmaması için tarayıcı içi bir derleyiciyi tercih edin.
- İş parçacığı, soket, belirli bir sistem kitaplığı ya da WebAssembly sürümü olmayan bir dil gerekiyorsa sunucu tabanlı bir hizmet veya yerel bir kurulum kullanın.
- Yavaş veya kotalı bir bağlantıdaysanız hafif çalışma zamanlarıyla başlayın; büyük bir çalışma zamanının ilk yüklemesi başlıca maliyettir.
Sıkça sorulan sorular
Online derleyicilerinizi kullandığımda kodum bir sunucuya gönderiliyor mu?
Hayır. Sayfa derleyiciyi veya yorumlayıcıyı indirir; kodunuz ve girdiniz kendi cihazınızda derlenir ve çalıştırılır. Sunucu yalnızca sayfayı ve çalışma zamanı dosyalarını iletir.
WebAssembly yerel kod kadar hızlı mı?
Genellikle yakındır ama biraz daha yavaştır; aradaki fark iş yüküne ve tarayıcıya bağlıdır. Tipik alıştırmalarda ve algoritmalarda fark hissedilmez; asıl gecikme ilk seferki indirmedir.
İlk çalıştırma neden daha uzun sürüyor?
İlk çalıştırma çalışma zamanını indirir ve başlatır; Clang, R veya Ruby için bu, on megabaytlarca veri demektir. Tarayıcı bu dosyaları önbelleğe alır, bu yüzden sonraki ziyaretler çok daha hızlı başlar.
try ve catch kullanan C++ kodum neden derlenmiyor?
C++ sürümümüz istisnalar devre dışı bırakılarak derlenir, çünkü WebAssembly'de istisna işleme, bu kurulumun kullanmadığı ek araç zinciri ve çalışma zamanı desteği gerektirir. Hata işlemeyi dönüş değerleri, std::optional veya hata kodlarıyla olacak şekilde yeniden yazın ya da istisnalara ihtiyacınız varsa yerelde derleyin.
Online derleyicideki bir program bilgisayarıma zarar verebilir mi?
Tarayıcıda WebAssembly olarak çalışan kod, kendi belleğiyle ve sayfanın sağladığı işlevlerle sınırlıdır; tarayıcı korumalı alanı da ek bir katman ekler. Dosyalarınızı okuyamaz veya yazılım kuramaz. JavaScript kodu ise her sayfa betiği gibi yine de web istekleri yapabilir, bu yüzden güvenmediğiniz kodu çalıştırmayın.