XMLUI : Une Nouvelle Approche de Développement Web Inspirée de Visual Basic

Présentation d'XMLUI Au milieu des années 1990, il était possible de créer des logiciels utiles sans être un coder expérimenté, grâce à des outils comme Visual Basic et à un écosystème riche de composants. Ces composants, conçus par des développeurs professionnels, permettaient aux programmeurs commerciaux de construire des applications complexes en les reliant simplement entre eux. Cependant, les composants web n'ont jamais offert la même facilité d'utilisation. Le projet XMLUI, lancé récemment, réintroduit ce modèle dans le contexte moderne du web et de son écosystème basé sur React. Fonctionnement de XMLUI XMLUI enveloppe React et CSS, fournissant une suite de composants que l'on peut composer avec des balises XML. Par exemple, voici un petit extrait qui illustre comment vérifier l'état des lignes de métro à Londres : ```xml ``` Points Clés Simplicité et Accessibilité : Environ 12 lignes de XML suffisent pour créer une application complète, réactive et thématique, sans connaître React ou CSS. Composants Préconçus : XMLUI offre un catalogue étendu de composants interactifs et en arrière-plan, tels que DataSource, APICall et Queue. Définition de Composants Propres : Les développeurs peuvent facilement définir leurs propres composants, qui interagissent parfaitement avec le jeu natif et les autres composants. Composants Utilisateurs Voici un exemple de composant personnalisé TubeStops, qui affiche les arrêts de métro pour une ligne donnée : ```xml {$props.line} ``` Ce composant peut ensuite être utilisé plusieurs fois pour afficher les arrêts de différentes lignes de métro : xml <HStack> <Stack width="50%"> <TubeStops line="victoria" /> </Stack> <Stack width="50%"> <TubeStops line="waterloo-city" /> </Stack> </HStack> Réactivité XMLUI adopte un modèle de liaison de données réactif similaire à celui de React. Par exemple, le composant Select déclare une variable réactive id="lines". Lorsque la sélection change, lines.value est mis à jour, ce qui déclenche automatiquement une nouvelle requête à l'API via DataSource. ```xml ``` Lorsque lines.value change, DataSource réagit en fetching des nouvelles données, et le Table s'adapte automatiquement pour les afficher. Thèmes Le système de thèmes d'XMLUI est conçu pour rendre tout ce que vous construisez esthétique et intuitif sans nécessiter des connaissances approfondies en CSS. Les thèmes contrôlent les couleurs, les polices, les marges, les bords, les espaces, et plus encore, tout en utilisant des noms sémantiques. Par exemple, pour changer la couleur de fond d'un bouton principal lorsqu'il est survolé : xml color-primary backgroundColor-Button backgroundColor-Button-solid backgroundColor-Button-primary backgroundColor-Button-primary-solid backgroundColor-Button-primary-solid--hover Les variables de thème sont optionnelles et définies par des noms logiques par défaut, facilitant ainsi la personnalisation rapide. Scripting Bien que XMLUI vise à minimiser l'utilisation de script, quelques lignes de JavaScript peuvent être nécessaires pour des transformations spécifiques. Par exemple, la fonction transformStops utilisé dans TubeStops pour formater les données de l'API : 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(', ') : '' }; }); } Ces scripts permettent d'ajouter des fonctionnalités avancées sans être un expert en React. Protocole de Contexte de Modèle (MCP) Pour faciliter la collaboration avec les assistants LLM (Large Language Model), XMLUI fournit un serveur MCP. Ce protocole aide à orienter l'attention des agents vers des aspects spécifiques du code, des documents, et d'autres applications. Les questions courantes sont gérées de manière autonome, par exemple : Est-ce qu'il existe un composant qui fait [X] ? Que disent les docs de [X] sur le sujet [Y] ? Comment la source de [X] implémente [Y] ? Comment [X] est utilisé dans d'autres applications ? Gestion de Contenu XMLUI peut également être utilisé pour créer des sites web simples et faciles à maintenir, sans nécessiter les compétences d'un développeur frontend React. L'équipe d'XMLUI utilise elle-même le framework pour ses sites de démonstration, documentation, et page d'accueil, ce qui montre sa polyvalence. De plus, les applications et leur documentation peuvent être intégrées, permettant des démos interactives dans la documentation. Extensibilité Pour répondre à des besoins spécifiques, XMLUI peut envelopper des composants React existants. Par exemple, le composant Tiptap editor, qui est lui-même un enveloppeur de ProseMirror, a été intégré avec succès. Voici un exemple de déploiement minimal pour TableEditor : xml TableEditor ├── Main.xmlui ├── index.html └── xmlui └── 0.9.67.js L'application peut être hébergée sur n'importe quel serveur web statique, y compris un bucket AWS : 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> Déploiement Le déploiement d'une application XMLUI est très simple et peut être réalisé avec n'importe quel serveur web statique. Pour des applications plus complexes, XMLUI propose un serveur de test local qui inclut un serveur statique et la gestion de données via SQLite, ainsi qu'un proxy CORS pour les interactions API. Web Development Simplifié XMLUI a été conçu par Gent Hito, fondateur de /n software et CData. La mission de /n software est de simplifier la communication réseau pour les développeurs, tandis que CData vise à faciliter l'accès aux données. XMLUI s'inscrit dans cette philosophie en rendant l'interface utilisateur accessible à un large public de développeurs. Gent explique : “Nous sommes des personnes backend. Nos composants sont invisibles, et lorsque nous avons essayé de construire des interfaces utilisateur commerciales simples, nous avons été surpris de constater à quel point c'était difficile et frustrant.” XMLUI vise à changer cette donne, en offrant un moyen simple et efficace de construire des interfaces utilisateur sans se plonger dans les subtilités compliquées de React et CSS. Évaluation de l'Industrie Les professionnels de l'industrie ont salué XMLUI pour sa capacité à démocratiser le développement web, offrant aux développeurs de tous niveaux l'opportunité de créer des interfaces réactives et modernes sans être des experts en JavaScript ou CSS. Cette approche pourrait marquer un tournant dans la façon dont les applications web sont construites, en particulier pour les entreprises qui dépendent du développement backend. /n software et CData ont une réputation solide dans le domaine du développement de logiciels, et XMLUI s'appuie sur cette expérience pour offrir une plateforme véritablement accessible. Pour les équipes qui n'ont pas les ressources pour embaucher des experts, XMLUI représente une alternative prometteuse. En conclusion, XMLUI offre une solution élégante à un problème de longue date dans le développement web : la complexité excessive. Grâce à son approche déclarative, son système de thèmes, et son intégration LLM, XMLUI rend la création d'interfaces utilisateur aussi simple et intuitive qu'à l'époque de Visual Basic. Pour les entreprises et les développeurs qui valorisent l'accessibilité et la simplicité, XMLUI pourrait être la réponse attendue.