文章摘要
XMLUI项目将Visual Basic的编程模式引入现代网页开发，通过XML标记组合React和CSS组件，简化应用开发流程。用户只需编写少量XML代码即可定义组件并从API获取数据，降低开发门槛，提升效率。
文章总结
XMLUI：让现代网页开发回归简单
在1990年代中期，即使你不是编程高手，也能通过Visual Basic（VB）和丰富的组件生态系统轻松创建实用的软件。然而，随着网页技术的发展，这种简单易用的开发模式逐渐消失。如今，网页组件（如React）虽然强大，但对非专业开发者来说却难以驾驭。XMLUI项目的推出，旨在将VB的简单开发模式引入现代网页开发，特别是基于React的组件生态系统。
XMLUI的核心思想
XMLUI通过封装React和CSS，提供了一套可以通过XML标记组合的组件。开发者无需深入了解React或CSS，只需使用简洁的XML代码即可构建功能强大的网页应用。例如，以下代码展示了一个用于查询伦敦地铁线路状态的小应用：
xml
<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>
通过短短几行XML代码，开发者可以完成以下任务： - 定义一个下拉选择框，并通过API调用填充数据。 - 定义数据源，动态生成URL并获取数据。 - 将数据绑定到表格中，并显示相关字段。
组件化开发的回归
XMLUI提供了丰富的组件库，包括常见的交互组件（如按钮、表格等）以及后台组件（如数据源、API调用等）。开发者还可以轻松定义自己的组件，并与现有组件无缝集成。例如，以下代码定义了一个用于显示地铁站信息的自定义组件：
xml
<Component name="TubeStops">
<DataSource
id="stops"
url="https://api.tfl.gov.uk/Line/{$props.line}/StopPoints"
transformResult="{window.transformStops}"
/>
<Text variant="strong">{$props.line}</Text>
<Table data="{stops}">
<Column width="3*" bindTo="name" />
<Column bindTo="zone" />
<Column bindTo="wifi" >
<Fragment when="{$item.wifi === 'yes'}">
<Icon name="checkmark"/>
</Fragment>
</Column>
<Column bindTo="toilets" >
<Fragment when="{$item.toilets === 'yes'}">
<Icon name="checkmark"/>
</Fragment>
</Column>
</Table>
</Component>
响应式设计与主题系统
XMLUI的响应式设计模式类似于电子表格中的公式计算，当某个变量的值发生变化时，依赖该变量的组件会自动更新。这种模式使得开发者无需编写复杂的逻辑代码，只需通过声明式的方式描述应用的行为。
此外，XMLUI还提供了强大的主题系统，开发者可以通过简单的配置调整应用的外观，而无需编写繁琐的CSS代码。例如，以下代码展示了如何通过主题变量控制按钮的背景颜色：
yaml
color-primary
backgroundColor-Button
backgroundColor-Button-solid
backgroundColor-Button-primary
backgroundColor-Button-primary-solid
backgroundColor-Button-primary-solid--hover
与AI助手的协作
在AI时代，XMLUI还提供了与LLM（大语言模型）助手的协作机制。通过MCP（模型上下文协议）服务器，开发者可以指导AI助手生成和维护XMLUI代码。这种协作模式使得非专业开发者也能轻松构建复杂的网页应用。
总结
XMLUI的目标是让网页开发回归简单，特别是对于那些不具备专业前端开发技能的“解决方案构建者”。通过XMLUI，开发者可以使用简洁的XML代码构建功能强大的网页应用，而无需深入掌握React或CSS。无论是构建业务应用、内容管理系统，还是与AI助手协作，XMLUI都为开发者提供了一种全新的开发体验。
如果你厌倦了复杂的JavaScript开发，不妨试试XMLUI，体验一下现代网页开发的简单与高效。
评论总结
评论内容总结：
对XMLUI的质疑与批评：
- 一些评论者认为XMLUI的设计过于复杂，且XML作为标记语言并不比编程语言更易用。例如，评论17提到：“Are there any studies actually showing XML is easier to write that a scripting language? In my experience, XML is equally hard to write while being more limited.”
- 评论29指出，XMLUI的设计与React的核心理念相悖，认为其执行和实现“荒谬”：“The goal is admirable, but the execution and implementation is, in a word, absurd.”
对XMLUI的认可与期待：
- 部分评论者对XMLUI表示赞赏，认为它可能为初学者提供更简单的开发体验。评论11提到：“Developing in Visual Basic is how programming became accessible for me as a kid. I could do stuff with ease that had seemed like magic.”
- 评论21认为，XMLUI的高层次抽象有助于减少AI生成代码的复杂性：“If you generate towards a higher level of abstraction, there’s less code and less moving parts to be reviewed and validated.”
与其他技术的比较：
- 许多评论者将XMLUI与XUL、XAML、Flex等历史技术进行比较。评论14提到：“Seems like we keep reinventing the wheel - the previous version of of HTML, XHTML is a direct subset of XML.”
- 评论22认为，XMLUI的设计与Firefox的XUL和Macromedia的Flex类似：“Firefox had XUL. And macromedia had Flex. Flex was amazing it had an XML version and an OOP one.”
对XMLUI的实用性质疑：
- 一些评论者对XMLUI的实用性表示怀疑，认为其依赖过多且文档不完善。评论26指出：“I don’t mind XML but the release is 4.23 MB. Minified. There are 90 dependencies (931 fully resolved).”
- 评论27认为，XMLUI的想法“晚了20年”：“This seems like a neat idea that is 20 years too late.”
对XMLUI的改进建议：
- 评论6建议XMLUI提供更简单的部署示例，类似于Visual Basic的开发流程：“if they had a ‘Minimal Working Example’ of not just how to code, but also how to deploy an app.”
- 评论10指出，XMLUI的HStack设计可能限制了灵活性：“What’s great about flexbox in CSS is that the flex direction can change dynamically. Admittedly I haven’t read the full docs for XMLUI, but binding the direction to the markup likely means you can’t do that.”
总结：评论者对XMLUI的看法存在较大分歧，一方面有人认可其简化开发的潜力，另一方面则对其复杂性、实用性和设计理念提出质疑。同时，许多评论者将其与历史上的类似技术进行比较，认为XMLUI可能并未带来足够的创新。