XMLUI

 (blog.jonudell.net)
2 poin oleh GN⁺ 2025-07-21 | 1 komentar | Bagikan ke WhatsApp
  • XMLUI menerapkan model pengembangan komponen ala Visual Basic ke web modern, sehingga aplikasi web bisa dikembangkan dengan mudah bahkan tanpa pengetahuan React dan CSS
  • XMLUI memungkinkan berbagai komponen digabungkan dengan mudah melalui markup XML, serta mendukung reactive data binding, manajemen tema, ekstensi skema, dan lainnya
  • Melalui Model Context Protocol (MCP), XMLUI memungkinkan kolaborasi dengan AI untuk meningkatkan efisiensi pengembangan dan kemudahan pemeliharaan kode
  • Dengan menyederhanakan ekosistem React yang kompleks, XMLUI menyediakan lingkungan yang memungkinkan bahkan nonspesialis pun mudah mengembangkan UI dan aplikasi
  • Deployment dan ekspansi mudah dilakukan, dan bahkan pengembang yang tidak terlalu paham React·CSS tetap dapat mengerjakan berbagai proyek web dan implementasi CMS

Pengenalan dan Gambaran Umum

Proyek XMLUI adalah upaya membawa cara perakitan komponen yang intuitif dari Visual Basic tahun 1990-an ke lingkungan web. Saat itu, melalui Visual Basic, bahkan orang yang bukan programmer profesional pun dapat dengan mudah membuat perangkat lunak yang berguna dengan menghubungkan berbagai komponen. Sebaliknya, di lingkungan web, tingkat kemudahan penggunaan dan ekosistem seperti itu belum benar-benar terwujud. XMLUI membungkus komponen React dan CSS, lalu memungkinkan pengembangan aplikasi web hanya dengan markup berbentuk XML.

Berikut contoh beberapa baris kode XMLUI:

<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>

Hanya dengan sekitar 12 baris XML seperti ini, pekerjaan berikut dapat diekspresikan:

  • Mengisi opsi Select secara otomatis melalui pemanggilan API
  • Menggunakan nilai Select untuk mengambil data dari API lain
  • Mengekstrak hanya field tertentu dari hasil API, lalu melakukan binding dalam bentuk tabel

XMLUI memiliki sifat modern, berbasis komponen, dan reaktif, namun pengguna tetap bisa mengembangkan dan memelihara aplikasi tanpa pengetahuan internal tentang React atau CSS. Inilah pembeda penting yang menurunkan hambatan dari ekosistem JavaScript yang ada saat ini.

Ekosistem Komponen

Masa lalu dan masa kini

Pada era Visual Basic dulu, berbagai building block (komponen) seperti chart, jaringan, akses data, dan pemutaran media dapat dengan mudah digabungkan ke dalam aplikasi. Namun, ekosistem komponen yang produktif seperti ini tidak sepenuhnya berpindah ke web. Komponen berbasis React kini memang banyak digunakan di web, tetapi tetap membutuhkan kemampuan pengembang profesional. XMLUI membungkus komponen-komponen React ini agar bisa digunakan siapa saja dengan mudah.

Komponen kustom

XMLUI menyediakan beragam komponen bawaan, sekaligus memungkinkan mendefinisikan komponen sendiri yang dapat digabungkan dan digunakan ulang sesuai kebutuhan. Misalnya, komponen TubeStops untuk menampilkan informasi stasiun kereta bawah tanah London dapat didefinisikan seperti berikut:

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

TubeStops mengambil data dari API berdasarkan nama Line lalu menampilkannya dalam format tabel. Dari markup aslinya terlihat bahwa keterbacaannya tinggi, dan ketika kode tumbuh melebihi 100 baris, refactor ke dalam komponen akan mempermudah pemeliharaan. Belakangan ini, dengan bantuan LLM (large language model), refactor komponen dan pemeliharaan kode menjadi jauh lebih fleksibel.

Reactive binding dan pengembangan deklaratif

Di XMLUI, perubahan pada data dan nilai UI terhubung secara otomatis (Reactive Data Binding). Misalnya, ketika pilihan pada komponen Select berubah, alamat API yang mereferensikannya (url pada DataSource) juga akan otomatis diperbarui sehingga data baru diambil kembali. Cara ini mirip dengan referensi sel di Excel.

Pengguna memang perlu membiasakan diri dengan paradigma pengembangan deklaratif (Declarative), bukan gaya imperatif lama, tetapi setelah terbiasa, pengalaman pengembangannya menjadi cepat dan intuitif. Misalnya, saat mengimplementasikan fitur pencarian (Search), struktur yang memperbarui data secara real-time dan langsung merefleksikannya ke tabel hanya berdasarkan perubahan nilai input box, tanpa tombol, dapat dibuat dengan mudah.

Sistem tema

Pada awalnya, perhatian terhadap sistem tema tidak terlalu besar, tetapi fitur manajemen tema di XMLUI sangat kuat. Tanpa menulis CSS, elemen seperti warna, latar belakang, spasi, font, dan lainnya di tiap komponen dapat dikelola secara konsisten berbasis variabel. Sebagai contoh, warna tombol dapat ditentukan berbeda menurut konteks dan statusnya (seperti hover).

Tema memungkinkan kontrol rinci dalam bentuk seperti color-primary, backgroundColor-Button, dan sebagainya, sehingga palet warna UI secara keseluruhan dapat didefinisikan dengan mudah lalu diterapkan secara global maupun spesifik.

Pemanfaatan skrip

XMLUI tidak sepenuhnya deklaratif. Seperti Visual Basic, XMLUI memungkinkan penerapan parsial skrip sederhana (umumnya JavaScript), misalnya untuk memproses respons API (transformResult) atau conditional rendering. Tingkat kesulitannya cukup terjangkau sehingga pengembang umum, tanpa harus berada di level pakar, tetap bisa memanfaatkannya.

Model Context Protocol (MCP) dan kolaborasi AI

Menanggapi pertanyaan, "Sekarang LLM bisa langsung membuat aplikasi React, lalu apa arti XMLUI?", penulis menekankan nilai XMLUI dari sisi aksesibilitas kode, maintainability, dan kolaborasi.

MCP (Model Context Protocol) menyediakan server agar agen seperti LLM dapat mencari, memahami, dan mengutip kode/dokumentasi/contoh XMLUI. Dengan ini, AI dan pengembang dapat berkomunikasi dalam jaringan makna yang sama, lalu mengoordinasikan pembuatan dan modifikasi kode secara bertahap dan otomatis.

  • Contoh: pengembangan dapat dilanjutkan sambil langsung melakukan tanya jawab dengan LLM tentang cara memakai fitur tertentu, contoh, dokumentasi, dan tempat penggunaannya

Panduan untuk berkolaborasi dengan baik bersama LLM juga disediakan. Misalnya, berdiskusi terlebih dahulu sebelum mengusulkan kode, hanya memakai contoh yang terdokumentasi, dan membatasi styling yang tidak perlu. Selain itu, situs dokumentasi menyiapkan bagian "How To" serta integrasi MCP agar AI juga mudah mengaksesnya.

Manajemen konten dan penerapan CMS

Dengan XMLUI, penyusunan website dan CMS juga menjadi mudah, dan tanpa pengetahuan React atau Next.js pun perubahan halaman sehari-hari serta pemeliharaan dapat dilakukan dengan mudah. Faktanya, situs resmi XMLUI, demo, dan dokumentasi semuanya dibuat dan dipelihara menggunakan XMLUI.

Karena kode, penjelasan, dan demo real-time bisa disajikan bersama dalam satu dokumen, pendekatan ini sangat praktis.

Ekstensibilitas

Pada dasarnya, XMLUI membungkus beragam komponen React, tetapi membungkus komponen eksternal baru juga mudah dilakukan. Sebagai contoh, editor dokumen tingkat lanjut Tiptap dapat dengan mudah dibungkus menjadi XMLUI TableEditor. Dalam praktiknya, bagian yang sulit pada pengeditan Markdown (seperti membuat tabel) bisa diselesaikan dengan mudah melalui editor visual.

Dengan cara ini, peran antara pengembang komponen dan pengembang solusi yang sebelumnya terpisah jelas kini menjadi lebih cair; melalui XMLUI, pengembang umum pun dapat langsung memperluas dan mengombinasikan komponen UI yang berguna.

Deployment

Deployment aplikasi XMLUI sangat sederhana.

  • Konfigurasi minimum: cukup Main.xmlui, index.html, dan file JS XMLUI
  • Bisa memakai server web statis apa pun, dan dapat langsung berjalan dari bucket AWS S3
  • Lingkungan server yang kompleks tidak wajib, meski bila perlu server lokal tambahan, proxy CORS, dan sebagainya tetap dapat dikonfigurasikan

Pengembangan web untuk semua orang

Pencipta XMLUI, Gent Hito, telah lama berfokus menurunkan hambatan masuk ke lingkungan pengembangan melalui /n software, CData, dan lainnya.

  • /n software: kemudahan penggunaan komponen jaringan
  • CData: penyederhanaan akses data
  • XMLUI: penyederhanaan pengembangan UI

Selama sekitar 20 tahun terakhir, pengembangan UI web makin terspesialisasi dan kompleks, tetapi XMULI dirancang agar bahkan pengembang solusi yang bukan spesialis pun dapat dengan mudah membuat UI dan aplikasi mereka sendiri. Dalam praktiknya, ini dapat langsung diterapkan ke berbagai contoh seperti UI dashboard terkait CoreSSH.

Sangat direkomendasikan bagi semua pengembang yang menginginkan lingkungan pembuatan aplikasi web yang lebih mudah, terutama solution builder nonspesialis, pengembang junior, dan pengembang yang berfokus pada backend.

Bacaan terkait

1 komentar

 
GN⁺ 2025-07-21
Opini Hacker News

  • Jon sudah lama berkecimpung di industri ini, dan saya penggemarnya. Dia orang berpengalaman yang sudah melalui banyak hal, dan pendapatnya layak didengar. Saya penggemar web components, tetapi saya rasa alasan React menjadi dominan adalah karena lingkungannya sulit diakses oleh para developer yang dulu sangat mahir memanfaatkan komponen Visual Basic. Bagi saya, inilah bagian terpenting dari tulisan ini. Penjelasan teknisnya penting, tetapi tulisan ini juga menangkap esensi mengapa upaya seperti ini diperlukan. Apakah XMLUI akan memberi abstraksi yang tepat bagi developer seperti itu masih harus dilihat. Meski begitu, melihat tantangan seperti ini saja sudah menyenangkan

    • Saat ini kodenya hanya berjalan di browser JS evergreen. Rasanya mirip seperti VB lama yang hanya benar-benar berjalan baik di Windows dan lingkungan dengan DLL tertentu terpasang

  • Sekitar 2014, Polymer juga pernah mencoba hal serupa. Misalnya, permintaan jaringan diimplementasikan dengan komponen seperti <iron-ajax> tautan iron-ajax. Dulu juga ada masa ketika Adobe Flex sangat populer, dan sekarang masih bertahan sebagai Apache Royale tautan Apache Royale. Di Microsoft juga pernah ada XAML, NetUI, FlexUI, dan UI Office 2007 pun dibuat dengan pendekatan seperti itu. Secara teori semuanya keren, tetapi dalam praktiknya saya merasa abstraksi berbasis markup seperti ini, bahkan untuk pemula, kurang efektif dibanding pendekatan code-first seperti JSX

    • Dulu juga ada Coldfusion (merinding nostalgia)

  • Saya punya dua pikiran sekaligus: "kita sedang menciptakan ulang HTML sekali lagi" dan "ini sepertinya langsung berguna buat saya". Memang begitulah manusia, makhluk yang multidimensional

    • Terima kasih sudah memperkenalkan penyair Walt Whitman dan karyanya. "Apakah aku bertentangan dengan diriku sendiri? Kalau begitu, aku rela bertentangan dengan diriku sendiri"
    • Ungkapan yang sangat mengena. Pada akhirnya, yang penting adalah apakah ini benar-benar langsung berguna bagi orang-orang yang, seperti Anda, memang membutuhkan hal seperti ini

  • Saya dulu berkontribusi ke KDE dengan Qt C++ selama 7 tahun. Pendekatan ini mengingatkan saya pada file .ui di QtWidgets, yaitu file UI kustom yang mengikuti skema XML tertentu. Belakangan QML muncul, tetapi menurut saya tidak intuitif sehingga saya kehilangan minat. Namun saya tetap merasa penggunaan XML untuk mendefinisikan UI itu masuk akal, dan saya paham kenapa masih dipakai di lingkungan berskala besar

    • Masih ada orang yang menggunakan Qt hanya dengan C++ dan file .ui. Mereka tidak merasa ada alasan yang cukup kuat untuk pindah ke QML
    • Saya dengar launcher game Blizzard juga memakai QT, dan saya selalu merasa kualitas UI software Blizzard sangat bagus. Penasaran apakah ada proyek Qt lain yang layak direkomendasikan
    • wxWidgets atau file glade juga berada dalam konteks yang sama

  • Menurut saya, pendekatan GUI terbaik adalah JUCE. Semua elemen UI berupa kelas C++, dengan fungsi gambar terpisah. Elemen UI baru bisa dibuat dengan mengomposisikan elemen lain menjadi kelas baru, dan editornya menghasilkan source code secara otomatis. Hal-hal seperti tombol memiliki blok if…else besar untuk menangani rendering berdasarkan state (hover, pressed, active, disabled, dan seterusnya). Di dalamnya dipakai library drawing tipis seperti Metal/OpenGL/DirectX. Pendekatan yang sepenuhnya imperative seperti ini terasa menyegarkan. Kita bisa memasang breakpoint di mana saja dan langsung melihat dipanggil bagaimana, dengan parameter apa. Mengekspor hasil tengah rendering ke imdraw juga mudah. Selain anti-aliasing font, rendering-nya hampir pixel-perfect di semua platform. Sementara itu, pendekatan XML yang diperkenalkan di sini justru terasa seperti sihir yang bergantung pada framework dan selalu saya hindari. Saya sangat yakin setelah 3 kali update saja layout-nya akan mulai sedikit meleset. Pengguna bukan mengontrol layout secara langsung, melainkan memohon belas kasihan framework. Electron sedikit mengurangi masalah seperti ini karena berdiri di atas teknologi lama (CSS dan sejenisnya), tetapi kalau tidak, kita akan terus kesulitan mengendalikan layout

    • Saya belum pernah memakai JUCE, tetapi kadang saya merindukan masa Qt lama ketika semuanya berupa kelas C++. Bahasa template memang sedang dominan, tetapi bagi saya komposisi kelas dan objek jauh lebih mudah dibaca. Keunggulan terbesar template tampaknya cuma "apakah modul ini sudah benar masuk di bawah parent-nya?"
    • Akan menarik kalau ada yang bisa berbagi pengalaman tentang JUICE dan aksesibilitas
    • Saya tidak terlalu tahu JUCE, tetapi JUCE::Component tampaknya mirip elemen DOM/canvas, jadi masih bisa dibandingkan dengan platform web. XMLUI justru lebih tepat dibandingkan dengan sistem UI deklaratif di atas JUCE (GUI Magic, JIVE, VITRO). UI deklaratif dan imperative bukan sesuatu yang saling meniadakan. Lingkungan yang memakai keduanya, seperti SwiftUI dan UIKit, juga umum
    • Saya belum memakai JUCE, tetapi pendekatan imperative memudahkan kontrol karena, walaupun implementasinya membesar, kita tetap tahu dengan jelas semua yang terjadi. Pendekatan deklaratif selalu butuh jalan keluar, dan jalan keluar ini sering kali harus dibuat sendiri atau sulit ditembus
    • Saya memakainya selama 7 tahun di dunia pengembangan audio, dan sekarang saya pakai JUCE untuk semua GUI lintas platform berperforma tinggi dan aplikasi umum. Begitu Anda punya pipeline JUCE -> CI yang layak, rasanya kemungkinan yang terbuka jadi tak terbatas. Meski begitu, kadang saya juga membayangkan akan seru kalau semua kode GUI JUCE ditulis lewat frontend mirip Lazarus, misalnya dengan LUA, lalu dicampur dengan C++ untuk menghasilkan monster Lua-C++

  • Sayang sekali XSLT tidak disebut. Menurut saya itu elemen penting untuk menjelaskan betapa jauhnya lompatan perkembangan saat ini kepada orang-orang yang dulu pernah memikirkan styling/transformasi XML. Mengingat Jon Udell juga pernah menulis tentang XSLT tautan referensi, mungkin kali ini sengaja tidak dimasukkan, tetapi saya tidak tahu alasannya

    • Di kebanyakan tempat yang pernah memakai XSLT, hasil akhirnya adalah "gumpalan kusut rumit yang tak seorang pun selain penulis aslinya berani sentuh". Entah kenapa teknologi ini cenderung jatuh ke jebakan kompleksitas atau menarik orang-orang yang memuja kompleksitas. Bagaimanapun, saya rasa ini bukan pilihan yang cocok untuk tujuan yang dikejar OP
    • Referensi sejarah memang perlu, tetapi tujuan tulisan ini bukan berfokus pada masa lalu melainkan melangkah maju. Maksudnya adalah mencoba alat ini sendiri dan menilai apakah alat ini produktif untuk membangun UI
    • Dalam tulisan ini XSLT tidak terlalu penting. Intinya adalah menjelaskan kepada pembaca modern mengapa alat seperti ini berguna. XSLT memang terkait secara historis, tetapi saya rasa menyebutnya di sini tidak akan membantu penyampaian ide
    • Sejak mengenal SXML/SSAX karya Oleg Kiselyov, saya benar-benar meninggalkan XSLT. SSAX adalah parser XML terbaik yang pernah saya pakai
    • Pengalaman pertama saya dengan XSLT adalah sketchers.com Sketchy Skechers.com. Sayangnya, sepertinya sekarang itu sudah tidak dipakai lagi

  • Belakangan saya juga sedang membuat sesuatu yang mirip, berbasis HTML, web components, dan signals. Namanya proyek Heximal tautan Heximal. Saya rasa jika ekspresi, template, reaktivitas, dan struktur komponen ditambahkan ke HTML untuk membuat aplikasi atau halaman yang sangat modular dan deklaratif, itu bisa menjadi fondasi yang sangat kuat. Banyak kemampuan tambahan pada HTML itu pun bisa distandardisasi

    • Idenya menarik, tetapi di mobile (Android+Firefox) situsnya tidak tampil dengan baik
    • Situsnya sulit dibaca. Di aplikasi HN juga komentar lain tidak terlihat dengan baik, jadi saya tidak tahu apakah orang lain mengalami masalah yang sama. Ini di Firefox mobile
    • Di mobile, sebagian teks terlihat terpotong dan zoom pun tidak menyelesaikannya. Semoga ini membantu sebagai masukan
    • Saya rasa pendekatan ini bisa menjadi arus utama. Seperti C++, kekuatan kompatibilitas ke belakang adalah keunggulan yang sangat besar

  • Saya pikir uiSchema di RJSF menunjukkan arah yang baik sebagai layer presentasi yang melengkapi definisi model jsonSchema tautan Referensi uiSchema. Desainnya mengesankan, tetapi saya ingat sempat heran kenapa tidak menyebar luas

  • Saya justru sangat menantikan bagian-bagian yang belum terlihat. Selain engineering yang solid, tampaknya ada perhatian nyata untuk para programmer WYSIWYG (developer yang menyusun UI secara intuitif). Saya merasa dulu bisa masuk ke dunia pemrograman berkat Visual Basic. Tanpa pointer C++ yang rumit, saya bisa melakukan banyak hal dengan mudah dan terasa seperti sihir, dan saya berharap alur seperti ini juga tersambung ke pemrograman web lewat pendekatan yang mengutamakan pemula, sambil tetap tidak mengorbankan reaktivitas dan keluwesan, dengan kompromi yang realistis. Yang lebih menarik lagi adalah https://docs.xmlui.com/mcp. Alat seperti Claude bisa mengurangi jumlah token yang dibutuhkan saat menghasilkan kode UX/dashboard, sehingga menghasilkan kode yang lebih ringkas. Saya berencana langsung mencobanya mulai hari ini

    • Tolong kabari soal pengalaman pemakaiannya

  • XAML (terutama versi Silverlight yang ruang lingkupnya lebih sempit) bisa sangat menyenangkan jika digunakan dengan baik. Namun, kalau dipakai dengan cara yang paling mudah dan paling jelas sekaligus paling tidak efisien, hasilnya bisa mengerikan. Mungkin itulah sebabnya ia terlupakan, bersama HTML5 atau kurangnya alat pendukung. Alat yang baik seharusnya membantu pemula mencapai keberhasilan, dan dalam hal itu XAML kurang berhasil