Modern kullanıcı arayüzü (UI) framework'leri, uygulamaları bildirimsel (declarative) ve reaktif (reactive) hale getiren soyutlama katmanları sunar. Ancak bu makale, web platformunun kendi ilkel öğelerinin, özel bir UI kütüphanesine ihtiyaç duymadan benzer desenleri oluşturmak için nasıl kullanılabileceğini deneysel bir yaklaşımla inceliyor. Amaç, framework seviyesinde soyutlamalar olmaksızın yerel yeteneklerin ne kadar ileriye götürülebileceğini görmek ve bildirimsel davranışın UI kodundaki mimari faydalarını (gelişmiş netlik, sürdürülebilirlik ve azaltılmış bağımlılık) göstermektir.
Deney, pratik bir iş senaryosuna odaklanıyor: Belirli bir API uç noktasını periyodik olarak sorgulayan bir modal iletişim kutusu görüntülemek. Bu iletişim kutusu, belirli bir koşul karşılanana kadar açık kalır, ardından duruma göre çözülür veya reddedilir. Modal, DOM'a dinamik olarak eklenir, sorgulama sürecini başlatır ve yönetir, reaktif dahili durumunu dışa vurur, sorgulama sonucuna göre güncellenir ve işlem tamamlandığında otomatik olarak kapanır. Temel gereksinim, tüketici kodunun nasıl bağlanacağını değil, ne olacağını tanımlamasıdır.
Bu yaklaşımda, UI davranışı bildirimsel konfigürasyonlarla, UI render etme modal düzenleyiciyle, DOM yapısı bir DOM yardımcı katmanıyla, sorgulama mantığı bir sorgulama yardımcısıyla ve reaktif durum Proxy tabanlı bir izleyiciyle yönetilir. Hiçbir framework kullanılmamasına rağmen, sorumluluklar net bir şekilde ayrılmıştır. Bu, geliştiricilere framework bağımlılığı olmadan modern UI geliştirme prensiplerini uygulama esnekliği sunar.
Framework bağımsız, sadece yerel JavaScript yetenekleriyle modern, reaktif ve bildirimsel kullanıcı arayüzleri geliştirmenin mümkün olduğunu gösteriyor.