XMLUI vereinfacht Web-App-Entwicklung für Laien

Im Mittel der 1990er Jahre war es möglich, nützliche Software zu entwickeln, ohne ein Meisterprogrammierer zu sein. Visual Basic und eine Vielzahl von Komponenten ermöglichten es Entwicklern, Anwendungen zu erstellen, indem sie diese Komponenten miteinander verbanden. Für jüngere Leser, die diese Zeit nicht mehr kennen, arbeiten Webkomponenten heute nicht auf die gleiche Weise. Das Projekt, das wir heute bekannt geben, XMLUI, bringt das Visual Basic-Modell in den modernen Web und die React-basierte Komponentenstruktur. XMLUI – Die Rückkehr des Visual Basic-Modells für die moderne Webentwicklung XMLUI ist eine neue Technologie, die React und CSS umschließt und eine Reihe von Komponenten bereitstellt, die man mit XML-Markup zusammenfügen kann. Hier ist ein einfaches Beispiel einer App, die den Status der Londoner Underground-Linien überprüft: ```xml ``` Mit nur einigen Zeilen XML kann man eine moderne, komponentenbasierte Anwendung erstellen, die reaktiv und gut gestaltet ist, ohne Kenntnisse in React oder CSS zu haben. Dies bietet eine enorme Produktivitätssteigerung und erzeugt Code, der leicht lesbar und wartbar ist, egal ob von einem menschlichen Entwickler oder einem LLM-Assistenten geschrieben. Komponenten Mein am häufigsten zitiertes BYTE-Artikel war eine Coverstory aus dem Jahr 1994 mit dem Titel "Componentware". Viele von uns hatten angenommen, dass die Verbreitung wiederverwendeter Softwarekomponenten durch Bibliotheken von niedrigstufigen Objekten erreicht werden würde, die von erfahrenen Entwicklern in Programme eingebunden wurden. Stattdessen gewannen Komponenten, die von professionellen Entwicklern gebaut und von Geschäftsentwicklern verwendet wurden, an Popularität. Es gab Visual Basic-Komponenten für Diagramme, Netzwerkkommunikation, Datenzugriff, Audio/Video-Wiedergabe und Bildscannen/Bearbeitung. UI-Steuerelemente umfassten Schaltflächen, Dialogfelder, Schieberegler, Tabellen zur Anzeige und Bearbeitung von tabellarischen Daten sowie Baum-, Listen- und Registerkartenansichten. Diese Steuerelemente wurden genutzt, um Verkaufssysteme, Terminplaner, Projektmanagement-Tools, Systeme zur Praxisverwaltung in Medizin und Recht sowie Verkaufs- und Bestandberichte zu erstellen. Diese Komponentenökosphäre wurde jedoch im Web nie fortgeführt. Obwohl ich Fan von Webkomponenten bin, sind es die React-Komponenten, die heute dominiert werden, und sie sind für den Art von Entwicklern, die früher Visual Basic-Komponenten produktiv nutzen konnten, nicht zugänglich. Man muss ein erfahrener Programmierer sein, um sowohl eine React-Komponente zu erstellen als auch zu verwenden. XMLUI kapselt React-Komponenten, sodass Lösungsbauer sie nutzen können. Benutzerdefinierte Komponenten XMLUI bietet ein umfangreiches Katalog an Komponenten, darunter interaktive Steuerelemente wie DataSource, APICall und Queue. Man kann leicht eigene Komponenten definieren, die mit den nativen Komponenten und untereinander interagieren. Hier ist das Markup für eine TubeStops-Komponente: ```xml {$props.line} ``` Man kann diese Komponente sogar zweimal in einer nebeneinander angeordneten Layout verwenden: xml <HStack> <Stack width="50%"> <TubeStops line="victoria" /> </Stack> <Stack width="50%"> <TubeStops line="waterloo-city" /> </Stack> </HStack> Kurze XMLUI-Snippets sind leicht lesbar und wartbar. Bei längeren Codeabschnitten wird es komplizierter, aber man kann Komponenten leicht refaktorisieren, um die Übersichtlichkeit zu bewahren. Dank der Unterstützung von LLM-Assistenten kann dies flüssig und kontinuierlich erfolgen. Reaktivität Wenn man kein React-Entwickler ist, ist die größte Herausforderung bei XMLUI-Reaktivität nicht das, was man lernen muss, sondern das, was man vergessen muss. Die reaktive Datenbindung, die in der oben gezeigten App genutzt wird, funktioniert ähnlich wie in einer Tabelle, wo eine Änderung in einer Zelle sich auf andere Zellen auswirkt, die darauf verweisen. In React müssen Expertenprogrammierer solche Mechanismen beherrschen, aber XMLUI vereinfacht dies, sodass man es ohne tiefgehende Kenntnisse in React nutzen kann. Themen Als ich das XMLUI-Themensystem zum ersten Mal sah, war ich nicht besonders begeistert. Ich bin kein Designer und schätze eine gute Standardthematik, die keine Farbwahlen erfordert, die ich nicht treffen kann. Die Fähigkeit, Themen zu wechseln, war bisher für mich weniger wichtig. Dennoch hat CSS mich oft vor Herausforderungen gestellt, bei denen ich die gewünschten Stil- und Layouteffekte nicht erzielen konnte. XMLUI zielt darauf ab, alles, was man baut, gut aussehen und sich elegant verhalten zu lassen, ohne dass man CSS oder CSS-ähnliche Stil- und Layoutanweisungen schreiben muss. Man kann Inline-Stile anwenden, aber in der Regel ist dies nicht notwendig und sollte vermieden werden. Jede Komponente bietet eine Vielzahl von Themenvariablen, die Textfarbe, Schriftart, Hintergrundfarbe, Ränder, Grenzen, Abstände und vieles mehr beeinflussen. Sie folgen einer Namenskonvention, die es ermöglicht, Einstellungen global oder in zunehmend feiner differenzierten Weisen zu steuern. Zum Beispiel können die folgenden Variablen die Randfarbe eines soliden Buttons steuern, wenn die Maus darüber fährt: color-primary backgroundColor-Button backgroundColor-Button-solid backgroundColor-Button-primary backgroundColor-Button-primary-solid backgroundColor-Button-primary-solid--hover XMLUI wendet diese Einstellungen von der spezifischsten zur allgemeinsten an, was Designern viele Freiheitsgrade zur Verfügung stellt, um detaillierte Themen zu gestalten. Die meisten Einstellungen sind optional, und die vorgegebenen Einstellungen verwenden logische Namen anstelle von hartcodierten Werten. Die Standardfarbe für backgroundColor-Button-primary ist zum Beispiel $color-primary-500, was die Mitte eines Farbspektrums darstellt, das wichtige Elemente und Aktionen hervorhebt. Skripting Als Visual Basic-Entwickler erwartete man, dass man nicht unbedingt ein Meisterprogrammierer sein musste, aber zumindest ein wenig Skripten konnte. Es ist das Gleiche bei XMLUI. Die Sprache ist JavaScript, und man kann viel damit erreichen, indem man kurze Skriptabschnitte wie diesen in TubeStops nutzt: xml <Fragment when="{$item.wifi === 'yes'}"></Fragment> TubeStops nutzt auch die transformResult-Eigenschaft seines DataSources, um einen größeren Codeblock auszuführen: javascript function transformStops(stops) { return stops.map(stop => { const getProp = (key) => { const prop = stop.additionalProperties && stop.additionalProperties.find(p => p.key === key); return prop ? prop.value : ''; }; return { name: stop.commonName, zone: getProp('Zone'), wifi: getProp('WiFi'), toilets: getProp('Toilets'), lines: stop.lines ? stop.lines.map(line => line.name).join(', ') : '' }; }); } Dies ist nicht trivial, aber auch kein Raketenwissenschaft. Und natürlich muss man solche Dinge heute nicht selbst schreiben, da man LLM-Assistenten dazu bringen kann, es für einen zu tun. XMLUI ist zwar nicht 100% deklarativ, aber die imperativen Teile sind gut definiert und zugänglich für Lösungsbauer, die keine Experten im JavaScript-Ökosystem sind. Modellkontextprotokoll (MCP) In der Ära der Künstlichen Intelligenz fragt man sich, wer XMLUI braucht, wenn man LLMs dazu bringen kann, React-Anwendungen zu schreiben. Das ist eine berechtigte Frage, und ich denke, ich habe eine gute Antwort. Die erste Version von XMLUI Invoice wurde von Claude in 30 Sekunden geschrieben und war überraschend vollständig und funktional. Allerdings war ich nicht gleichberechtigter Partner in diesem Prozess, da ich nicht über die notwendigen Kenntnisse in React und CSS verfügte, um den von LLMs generierten Code zu überprüfen oder zu warten. XMLUI bietet jedoch eine Möglichkeit, das Spiel auszugleichen. Ich kann den von LLMs geschriebenen XMLUI-Code lesen, bewerten und kompetent anpassen. Um die Zusammenarbeit zu verbessern, stellen wir einen MCP-Server zur Verfügung, der dabei hilft, die Aufmerksamkeit der Agenten zu lenken, während man mit ihnen an XMLUI-Anwendungen arbeitet. Der MCP-Server wird neben dem XMLUI-Repository und dem Repository, in dem man eine XMLUI-Anwendung entwickelt, installiert. Idealerweise enthält es auch Referenzanwendungen wie XMLUI Invoice. Arbeit mit LLMs Diese Einrichtung hat meine Erwartungen übertroffen. Je weiter ich eine Suite von Anwendungen bau, die beste Praktiken und Muster veranschaulichen, desto effektiver wird die agente Zusammenarbeit. Dieser Effekt ist jedoch noch von den Eigenschaften der LLM-Assistenten abhängig, die ständig an Erinnerungen an die Regeln gebraucht werden. Es ist wie mit zweijährigen Wunderkindern. Irritierend, aber effektiv! Um die Wahrscheinlichkeit einer effektiven Zusammenarbeit zu erhöhen, haben wir einen "How To"-Bereich auf der Dokumentationsseite hinzugefügt. Der MCP-Server macht diese Artikel den Agenten sichtbar und bietet Tools, um sie zu listen und zu durchsuchen. Dies wurde von einem Freund inspiriert, der gefragt hatte: "Angenommen, du hast keinen statischen Standardwert für das erste Element in einem Select, aber du möchtest Daten abrufen und das erste Element aus den Daten als Standardauswahl wählen, wie macht man das in XMLUI?" Es dauerte einige Minuten, bis ich ein Beispiel zusammengestellt hatte. Dann wurde mir klar, dass dies die Art von Frage ist, die LLMs autonom beantworten sollten. Wenn ein Agent eines dieser Tools verwendet, ist er an die Wahrheit gebunden: Ein so gefundenes Artikel hat eine zitierfähige URL, die zu einem funktionierenden Beispiel führt. Content Management Wir sagen, XMLUI sei für die Erstellung von Anwendungen gedacht, aber was sind Anwendungen wirklich? Heutzutage sind Websites oft auch Anwendungen, die auf Frameworks wie Vercel’s Next.js basieren. Ich habe mit solchen Veröffentlichungssystemen gearbeitet und bin kein Fan davon. Man sollte keinen React-geübten Frontend-Entwickler benötigen, um例行更改进行网站。而使用 XMLUI，你就不需要了。我们的演示站点、文档站点和着陆页都是 XMLUI 应用程序，对我来说比 Next.js 站点更容易编写和维护。 “自己吃狗粮”是一个不雅的说法，它描述了一个美好的理念：构建者应该使用并依赖他们所构建的东西。我们确实如此，但 XMLUI 作为内容管理系统的故事不仅如此。当你用 XMLUI 构建应用程序时，你可能会希望为其创建文档。这里有一个很好的协同作用：应用程序及其文档可以由相同的材料制成。你甚至可以在文档中展示应用程序的实时演示，就像我们在组件文档、教程和“如何”文章中所做的那样。 我早期就支持使用屏幕录像来演示软件，虽然展示总是比讲述更好，但只找到视频时会让人抓狂。理想情况下，你应该同时展示和讲述。用代码、叙述和实时互动的混合方式来记录软件，可以将所有模式结合起来。 可扩展性 XMLUI 开箱即用地封装了许多 React 组件。如果所需的组件不在其中怎么办？这不是我第一次遇到这种情况。在之前的一个项目中，我严重依赖 LLM 来挖掘 React 代码层，但仍无法实现我想要的封装。 对于 XMLUI，我最想包含的组件是 Tiptap 编辑器，它本身就是 ProseMirror 工具包的封装。这本来是一个在发布前我没想到能实现的远大目标，但我非常惊喜地发现，我确实做到了这一点，并且有证据证明： 这个 XMLUI TableEditor 是我们为希望了解如何创建封装 React 组件的 XMLUI 组件的开发者指南的主题。这不仅仅是一个玩具示例。当你用 XMLUI 进行发布时，基础是 Markdown，这对于编写和编辑标题、段落、列表和代码块非常棒，但对于表格则很糟糕。在这种情况下，我通常会使用一个可视化编辑器来生成 Markdown 表格语法。现在我有了一个可以嵌入任何地方的 XMLUI 组件。 React 的惯用法在这个指南中是由 LLM 生成的，而不是我自己写的，尽管我不能完全解释它们是如何工作的，但我现在有信心，精通 React 的开发人员将能够轻松扩展 XMLUI。更重要的是，我现在看到了组件构建者和解决方案构建者之间的界限开始模糊。我一直主要是一个解决方案构建者，依赖于组件构建者来完成有用的事情。能够自己完成这些事情对我来说感觉非常有意义。 部署 这是 TableEditor 的最小 XMLUI 部署结构： TableEditor ├── Main.xmlui ├── index.html └── xmlui └── 0.9.67.js index.html 文件只是引用了 XMLUI 的最新独立构建： ```html ``` 这里是 Main.xmlui 的内容： xml <App var.markdown=""> <Card> <TableEditor id="tableEditor" size="xs" onDidChange="{(e) => { markdown = e.markdown }}" /> </Card> <Card> <HStack> <Text variant="codefence" preserveLinebreaks="{true}"> { markdown } </Text> <SpaceFiller /> <Button icon="copy" variant="ghost" size="xs" onClick="navigator.clipboard.writeText(markdown)" /> </HStack> </Card> </App> 你可以使用任何静态 Web 服务器来托管应用程序，甚至可以从 AWS S3 存储桶运行它。 对于 XMLUI Invoice，我们提供了一个测试服务器，其中包括仅限本地主机的静态服务器、嵌入式 SQLite 数据库以及为需要跨源资源共享（CORS）支持的应用程序添加的代理。你可能需要为你的 XMLUI 应用程序包装类似的功能，但最小部署非常简单。 为其他人的 Web 开发 XMLUI 由 Gent Hito 构思，他创立了 /n software 和 CData。/n software 的使命是使网络通信对开发人员来说变得容易。CData 的使命是使数据访问对开发人员来说变得容易。而现在，XMLUI 的使命是使用户界面对开发人员来说变得容易。 Gent 说：“我们是后端人。我们所有的组件都是不可见的，当我们尝试构建简单的业务用户界面时，我们惊讶地发现这有多难和多令人沮丧。” 那些记得 Visual Basic 时代的人知道，情况并不总是这样。但是，Web 平台从未对需要创建用户界面的解决方案构建者友好过。这已经成为专家的游戏，他们能够应对不断爆炸的复杂性。 情况不应该如此。一些应用程序确实需要特殊的专业知识，但许多应用程序不应该如此。如果你是 /n software，需要为你的客户提供一个接口来监控和控制 CoreSSH 服务器，你不应该需要雇用 React 和 CSS 专家来实现这一点。你的团队应该能够自己做到，而现在他们可以了。 我正在愉快地创建那些原本超出我能力范围的界面。你会有同样的体验吗？试一试，让我们知道你的进展如何！ 业内人士评价 XMLUI 重新引入了 1990 年代 Visual Basic 时期的易用性和可维护性，同时结合了现代 Web 技术的优势。行业内部人士认为，XMLUI 有可能简化 Web 应用程序的开发，使其更广泛地被非专业开发人员接受。/n software 和 CData 作为知名的技术公司，长期以来一直致力于降低开发门槛，XMLUI 的推出进一步体现了这一承诺。