XMLUI

 (blog.jonudell.net)
2 điểm bởi GN⁺ 2025-07-21 | 1 bình luận | Chia sẻ qua WhatsApp
  • XMLUI áp dụng mô hình phát triển component của Visual Basic vào web hiện đại, cho phép xây dựng ứng dụng web một cách đơn giản mà không cần kiến thức về React và CSS
  • XMLUI cho phép dễ dàng kết hợp nhiều component bằng markup XML, đồng thời hỗ trợ ràng buộc dữ liệu phản ứng, quản lý theme, mở rộng schema và nhiều tính năng khác
  • Thông qua Model Context Protocol (MCP), có thể cộng tác với AI để nâng cao hiệu suất phát triển và tăng khả năng bảo trì mã nguồn
  • Bằng cách đơn giản hóa hệ sinh thái React phức tạp, XMLUI mang đến môi trường giúp ngay cả người không chuyên cũng dễ dàng phát triển UI và ứng dụng
  • Triển khai và mở rộng đều thuận tiện, ngay cả các lập trình viên chưa rành React·CSS cũng có thể thực hiện nhiều dự án web và triển khai CMS

Giới thiệu và tổng quan

Dự án XMLUI là một nỗ lực đưa cách kết hợp component trực quan từng thấy ở Visual Basic thập niên 1990 vào môi trường web. Khi đó, với Visual Basic, ngay cả người không phải lập trình viên chuyên nghiệp cũng có thể dễ dàng tạo ra phần mềm hữu ích bằng cách nối kết nhiều component khác nhau. Trong khi đó, trên nền web, mức độ tiện dụng hay hệ sinh thái tương tự như vậy vẫn chưa thật sự hình thành. XMLUI bọc các component React và CSS, rồi cho phép phát triển ứng dụng web chỉ với markup dạng XML.

Dưới đây là một ví dụ XMLUI chỉ gồm vài dòng mã:

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

Chỉ với khoảng 12 dòng XML như vậy cũng có thể biểu đạt được các tác vụ sau:

  • Tự động điền tùy chọn cho Select thông qua gọi API
  • Dùng giá trị của Select để lấy dữ liệu từ một API khác
  • Trích xuất chỉ một trường cụ thể trong kết quả API và bind nó vào dạng bảng

XMLUI mang đặc tính hiện đại, dựa trên component và phản ứng (reactive), nhưng người dùng vẫn có thể phát triển và bảo trì mà không cần kiến thức nội bộ về React hay CSS. Đây là điểm khác biệt quan trọng giúp hạ thấp rào cản vốn có của hệ sinh thái JavaScript hiện nay.

Hệ sinh thái component

Quá khứ và hiện tại

Trong thời kỳ Visual Basic trước đây, nhiều thành phần (component) như biểu đồ, mạng, truy cập dữ liệu, phát media... có thể dễ dàng được kết hợp vào ứng dụng. Tuy nhiên, hệ sinh thái component năng suất cao như vậy đã không được chuyển nguyên vẹn sang web. Dù các component dựa trên React hiện đang được dùng phổ biến trên web, chúng vẫn đòi hỏi năng lực của lập trình viên chuyên nghiệp. XMLUI bọc các component React này để bất kỳ ai cũng có thể sử dụng dễ dàng.

Component tùy chỉnh

XMLUI không chỉ có nhiều component tích hợp sẵn, mà còn cho phép tự định nghĩa component, rồi kết hợp và tái sử dụng chúng khi cần. Ví dụ, có thể định nghĩa component TubeStops hiển thị thông tin các ga tàu điện ngầm London như sau:

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

TubeStops lấy dữ liệu từ API theo tên Line và hiển thị dưới dạng bảng. Nhìn vào markup thực tế có thể thấy tính dễ đọc rất cao, và khi mã nguồn vượt quá 100 dòng thì có thể refactor thành component để việc bảo trì dễ dàng hơn. Gần đây, với sự hỗ trợ của LLM (mô hình ngôn ngữ lớn), việc refactor component và bảo trì mã nguồn cũng trở nên linh hoạt hơn nhiều.

Ràng buộc phản ứng và phát triển khai báo

Trong XMLUI, dữ liệu và sự thay đổi giá trị của UI được liên kết tự động (Reactive Data Binding). Ví dụ, khi lựa chọn của component Select thay đổi, địa chỉ API tham chiếu tới nó (url của DataSource) cũng sẽ tự động cập nhật để truy vấn dữ liệu mới. Cách làm này tương tự như tham chiếu ô trong Excel.

Cần làm quen với mô hình phát triển khai báo (Declarative) thay vì kiểu mệnh lệnh truyền thống, nhưng một khi đã quen thì có thể có được trải nghiệm phát triển nhanh và trực quan. Chẳng hạn, khi triển khai chức năng tìm kiếm (Search), có thể dễ dàng tạo cấu trúc trong đó dữ liệu được liên kết theo thời gian thực và phản ánh vào bảng chỉ dựa trên thay đổi giá trị của ô nhập liệu, không cần nút bấm.

Hệ thống theme

Ban đầu, sự quan tâm đến hệ thống theme không quá lớn, nhưng tính năng quản lý theme của XMLUI lại rất mạnh. Không cần viết CSS, vẫn có thể quản lý nhất quán màu sắc, nền, khoảng cách, font chữ... của từng component theo dạng biến. Ví dụ, có thể chỉ định màu của nút bấm khác nhau tùy theo ngữ cảnh và trạng thái (hover, v.v.).

Theme cho phép kiểm soát chi tiết bằng các dạng như color-primary, backgroundColor-Button, đồng thời có thể dễ dàng định nghĩa bảng màu tổng thể của UI và áp dụng ở cấp toàn cục hoặc chi tiết.

Sử dụng script

XMLUI không hoàn toàn mang tính khai báo. Giống như Visual Basic, nó cho phép đưa vào từng phần các script đơn giản (chủ yếu là JavaScript), chẳng hạn để xử lý phản hồi API (transformResult) hoặc render có điều kiện. Mức độ này không quá phức tạp theo kiểu chuyên gia; một lập trình viên thông thường hoàn toàn có thể sử dụng được.

Model Context Protocol (MCP) và cộng tác với AI

Trước câu hỏi: “Bây giờ LLM đã có thể tạo trực tiếp ứng dụng React rồi, vậy XMLUI còn ý nghĩa gì?”, tác giả nhấn mạnh giá trị của XMLUI ở các khía cạnh khả năng tiếp cận mã nguồn, khả năng bảo trì và khả năng cộng tác.

MCP (Model Context Protocol) cung cấp một server để các agent như LLM có thể tìm kiếm, nắm bắt và trích dẫn mã XMLUI/tài liệu/ví dụ. Nhờ đó, AI và lập trình viên có thể giao tiếp trong cùng một mạng ngữ nghĩa, đồng thời phối hợp việc tự động sinh và chỉnh sửa mã theo hướng từng bước.

  • Ví dụ: có thể vừa phát triển vừa hỏi/đáp ngay với LLM về cách dùng một tính năng cụ thể, ví dụ, tài liệu và nơi sử dụng

Các hướng dẫn để cộng tác hiệu quả với LLM cũng được cung cấp. Ví dụ như thảo luận trước khi đề xuất mã, chỉ sử dụng các ví dụ đã được tài liệu hóa, hạn chế các phần styling không cần thiết, v.v. Ngoài ra, trang tài liệu còn có mục "How To" và cấu trúc tích hợp MCP để AI cũng có thể dễ dàng truy cập.

Quản lý nội dung và áp dụng cho CMS

Với XMLUI, việc xây dựng website và CMS cũng trở nên dễ dàng, và ngay cả không có kiến thức về React hay Next.js thì việc chỉnh sửa, bảo trì các trang thông thường vẫn rất thuận tiện. Trên thực tế, trang chính thức, demo và tài liệu của XMLUI đều được tạo và duy trì bằng chính XMLUI.

Có thể cung cấp mã, phần giải thích và demo thời gian thực trong cùng một tài liệu nên rất thực dụng.

Khả năng mở rộng

Về cơ bản, XMLUI bọc nhiều component React khác nhau, nhưng cũng dễ dàng bọc thêm các component bên ngoài mới. Ví dụ, trình soạn thảo tài liệu nâng cao Tiptap có thể được bọc một cách đơn giản thành XMLUI TableEditor. Trên thực tế, những phần khó trong chỉnh sửa Markdown (như tạo bảng) có thể được giải quyết dễ dàng bằng trình soạn thảo trực quan.

Theo cách này, trước đây vai trò của component và nhà phát triển giải pháp vốn tách biệt rõ ràng, nhưng với XMLUI, ngay cả lập trình viên phổ thông cũng có thể tự mở rộng và kết hợp các component UI hữu ích.

Triển khai

Việc triển khai ứng dụng XMLUI rất đơn giản.

  • Cấu hình tối thiểu: chỉ cần Main.xmlui, index.html và file XMLUI JS
  • Có thể dùng bất kỳ static web server nào, và có thể chạy trực tiếp trên AWS S3 bucket
  • Không bắt buộc phải có môi trường server phức tạp; nếu cần vẫn có thể cấu hình thêm local server, CORS proxy, v.v.

Phát triển web cho mọi người

Nhà sáng lập XMLUI là Gent Hito, người đã tập trung vào việc hạ thấp rào cản gia nhập của môi trường phát triển tại /n software, CData và nhiều nơi khác.

  • /n software: giúp sử dụng component mạng dễ dàng hơn
  • CData: đơn giản hóa truy cập dữ liệu
  • XMLUI: đơn giản hóa phát triển UI

Trong khoảng hơn 20 năm trở lại đây, phát triển UI trên web ngày càng chuyên biệt và phức tạp hơn, nhưng XMULI được thiết kế để ngay cả những người không phải chuyên gia cũng có thể dễ dàng tạo UI và ứng dụng của riêng mình với vai trò là nhà phát triển giải pháp. Trên thực tế, nó có thể được áp dụng ngay cho nhiều ví dụ như dashboard UI liên quan đến CoreSSH.

Rất đáng khuyến nghị cho mọi lập trình viên đang muốn có một môi trường tạo ứng dụng web dễ dàng hơn, đặc biệt là các solution builder không chuyên, lập trình viên junior và lập trình viên thiên về backend.

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-07-21
Ý kiến trên Hacker News

  • Jon đã ở trong ngành rất lâu và tôi là fan của ông ấy. Ông là người từng trải, có rất nhiều kinh nghiệm, và đáng để lắng nghe. Tôi là fan của web components, nhưng tôi nghĩ lý do React trở nên thống trị là vì môi trường này khó tiếp cận với những lập trình viên trước đây từng tận dụng rất tốt các component của Visual Basic. Đây là điểm quan trọng nhất trong bài viết này. Phần giải thích kỹ thuật cũng quan trọng, nhưng bài viết đã chạm đúng bản chất về lý do tại sao cần những thử nghiệm như thế này. Còn XMLUI có cung cấp được lớp trừu tượng phù hợp cho những lập trình viên đó hay không thì vẫn phải chờ xem. Dù vậy, chỉ riêng việc được thấy một thử thách như thế này cũng đã rất thú vị

    • Hiện tại mã chỉ chạy trên các trình duyệt JS evergreen. Cảm giác khá giống thời VB cũ chỉ thực sự chạy tốt trên Windows và trong môi trường phải cài các DLL cụ thể

  • Khoảng năm 2014, Polymer cũng từng có một nỗ lực tương tự. Ví dụ, họ dùng các component như <iron-ajax> để thực hiện network request liên kết iron-ajax. Ngoài ra còn có thời Adobe Flex rất thịnh hành, và giờ vẫn còn lại dưới tên Apache Royale liên kết Apache Royale. Bên Microsoft cũng từng có XAML, NetUI, FlexUI, và giao diện Office 2007 cũng được làm theo kiểu đó. Về lý thuyết thì tất cả đều rất hay, nhưng trên thực tế tôi thấy kiểu trừu tượng dựa trên markup như vậy kém hiệu quả hơn cách tiếp cận code-first như JSX, ngay cả với người mới bắt đầu

    • Còn có cả Coldfusion nữa (nhắc lại mà rùng mình vì hoài niệm)

  • Tôi đồng thời có suy nghĩ "chúng ta lại đang tái phát minh HTML" và cảm giác "cái này có vẻ hữu ích với tôi ngay bây giờ". Con người vốn dĩ là sinh vật đa diện

    • Cảm ơn vì đã giới thiệu nhà thơ Walt Whitman và tác phẩm của ông. "Tôi có tự mâu thuẫn với chính mình chăng? Nếu vậy thì tôi sẵn sàng là một con người mâu thuẫn"
    • Cách diễn đạt này thật sự rất đồng cảm. Cuối cùng điều quan trọng là liệu thứ này có hữu ích ngay lập tức cho những người mà bạn hình dung là đang cần nó hay không

  • Tôi từng đóng góp mã nguồn mở cho KDE trong 7 năm bằng Qt C++. Cách này làm tôi nhớ tới các file .ui của QtWidgets, tức các file UI tùy chỉnh tuân theo một XML schema cụ thể. Sau này QML xuất hiện, nhưng với tôi nó khá thiếu trực quan nên tôi mất hứng thú. Tuy vậy, tôi vẫn thấy việc dùng XML để định nghĩa UI là hợp lý, và cũng hiểu vì sao nó vẫn được dùng trong các môi trường quy mô lớn

    • Vẫn còn những người dùng Qt chỉ với C++ và file .ui. Họ không thấy đủ lý do để chuyển sang QML
    • Tôi nghe nói launcher game của Blizzard cũng dùng QT, và tôi luôn nghĩ chất lượng UI trong phần mềm của Blizzard thuộc hàng đầu. Không biết còn dự án Qt nào đáng giới thiệu nữa không
    • wxWidgets hay các file glade cũng nằm trong cùng ngữ cảnh đó

  • Theo tôi, cách tiếp cận GUI tốt nhất là JUCE. Mọi phần tử UI đều là lớp C++ riêng, với hàm vẽ tách biệt. Bạn có thể tạo phần tử UI mới bằng cách ghép các phần tử khác lại thành một lớp khác, và editor sẽ tự sinh source code. Những thứ như button thường có các khối if…else lớn để xử lý việc vẽ theo từng trạng thái như hover, pressed, active, disabled, v.v. Bên dưới, nó dùng các thư viện vẽ mỏng như Metal/OpenGL/DirectX. Kiểu làm hoàn toàn imperative này rất mới mẻ. Bạn có thể đặt breakpoint ở bất kỳ đâu và xem ngay nó được gọi như thế nào, với tham số gì. Cũng rất dễ xuất kết quả render giữa chừng sang imdraw. Trừ chuyện font anti-aliasing, nó cho ra kết quả render chính xác đến từng pixel trên hầu hết nền tảng. Trong khi đó, kiểu XML được giới thiệu ở đây lại là thứ phép màu phụ thuộc framework mà tôi luôn cố tránh. Tôi gần như chắc chắn chỉ cần cập nhật thêm 3 lần là layout sẽ bắt đầu lệch đi chút một. Thay vì người dùng tự kiểm soát layout, bạn chỉ đang cầu xin lòng thương của framework. Electron đỡ gặp vấn đề này hơn phần nào vì nó nằm trên công nghệ cũ như CSS, còn nếu không thì bạn sẽ luôn gặp khó trong việc kiểm soát layout

    • Tôi chưa dùng JUCE, nhưng cũng nhớ thời Qt cũ khi mọi thứ đều là lớp C++. Dù ngôn ngữ template đang là xu hướng, tôi vẫn thấy kiểu ghép từ class và object dễ đọc hơn nhiều. Có vẻ lợi thế lớn nhất của template chỉ là "module này đã được đặt đúng vào dưới parent chưa?"
    • Sẽ rất hay nếu có ai chia sẻ trải nghiệm dùng JUICE và accessibility
    • Tôi không quá rành JUCE, nhưng JUCE::Component có vẻ giống các phần tử DOM/canvas nên cũng có thể so với nền tảng web. XMLUI có lẽ nên được so với các hệ thống UI khai báo chạy trên JUCE hơn như GUI Magic, JIVE, VITRO. UI khai báo và imperative không phải là hai thứ loại trừ lẫn nhau. Các môi trường vừa dùng cả hai như SwiftUI và UIKit là chuyện rất phổ biến
    • Tôi chưa dùng JUCE, nhưng cách imperative giúp bạn dễ kiểm soát hơn vì dù triển khai có lớn đến đâu, bạn vẫn biết rõ mọi thứ đang diễn ra. Còn khai báo thì lúc nào cũng cần một đường thoát, mà đường thoát đó thường hoặc phải tự làm, hoặc rất khó chui qua
    • Tôi đã dùng nó 7 năm trong mảng phát triển audio, và giờ gần như dùng JUCE cho mọi GUI/app đa nền tảng hiệu năng cao nói chung. Chỉ cần dựng được một pipeline JUCE -> CI đủ dùng là khả năng gần như vô hạn. Dù vậy, thỉnh thoảng tôi vẫn tưởng tượng chuyện viết toàn bộ mã GUI của JUCE bằng một frontend kiểu Lazarus, chẳng hạn LUA, rồi trộn với C++ để tạo ra một con quái vật lua-cộng-cộng cũng khá vui

  • Tôi thấy tiếc vì bài không nhắc đến XSLT. Với những ai từng nghĩ về chuyện styling/transform XML trước đây, đây là một yếu tố quan trọng để giải thích bước nhảy lớn của hiện tại. Nhìn việc Jon Udell từng viết về XSLT liên kết tham khảo, có vẻ như lần này ông ấy đã cố ý bỏ qua, nhưng tôi không rõ lý do

    • Ở những nơi tôi từng thấy XSLT được dùng, nó hầu như đều là "một mớ rối tung mà không ai ngoài tác giả gốc dám đụng vào". Công nghệ này có xu hướng rất lạ là hoặc rơi vào cái bẫy phức tạp hóa, hoặc thu hút những người ám ảnh với sự phức tạp. Dù sao thì tôi cũng không nghĩ nó phù hợp với mục tiêu mà OP đang hướng tới
    • Tham chiếu lịch sử thì cần thật, nhưng mục tiêu của bài này không phải là nhìn về quá khứ mà là tiến lên phía trước. Mục đích là tự tay dùng thử công cụ này và đánh giá xem nó có giúp xây UI hiệu quả hay không
    • Trong bài này, XSLT không quá quan trọng. Trọng tâm là giải thích vì sao công cụ như vậy lại hữu ích với độc giả hiện đại. XSLT có liên quan về mặt lịch sử, nhưng nhắc đến nó ở đây có lẽ không giúp truyền tải ý tưởng tốt hơn
    • Từ khi biết đến SXML/SSAX của oleh kiselyov, tôi đã bỏ hẳn XSLT. SSAX là parser XML tốt nhất mà tôi từng dùng
    • Trải nghiệm XSLT đầu tiên của tôi là sketchers.com Sketchy Skechers.com. Tiếc là có vẻ giờ họ không còn dùng nữa

  • Gần đây tôi cũng đang làm thứ tương tự dựa trên HTML, web components và signals. Đó là dự án Heximal liên kết Heximal. Tôi nghĩ nếu bổ sung expression, template, reactivity và cấu trúc component lên HTML để tạo ra các app hay trang vừa rất mô-đun vừa mang tính khai báo, thì đó sẽ là một nền tảng rất mạnh. Nhiều tính năng bổ sung vào HTML thậm chí cũng có thể được chuẩn hóa

    • Ý tưởng thì thú vị, nhưng trên mobile (Android+Firefox) trang web hiển thị không ổn lắm
    • Trang web khá khó đọc. Trên app HN tôi cũng không thấy rõ các bình luận khác, nên không biết người khác có gặp cùng vấn đề không. Tôi đang dùng Firefox mobile
    • Trên mobile, một phần văn bản bị cắt và ngay cả phóng to cũng không khắc phục được. Bạn nên xem lại
    • Tôi nghĩ cách tiếp cận này có thể trở thành xu hướng chủ đạo. Giống như C++, sức mạnh của khả năng tương thích ngược là một lợi thế cực lớn

  • Tôi nghĩ uiSchema của RJSF đã chỉ ra một hướng đi tốt với vai trò lớp trình bày bổ sung cho phần định nghĩa model jsonSchema liên kết uiSchema Reference. Nó được thiết kế rất ấn tượng, và tôi nhớ khi đó đã ngạc nhiên vì nó không được phổ biến rộng hơn

  • Tôi đặc biệt kỳ vọng vào những phần mà hiện giờ vẫn chưa nhìn thấy. Ngoài nền tảng kỹ thuật vững chắc, có vẻ như họ cũng thực sự quan tâm đến các lập trình viên WYSIWYG, tức những người xây UI theo cách trực quan. Tôi nghĩ hồi nhỏ mình tiếp cận được với lập trình cũng nhờ Visual Basic. Không cần động đến các con trỏ C++ phức tạp mà vẫn có thể làm được rất nhiều thứ một cách dễ dàng và gần như kỳ diệu. Tôi hy vọng dòng chảy này sẽ tiếp tục nối sang lập trình web theo hướng ưu tiên người mới bắt đầu, đồng thời vẫn đạt được những thỏa hiệp thực tế phù hợp mà không phải hy sinh phản ứng tức thời hay độ mượt. Điều còn thú vị hơn là https://docs.xmlui.com/mcp. Các công cụ như Claude khi sinh mã UX/dashboard có thể cần ít token hơn và tạo ra mã gọn hơn. Tôi định bắt đầu thử nó ngay từ hôm nay

    • Nhất định hãy cho biết trải nghiệm sử dụng nhé

  • XAML, đặc biệt là phiên bản Silverlight có phạm vi hẹp hơn, từng là một công cụ thực sự rất vui nếu biết cách tận dụng. Nhưng nếu dùng theo cách dễ nhất, hiển nhiên nhất, và cũng kém hiệu quả nhất thì nó lại rất tệ. Có lẽ nó bị lãng quên vì HTML5 hoặc do thiếu công cụ phù hợp. Một công cụ tốt nên giúp cả người mới đi đến thành công, và ở điểm này XAML đã không làm được