C++’s missing standard GUI.
Votre application en C++. Son interface en TypeScript, React et CSS. WebFront réunit les deux dans une bibliothèque header-only, avec les outils de développement dans la fenêtre de l’application et les ressources UI dans l’exécutable.
OPEN SOURCE · HEADER-ONLY · NATIVE + WEB
C++ LOGIC ↔ WEB INTERFACE
↳ C++ : calcul · React : affichage
EXEMPLE / JEU DE LA VIE
Le calcul reste dans une fonction C++ existante. Un composant React affiche la grille et appelle cette fonction à chaque génération. Essayez les motifs, puis consultez le code dans le livre.
↳ Cette démo web calcule les générations en JavaScript. Dans l’exemple natif, React attend le résultat de la fonction C++ via le pont asynchrone.
try {
await webFront.ready;
const step = webFront.cppFunction('life.step');
const next = await step(cells);
// Update your React state with next.
} catch (error) {
console.error(error);
// Stop playback and show the error in your UI.
}UNE IHM POUR VOTRE CODE C++
Une fonction enregistrée avec cppFunction devient appelable depuis TypeScript. Le pont binaire sur WebSocket transporte les arguments et les résultats de façon asynchrone. Votre logique métier reste indépendante de React et de l’interface.
Composants React, TypeScript, CSS : utilisez les mêmes sources UI sur Windows, macOS et Linux. Affichez-les dans une fenêtre native ou dans le navigateur système. React reste facultatif.
Le terminal wf installe les packages, compile le TSX, vérifie les types et lance les tests. wf dev met à jour la preview à chaque enregistrement. Aucun Node.js ni gestionnaire de paquets à installer séparément.
wf embed génère un en-tête C++ compressé contenant l’UI et ses dépendances web. Après recompilation, l’application fonctionne hors ligne, sans projet frontend ni environnement de développement chez l’utilisateur.
WebFront demande un compilateur C++23 et des dépendances C++ gérées par CMake. L’affichage utilise un navigateur ou un moteur web : WebView2, WKWebView, WebKitGTK, ou CEF en option. Le déploiement de ce moteur dépend de la plateforme ; aucun environnement de développement JavaScript n’est requis.
PORTABILITÉ
Une interface web peut être affichée ailleurs que sur la machine qui exécute le C++. C’est une voie intéressante pour les équipements embarqués : le navigateur de l’utilisateur fournit alors l’écran et le moteur de rendu.
Les chemins pris en charge et les tests du projet concernent les plateformes desktop. Les exemples utilisent le moteur natif disponible, ou le navigateur système.
Ces cibles ne sont pas encore qualifiées. Le support C++23, les ressources mémoire et la pile réseau doivent être vérifiés pour chaque appareil. Un navigateur distant éviterait d’embarquer le moteur web, mais le transport distant et sa sécurité restent à concevoir et à valider.
DÉVELOPPEMENT
Lancez l’exemple LifeDeveloper, puis tapez ces commandes dans son terminal. Vous pouvez modifier les fichiers TSX et CSS avec votre éditeur habituel. Aucun runtime JavaScript ni gestionnaire de paquets n’est requis sur la machine.
Voir la session de développement ↗wf create life
wf init
wf install react@19.3.1 react-dom@19.3.1
wf dev ui/main.tsxAPPRENDRE
Le tutoriel part du Jeu de la vie en console. Vous lui ajoutez une fenêtre, une interface React, des appels asynchrones et des tests, puis vous embarquez les ressources dans l’exécutable.
Si le frontend est nouveau pour vous, les sections facultatives expliquent le DOM, les composants React et la gestion de l’état. Une autre section revient sur les coroutines et la durée de vie en C++.
Lire le premier chapitre ↗PROJET OPEN SOURCE
Les guides du dépôt décrivent les API, les moteurs natifs et les limites actuelles. Le code, les tests et les discussions de développement sont sur GitHub.