Mador, framework'leri es geçen 855 baytlık reaktif DOM runtime'ı

Marsbos adıyla yayın yapan bir geliştirici, düz HTML sayfalarına reaktif state ekleyen minimal bir açık kaynak runtime olan Mador'u yayınladı. Proje, bir Show HN gönderisiyle Hacker News ana sayfasına ulaştı; gönderide 80 satırlık bir Proxy state tuple'ı olarak tanıtıldı ve GitHub README'sine göre kütüphanenin tamamı minify edildiğinde yaklaşık 855 bayt yer kaplıyor.

Mador ne yapıyor

Mador, HTML ve JavaScript'i zaten hazır olan ama biraz state'e dayalı güncellemeden faydalanabilecek sayfaları hedefliyor. Kendisi hiçbir şey render etmektense, bir JavaScript state nesnesini dokümanda halihazırda var olan elemanlara bağlıyor. Kütüphane native bir ES module olarak geliyor, npm üzerinden veya doğrudan bir CDN'den erişilebiliyor ve README'ye göre ne global bir runtime ne de bir build adımı gerektiriyor.

read ve write API'si

mador() fonksiyonu bir başlangıç state nesnesiyle çağrıldığında bir çift fonksiyon döndürüyor:

js const [read, write] = mador({ count: 1 });

read fonksiyonu üç parçadan oluşan bir binding oluşturuyor: güncellenecek elemanları seçen bir CSS selector, her eşleşen elemanı türetilmiş bir değerle birlikte alan bir güncelleme callback'i ve state'in ilgili dilimini çeken bir selector fonksiyonu. README'deki bir örnekte, .counter elemanı state.count değerine bağlanıyor ve callback, elemanın metin içeriğini bu değerden ayarlıyor.

State değişiklikleri write üzerinden yapılıyor; write, state nesnesini örneğin count'u artıran bir mutator fonksiyonuna veriyor. README, bu mekanizmanın üzerine hiçbir şeyin oturmadığını açıkça belirtiyor: kütüphane bilinçli olarak component'leri, template sözdizimini ve virtual DOM'u dışlıyor.

Bağımlılık takibi ve batch işleme

Sahne arkasında Mador, bir binding'in gerçekte hangi state property'lerini okuduğunu kaydediyor ve o binding'i yalnızca bu bağımlılıklardan biri değiştiğinde yeniden çalıştırıyor; böylece state'in alakasız bir yerine yazmak binding'i etkilemiyor. Yazma işlemleri ayrıca batch halinde yapılıyor: tek bir write çağrısı içinde yapılan birkaç mutation, her biri kendi binding taramasını tetiklemek yerine birlikte işleniyor.

Eleman ömrüne bağlı temizlik

Binding'ler, güncelledikleri markup ile ilişkilendiriliyor. Bir binding'in seçtiği elemanlar dokümandan kaybolduğunda, Mador o binding'in arkasındaki reaktif çalıştırıcıyı sökebiliyor. README'ye göre kütüphanede zaten component olmadığından, geliştiricinin yöneteceği bir component yaşam döngüsü de yok — reaktivite, dokunduğu DOM ile birlikte doğuyor ve ölüyor.

Neden önemli

Mador, bilinen iki uç arasındaki boşluğu dolduruyor: sayfa büyüdükçe senkronizasyondan çıkan el yapımı event listener'lar ile, belki de birkaç dinamik değer için component'ler, yeniden render etme ve bir toolchain getiren tam bir framework benimsemek. Bir kilobaytın altında olması sayesinde statik veya server-render edilmiş bir sayfaya, o sayfanın oluşturulma veya sunulma biçimini değiştirmeden bir CDN'den eklenebiliyor. Takas da bir o kadar dar — geliştiriciler markup'ın ve güncelleme mantığının tam sahibi kalıyor, ama proje state, binding ve temizlik ötesinde hiçbir şey sunmuyor. Yepyeni bir yayın olarak üretimdeki dayanıklılığı henüz kanıtlanmış değil; ancak kod MIT lisanslı ve GitHub'da marsbos/mador altında herkese açık durumda, bu da kullanım senaryosu bilinçli olarak küçük ayak izine uyan herkesin denetlemesini kolaylaştırıyor.