VectoJS: DOM'suz UI Çerçevesi Erişilebilirliği Korudu
VectoJS, arayüzü DOM yerine tek canvas'a çizen açık kaynak TypeScript çerçevesidir; etkileşimli öğelere görünmez DOM projeksiyonuyla erişilebilirlik sağlar.
VectoJS, son on yılın UI çerçevelerinin ortak varsayımını reddediyor: arayüzün altında bir HTML ağacı olması gerektiği fikrini. React, Svelte veya Tailwind gibi araçlar DOM'u yönetmenin farklı yollarını sunarken, VectoJS tüm uygulamayı tek bir canvas elementine çiziyor. Buton, liste ya da binlerce canlı veri noktası; hepsi konum, boyut ve render() metoduna sahip düz TypeScript nesneleri olarak, bir oyun motoru sahnesi gibi her karede yeniden çiziliyor.
Canvas tabanlı arayüzlerin klasik sorunu erişilebilirliktir: ekran okuyucular tek bir bitmap görür, Ctrl+F hiçbir şey bulamaz. VectoJS bunu, her etkileşimli öğe için görünmez ama gerçek bir DOM elementi (buton, input, link) projekte ederek çözüyor. Bu görünmez element her karede canvas üzerindeki konumla senkronize ediliyor; böylece klavye odağı, işaretçi olayları ve ekran okuyucular gerçek bir DOM elementiyle etkileşime giriyor. Maliyet yalnızca gerçekten etkileşimli öğelere yükleniyor; partikül, glif gibi etkileşimsiz binlerce nesne sadece bir çizim çağrısına mal oluyor.
Bu ayrım sayesinde VectoJS, DOM tabanlı arayüzlerin zorlandığı senaryolarda öne çıkıyor: yüzlerce sürüklenebilir düğüme sahip node-graph editörleri, WebGPU ile onbinlerce partikülü hareket ettiren compute geçişleri (WebGPU yoksa CPU'ya düşerek) ve imlecin etrafında tüm bir kitabı gerçek zamanlı yeniden düzenleyen metin okuyucular. Proje MIT lisansıyla GitHub'da açık; canlı FPS ve nesne sayısı gösteren demolarla kullanıcılar performansı kendi donanımlarında test edebiliyor.