XMLUI

 (blog.jonudell.net)
2 puan yazan GN⁺ 2025-07-21 | 1 yorum | WhatsApp'ta paylaş
  • XMLUI, Visual Basic’in bileşen geliştirme modelini modern web’e uygulayarak, React ve CSS bilgisi olmadan da web uygulamalarının kolayca geliştirilebilmesini sağlıyor
  • XMLUI, çeşitli bileşenleri XML işaretlemesiyle kolayca birleştirebiliyor; reaktif veri bağlama, tema yönetimi, şema genişletme gibi özellikleri destekliyor
  • Model Context Protocol (MCP) üzerinden yapay zeka ile iş birliği yaparak geliştirme verimliliğini artırabiliyor ve kodun bakımını kolaylaştırabiliyor
  • XMLUI, karmaşık React ekosistemini sadeleştirerek uzman olmayanların da kolayca UI ve uygulama geliştirebildiği bir ortam sunuyor
  • Dağıtım ve genişletme kolay; React·CSS’e çok hakim olmayan geliştiriciler bile çeşitli web projeleri ve CMS uygulamaları geliştirebiliyor

Giriş ve genel bakış

XMLUI projesi, 1990’lardaki Visual Basic’te görülen sezgisel bileşen birleştirme yaklaşımını web ortamına taşımayı amaçlıyor. O dönemde Visual Basic sayesinde profesyonel programcı olmayanlar bile farklı bileşenleri bir araya getirerek kullanışlı yazılımları kolayca oluşturabiliyordu. Buna karşılık web ortamında aynı düzeyde bir kullanılabilirlik ya da ekosistem oluşamadı. XMLUI, React bileşenlerini ve CSS’i sarmalayarak yalnızca XML biçimindeki işaretlemeyle web uygulaması geliştirmeyi mümkün kılıyor.

Aşağıda birkaç satırlık bir XMLUI kod örneği yer alıyor:

<App>
  <Select id="lines" initialValue="bakerloo">
    <Items data="https://api.tfl.gov.uk/line/mode/tube/status">;
    </Items>
  </Select>
  <DataSource
    id="tubeStations"
    url="https://api.tfl.gov.uk/Line/{lines.value}/Route/Sequence/inbound";
    resultSelector="stations"/>
  <Table data="{tubeStations}" height="280px">
    <Column bindTo="name" />
    <Column bindTo="modes" />
  </Table>
</App>

Yaklaşık 12 satırlık bu XML ile bile şu işlemler ifade edilebiliyor:

  • API çağrısıyla Select seçeneklerini otomatik doldurma
  • Select değerini kullanarak başka bir API’den veri alma
  • API sonucundaki belirli alanları çekip bunları tablo biçiminde bağlama

XMLUI, modern, bileşen tabanlı ve reaktif bir yapıya sahip olmasına rağmen, kullanıcıların React ya da CSS’in iç yapısını bilmeden geliştirme ve bakım yapabilmesine olanak tanıyor. Bu da mevcut JavaScript ekosisteminin yarattığı bariyeri düşüren önemli bir fark yaratıyor.

Bileşen ekosistemi

Geçmiş ve bugün

Visual Basic döneminde grafikler, ağ, veri erişimi, medya oynatma gibi çeşitli yapı taşları (bileşenler) uygulamalara kolayca eklenebiliyordu. Ancak bu üretken bileşen ekosistemi web’e tam anlamıyla taşınamadı. Bugün web’de ağırlıklı olarak React tabanlı bileşenler kullanılsa da hâlâ uzman geliştirici becerisi gerekiyor. XMLUI, bu React bileşenlerini sarmalayarak herkesin kolayca kullanabilmesini sağlıyor.

Özel bileşenler

XMLUI; zengin yerleşik bileşenlerin yanı sıra, doğrudan bileşen tanımlamayı ve bunları ihtiyaç halinde birleştirip yeniden kullanmayı da destekliyor. Örneğin, London metro istasyon bilgilerini gösteren TubeStops bileşeni şöyle tanımlanabiliyor:

<Component name="TubeStops">
  <DataSource ... />
  <Text variant="strong">{...}</Text>
  <Table ... >
    <Column ... />
  </Table>
</Component>

TubeStops, hat adına göre API’den veri çekip bunu tablo halinde gösteriyor. Gerçek işaretlemeye bakıldığında okunabilirliğin yüksek olduğu görülüyor; kod 100 satırı aştığında bunu bileşene ayırarak yeniden düzenlemek bakımı kolaylaştırıyor. Son dönemde LLM (büyük dil modeli) desteğiyle bileşen refaktörü ve kod bakımı da daha esnek hale geldi.

Reaktif bağlama ve bildirimsel geliştirme

XMLUI’de veri ile UI’daki değer değişimleri otomatik olarak birbirine bağlanıyor (Reactive Data Binding). Örneğin Select bileşenindeki seçim değiştiğinde, buna referans veren API adresi (DataSource içindeki url) de otomatik güncellenerek yeni veriyi yeniden çekiyor. Bu yaklaşım, Excel’deki hücre başvurularına benziyor.

Eski tarz komut temelli geliştirme yerine bildirimsel (Declarative) geliştirme paradigmasına alışmak gerekiyor; ancak alışıldıktan sonra hızlı ve sezgisel bir geliştirme deneyimi sunuyor. Örneğin arama işlevi uygulanırken, butona gerek kalmadan yalnızca giriş kutusundaki değer değişimine göre verinin gerçek zamanlı bağlanıp tabloya yansıtıldığı bir yapı kolayca kurulabiliyor.

Tema sistemi

Başlangıçta tema sistemine ilgi yüksek değildi, ancak XMLUI’nin tema yönetimi özelliği oldukça güçlü. CSS yazmadan bile her bileşenin rengi, arka planı, boşlukları, yazı tipi gibi özellikleri değişken tabanlı ve tutarlı biçimde yönetilebiliyor. Örneğin buton rengi; bağlama ve duruma göre (hover gibi) farklı şekilde tanımlanabiliyor.

Temalarda color-primary, backgroundColor-Button gibi ayrıntılı kontrol imkânı bulunuyor; genel UI renk paleti kolayca tanımlanıp küresel ya da daha ince düzeylerde uygulanabiliyor.

Betik kullanımı

XMLUI tamamen bildirimsel değil. Visual Basic’te olduğu gibi basit betiklerin (çoğunlukla JavaScript) kısmi kullanımına izin veriyor; örneğin API yanıtını işleme (transformResult) ya da koşullu render etme gibi alanlarda kullanılabiliyor. Bu, ileri düzey uzmanlık gerektirmiyor; genel geliştiricilerin rahatça kullanabileceği bir zorluk seviyesinde.

Model Context Protocol (MCP) ve yapay zeka ile iş birliği

“Artık LLM’ler doğrudan React uygulaması oluşturabiliyorken XMLUI’nin anlamı ne?” sorusuna karşı yazar, XMLUI’nin değerini kodun erişilebilirliği, bakım kolaylığı ve iş birliği açısından vurguluyor.

MCP (Model Context Protocol), LLM gibi ajanların XMLUI kodunu, belgelerini ve örneklerini arayıp anlamasına ve bunlara atıf yapmasına imkân veren bir sunucu sağlıyor. Böylece yapay zeka ve geliştiriciler aynı anlam ağı içinde iletişim kurabiliyor, kodun kademeli olarak otomatik üretilmesi ve düzenlenmesi birlikte yönlendirilebiliyor.

  • Örnek: Belirli bir özelliğin kullanım biçimi, örnekleri, belgeleri ve kullanım alanları hakkında LLM ile anlık soru-cevap yaparak geliştirme süreci ilerletilebiliyor

LLM ile doğru iş birliği kurmak için rehberler de sunuluyor. Örneğin, kod önerisi öncesinde tartışma yapılması, yalnızca belgelenmiş örneklerin kullanılması, gereksiz stil vermenin sınırlandırılması gibi ilkeler bulunuyor. Ayrıca dokümantasyon sitesinde bir "How To" bölümü ve MCP entegrasyonu sayesinde yapay zekanın da kolayca erişebileceği bir yapı hazırlanmış durumda.

İçerik yönetimi ve CMS kullanımı

XMLUI ile web sitesi ve CMS kurmak da kolay; React veya Next.js bilgisi olmadan gündelik sayfa düzenleme ve bakım işleri rahatlıkla yapılabiliyor. Nitekim XMLUI’nin resmi sitesi, demoları ve belgeleri tamamen XMLUI ile oluşturulup yönetiliyor.

Kod, açıklama ve canlı demoyu tek bir belgede birlikte sunabilmesi de pratik bir avantaj sağlıyor.

Genişletilebilirlik

Temelde XMLUI çeşitli React bileşenlerini sarmalıyor, ancak yeni dış bileşenleri sarmalamak da kolay. Örneğin gelişmiş belge editörü Tiptap, XMLUI TableEditor olarak rahatça sarmalanabiliyor. Özellikle Markdown düzenlemede zorlayıcı noktalar (örneğin tablo oluşturma) görsel düzenleyiciyle kolayca çözülebiliyor.

Böylece eskiden bileşen geliştiricileri ile çözüm geliştiricileri arasında net şekilde ayrılan roller, XMLUI sayesinde sıradan geliştiricilerin de yararlı UI bileşenlerini doğrudan genişletip birleştirebilmesine olanak tanıyor.

Dağıtım

XMLUI uygulamalarını dağıtmak oldukça basit.

  • En küçük yapılandırma: Yalnızca Main.xmlui, index.html ve XMLUI JS dosyası yeterli
  • Herhangi bir statik web sunucusu kullanılabilir; doğrudan AWS S3 bucket üzerinde de çalıştırılabilir
  • Karmaşık bir sunucu ortamı zorunlu değildir; gerekirse ek yerel sunucu, CORS proxy gibi yapılar da kurulabilir

Herkes için web geliştirme

XMLUI’nin yaratıcısı Gent Hito, /n software ve CData gibi şirketlerde geliştirme ortamına giriş bariyerini düşürmeye odaklanmıştı.

  • /n software: ağ bileşenlerini kolay kullanma
  • CData: veri erişimini basitleştirme
  • XMLUI: UI geliştirmeyi sadeleştirme

Son 20 yılda web’de UI geliştirme giderek daha uzmanlaşmış ve karmaşık hale geldi; ancak XMULI, uzman olmayan çözüm geliştiricilerin bile kendi UI’larını ve uygulamalarını kolayca oluşturabilmesi için tasarlandı. Gerçekten de CoreSSH ile ilgili dashboard UI’ları gibi çeşitli örneklere doğrudan uygulanabiliyor.

Daha kolay bir web uygulaması geliştirme ortamı arayan tüm geliştiricilere; özellikle uzman olmayan çözüm üreticilerine, junior geliştiricilere ve backend ağırlıklı geliştiricilere güçlü biçimde öneriliyor.

İlgili okumalar

1 yorum

 
GN⁺ 2025-07-21
Hacker News görüşleri

  • Jon uzun zamandır sektörün içinde ve ben onun hayranıyım. Çok deneyim yaşamış, olgun birisi ve anlattıklarını dinlemeye değer. Ben web component'lerin hayranıyım ama React'in baskın olmasının nedeni, eski Visual Basic component'lerini iyi kullanan geliştiricilerin erişmekte zorlandığı bir ortam olması diye düşünüyorum. Bu yazının en önemli kısmı da bu. Teknik açıklamalar önemli ama neden böyle bir denemeye ihtiyaç duyulduğunun özüne de değiniyor. XMLUI'nin bu geliştiriciler için uygun bir soyutlama sunup sunmayacağını görmek gerekecek. Yine de böyle denemeleri görmek bile keyifli

    • Şu anki kod yalnızca JS evergreen tarayıcılarda çalışıyor. Eski VB'nin yalnızca Windows'ta ve belirli DLL'lerin kurulu olduğu ortamlarda düzgün çalışmasına benzer bir his veriyor

  • 2014 civarında Polymer'da da buna benzer girişimler vardı. Örneğin ağ istekleri <iron-ajax> gibi component'lerle uygulanıyordu iron-ajax bağlantısı. Bir de Adobe Flex'in çok popüler olduğu bir dönem vardı; bugün Apache Royale olarak yaşamını sürdürüyor Apache Royale bağlantısı. Microsoft tarafında da XAML, NetUI, FlexUI vardı ve Office 2007 arayüzü de bu şekilde yapılmıştı. Teoride hepsi harikaydı ama pratikte bu tür işaretleme tabanlı soyutlamaların yeni başlayanlar için bile JSX gibi kod öncelikli yaklaşımlardan daha etkili olmadığını hissettim

    • Coldfusion da vardı (anılarını düşününce ürperiyorum)

  • Aynı anda hem "HTML'i yeniden icat ediyoruz" diye düşünüyorum hem de "bu bana hemen şimdi faydalı olabilir" hissine kapılıyorum. İnsan dediğin zaten çok katmanlı bir varlık

    • Walt Whitman adlı şairi ve onun eserlerini tanıttığın için teşekkürler. "Kendimle çelişiyor muyum? O halde memnuniyetle çelişiyorum"
    • Gerçekten çok yerinde bir ifade. Sonuçta önemli olan bunun, senin gibi buna ihtiyaç duyduğunu hayal ettiğin insanlar için hemen işe yarar olup olmadığı

  • Qt C++ ile KDE'ye 7 yıl boyunca açık kaynak katkısı yaptım. Bu yaklaşım bana QtWidgets'in .ui dosyalarını, yani belirli bir XML şemasını izleyen özel UI dosyalarını hatırlatıyor. Sonradan QML geldi ama bana sezgisel gelmediği için ilgimi kaybettim. Yine de UI tanımında XML kullanmanın mantıklı olduğunu düşünüyorum ve büyük ölçekli ortamlarda hâlâ kullanılmasını anlayabiliyorum

    • Hâlâ yalnızca C++ ve .ui dosyalarıyla Qt kullanan insanlar var. QML'e geçmek için yeterince güçlü bir neden görmediler
    • Blizzard oyun başlatıcısının da Qt kullandığını duymuştum; Blizzard yazılımlarının UI kalitesinin hep üst düzey olduğunu düşünmüşümdür. Önerebileceğiniz başka Qt projeleri var mı diye merak ediyorum
    • wxWidgets ya da glade dosyaları da aynı bağlamda değerlendirilebilir

  • Bence en iyi GUI yaklaşımı JUCE. Tüm UI öğeleri birer C++ sınıfı ve çizim fonksiyonları ayrı. Yeni UI öğeleri, diğer öğelerin bileşimiyle yine başka sınıflar olarak oluşturulabiliyor ve editör kaynak kodunu otomatik üretiyor. Buton gibi öğelerde durumlara göre (hover, pressed, active, disabled vb.) çizim yapmak için büyük if…else blokları oluyor. İçeride Metal/OpenGL/DirectX gibi ince bir çizim kütüphanesi kullanıyor. Bu kadar tamamen imperative bir yaklaşım taze hissettiriyor. İstediğiniz yere breakpoint koyabiliyor, hangi parametrelerle nasıl çağrıldığını anında görebiliyorsunuz. Render sürecinin ara sonuçlarını imdraw olarak dışa aktarmak da kolay. Yazı tipi anti-aliasing'i dışında neredeyse tüm platformlarda piksel düzeyinde doğru render alıyorsunuz. Buna karşılık burada tanıtılan XML yaklaşımı, benim hep kaçınmaya çalıştığım framework'e bağımlı sihir gibi geliyor. Üç güncelleme sonra bile layout'un biraz biraz kayacağından neredeyse eminim. Kullanıcı layout'u doğrudan kontrol etmek yerine framework'ün insafına kalıyor. Electron eski teknolojilerin (CSS vb.) üstünde olduğu için bu sorunu biraz daha az yaşıyor ama aksi durumda layout kontrolü her zaman zorlayıcı oluyor

    • JUCE kullanmadım ama eski Qt günlerinde her şeyin C++ sınıfları olduğu zamanları özlüyorum. Şablon dilleri moda olsa da, sınıf ve nesne bileşimi bana çok daha okunaklı geliyor. Şablonların en büyük avantajı sanki yalnızca "bu modül gerçekten ebeveyninin altına girdi mi?" sorusuna cevap verebilmesi
    • JUICE ve erişilebilirlikle ilgili deneyim paylaşabilecek biri olsa güzel olurdu
    • JUCE'yi çok iyi bilmiyorum ama JUCE::Component, DOM/canvas öğelerine benzediği için web platformuyla kıyaslanabilir. XMLUI ise daha çok JUCE üzerindeki deklaratif UI sistemleriyle (GUI Magic, JIVE, VITRO) karşılaştırılmalı. Deklaratif ve imperative UI birbirini dışlayan şeyler değil. SwiftUI ve UIKit gibi ikisinin bir arada kullanıldığı ortamlar yaygın
    • JUCE kullanmadım ama imperative yaklaşımda uygulama büyüse bile neler olduğuna hep net biçimde hâkim olursunuz, bu da kontrolü kolaylaştırır. Deklaratif yaklaşımın ise her zaman bir kaçış kapısına ihtiyacı var ve bu kapı ya kendinizce inşa edilmek zorunda ya da içinden geçmesi zor oluyor
    • Ses geliştirme tarafında 7 yıl kullandım; bugünlerde de bütün çapraz platform yüksek performanslı GUI'ler ve genel uygulamalar için JUCE kullanıyorum. Bir kez gerçekten işe yarar bir JUCE -> CI pipeline'ı kurulduğunda sonsuz olasılıklar açılıyor. Yine de bazen JUCE'nin tüm GUI kodunu Lazarus benzeri bir frontend'de, mesela LUA ile yazıp C++ ile karıştırarak bir Lua-C++ ucubesi yaratmanın eğlenceli olacağını hayal ediyorum

  • XSLT'den hiç söz edilmemesi biraz üzücü. Eskiden XML'i stillendirme/dönüştürme üzerine kafa yormuş kişilere bugünkü gelişmenin ne kadar büyük bir sıçrama olduğunu anlatmak için önemli bir unsur olduğunu düşünüyorum. Jon Udell'in XSLT hakkında yazıları da olduğuna göre referans bağlantısı, bu kez özellikle dışarıda bırakılmış gibi duruyor ama nedenini pek anlayamadım

    • XSLT'nin kullanıldığı yerlerin çoğu, "orijinal yazarı dışında kimsenin el sürmeye cesaret edemediği karmaşık bir saç yumağı" gibiydi. Bu teknolojinin tuhaf biçimde ya karmaşıklık tuzağına düşme ya da karmaşıklık fetişistlerini kendine çekme eğilimi var. Her durumda OP'nin hedeflediği amaca uygun bir seçenek olduğunu düşünmüyorum
    • Tarihsel referans açısından gerekli olabilir ama bu yazının amacı geçmişe takılmak değil, ileriye gitmek. Amaç bu aracı doğrudan deneyip UI kurarken üretken olup olmadığını değerlendirmek
    • Bu yazıda XSLT çok önemli değil. Asıl mesele modern okurlara böyle bir aracın neden faydalı olabileceğini anlatmak. XSLT tarihsel olarak bağlantılı olsa da burada ondan söz etmenin fikri aktarmaya pek yardımcı olacağını sanmıyorum
    • Oleg Kiselyov'un SXML/SSAX'ini öğrendikten sonra XSLT'yi tamamen bıraktım. SSAX, kullandığım en iyi XML ayrıştırıcısı
    • XSLT ile ilk deneyimim sketchers.com olmuştu Sketchy Skechers.com. Ne yazık ki artık kullanmıyor gibi görünüyorlar

  • Ben de son zamanlarda HTML, web components ve signals tabanlı olarak buna benzer bir şey geliştiriyorum. Projenin adı Heximal Heximal bağlantısı. HTML'in üzerine ifadeler, şablonlar, reaktivite ve component yapısı eklendiğinde çok modüler ve deklaratif uygulamalar ya da sayfalar oluşturmak için mükemmel bir temel sunduğunu düşünüyorum. HTML'e eklenen birçok özellik de standartlaştırılabilir

    • Fikir ilginç ama mobilde (Android + Firefox) site düzgün görünmüyor
    • Siteyi okumak zor. HN uygulamasında da diğer yorumlar iyi görünmüyor, o yüzden başkalarının da aynı sorunu yaşayıp yaşamadığını bilmiyorum. Mobil Firefox'ta bakıyorum
    • Mobilde metnin bir kısmı kesilmiş görünüyor ve yakınlaştırmak da çözmüyor. Bilgin olsun
    • Bu yaklaşımın ana akım hâline gelebileceğini düşünüyorum. C++'ın ana akım olması gibi, geriye dönük uyumluluğun çok güçlü olması gerçekten büyük avantaj

  • RJSF'nin uiSchema'sının, jsonSchema model tanımını tamamlayan bir sunum katmanı olarak iyi bir yön gösterdiğini düşünüyorum uiSchema Reference bağlantısı. Etkileyici biçimde tasarlanmıştı ama yaygınlaşmaması beni şaşırtmıştı

  • Ben özellikle henüz görünmeyen kısımlar konusunda heyecanlıyım. Sağlam mühendisliğin yanı sıra, WYSIWYG programcıları (arayüzü sezgisel biçimde kuran geliştiriciler) için düşünülmüş olması güçlü bir izlenim bırakıyor. Küçükken Visual Basic sayesinde programlamaya yaklaşabildiğimi düşünüyorum. C++'ın karmaşık pointer'ları olmadan da kolay ve sihirli biçimde çok şey yapılabiliyordu; umarım bu çizgi web programlamasında da yeni başlayanları önceleyen bir yaklaşıma dönüşür ve tepkisellikten, akıcılıktan ödün vermeden yerinde gerçekçi tavizler bulunur. Daha da ilginç olan şu: https://docs.xmlui.com/mcp. Claude gibi araçlar UX/dashboard kodu üretirken gereken token sayısını düşürüp daha özlü kod üretebilir. Bugünden itibaren denemeyi düşünüyorum

    • Kullanmaya başladıktan sonra deneyimlerini mutlaka paylaş

  • XAML (özellikle kapsamı daha dar olan Silverlight sürümü) iyi kullanıldığında gerçekten keyifli bir araçtı. Ama en kolay ve en bariz (aynı zamanda verimsiz) şekilde kullanıldığında korkunç da olabiliyordu. Muhtemelen HTML5 ya da araç eksikliği yüzünden unutuldu. İyi araçlar, yeni başlayanların da başarıya ulaşmasına yardım etmeli; XAML bu konuda yetersizdi