Back to flin
flin

Le premier rendu dans le navigateur : quand FLIN a rencontré le DOM

La première fois que FLIN a rendu dans le navigateur : compilation du bytecode en HTML, le jalon de la Session 26.

Juste A. Gnimavo (Thales) & Claude | March 26, 2026 6 min flin
EN/ FR/ ES
flinbrowserrenderhtmlmilestonefrontend

Il y a un moment dans la vie de chaque langage de programmation où il cesse d'être un jouet et commence à être réel. Pour FLIN, ce moment est venu le 3 janvier 2026, dans la Session 026, quand un fichier .flin a compilé en bytecode, exécuté dans la VM, produit du HTML, été servi via HTTP et rendu interactivement dans Google Chrome.

Un bouton compteur qui comptait vraiment. Une liaison réactive qui se mettait vraiment à jour. Un bloc de vue qui produisait vraiment une page web.

Il a fallu 26 sessions et des milliers de lignes de Rust pour atteindre ce point. Cet article parle de cette session -- ce qui a fonctionné, ce qui a cassé, comment nous l'avons corrigé et ce que ça a fait de voir FLIN rendre pour la première fois.


Bogue 1 : débordement de pile dans les expressions match

La première tentative de compiler et exécuter la page d'accueil a planté avec une erreur de débordement de pile. La trace de pile pointait vers le gestionnaire d'expressions match dans le générateur de code.

La cause était subtile : la fonction emit_match dans src/codegen/emitter.rs supposait que l'instruction JumpIfFalse ne dépile pas la valeur de condition de la pile. En réalité, JumpIfFalse dépile toujours la condition.

La correction était de supprimer deux instructions Pop erronées :

rust// Avant (cassé) :
emit(JumpIfFalse, else_addr);
emit(Pop);  // ERREUR : la condition déjà dépilée par JumpIfFalse

// Après (correct) :
emit(JumpIfFalse, else_addr);
// Pas de Pop nécessaire -- JumpIfFalse a consommé la condition

Deux lignes supprimées. Deux heures de débogage. C'est la nature des bogues de VM : le symptôme (débordement de pile) apparaît loin de la cause (un Pop supplémentaire dix instructions plus tôt), et la seule façon de le trouver est de tracer l'état de la pile instruction par instruction.


Bogue 2 : échec de comparaison de chaînes

Avec le débordement de pile corrigé, la page d'accueil compilait et la VM produisait du HTML. Mais le compteur réactif ne fonctionnait pas. Cliquer sur le bouton « Increment » ne faisait rien.

L'investigation a révélé que l'expression match pour le rendu de vues comparait les valeurs de chaîne par ObjectId plutôt que par contenu. Deux chaînes avec le même contenu mais des allocations de tas différentes n'étaient pas égales.

La correction était un helper values_equal dédié qui déréférence les objets et compare leur contenu :

rustfn values_equal(&self, a: &Value, b: &Value) -> bool {
    match (a, b) {
        (Value::None, Value::None) => true,
        (Value::Bool(a), Value::Bool(b)) => a == b,
        (Value::Int(a), Value::Int(b)) => a == b,
        (Value::Float(a), Value::Float(b)) => a == b,
        (Value::Int(a), Value::Float(b)) => (*a as f64) == *b,
        (Value::Float(a), Value::Int(b)) => *a == (*b as f64),
        (Value::Object(a_id), Value::Object(b_id)) => {
            if a_id == b_id {
                return true;  // Même objet
            }
            // Déréférencer et comparer le contenu
            match (self.get_object(*a_id), self.get_object(*b_id)) {
                (Some(a_obj), Some(b_obj)) => match (&a_obj.data, &b_obj.data) {
                    (ObjectData::String(a), ObjectData::String(b)) => a == b,
                    (ObjectData::List(a), ObjectData::List(b)) => {
                        a.len() == b.len() &&
                        a.iter().zip(b.iter()).all(|(x, y)| self.values_equal(x, y))
                    }
                    _ => false,
                },
                _ => false,
            }
        }
        _ => false,
    }
}

Le moment où ça a fonctionné

Avec les deux bogues corrigés, nous avons reconstruit le binaire FLIN et exécuté :

bash./target/release/flin dev examples/welcome.flin

Le terminal a affiché :

[FLIN] Dev server running at http://localhost:3000
[FLIN] Watching examples/welcome.flin for changes

Ouvrir http://localhost:3000 dans Chrome a montré la page d'accueil. Le titre disait « Welcome to FLIN ». Le compteur affichait « Count: 0 ». Deux boutons : « Increment » et « Reset ».

Cliquer sur « Increment » a changé le comptage à 1. Cliquer encore : 2. Encore : 3. Cliquer sur « Reset » l'a remis à 0. Chaque clic, la liaison {count} se mettait à jour instantanément.

Ça fonctionnait.

Un fichier .flin, écrit dans un langage qui n'existait pas huit jours plus tôt, compilé en bytecode par un compilateur écrit à partir de zéro en Rust, exécuté par une machine virtuelle avec un ramasse-miettes, rendu en HTML par un moteur de vues avec des annotations réactives, servi via HTTP par un serveur web embarqué, et rendu interactif dans le navigateur par un runtime JavaScript de 50 lignes.

Vingt-six sessions. Pas de frameworks. Pas de dépendances au-delà de la bibliothèque standard de Rust et d'une poignée de crates. Pas d'ingénieurs humains en dehors de Thales. Un CTO IA (Claude) générant le code.


Ce que signifie le premier rendu dans le navigateur

Le premier rendu dans le navigateur est le point d'inflexion de toute technologie frontend. Avant, la technologie est académique -- intéressante mais non prouvée. Après, elle est pratique -- imparfaite mais réelle.

Pour FLIN, le premier rendu dans le navigateur a prouvé plusieurs choses simultanément :

  1. L'architecture fonctionne. Une VM basée sur la pile écrite en Rust peut produire du HTML assez vite pour des applications web interactives.
  2. Le modèle de réactivité fonctionne. Un proxy JavaScript avec des annotations data-flin-bind est suffisant pour des mises à jour d'interface utilisateur réactives.
  3. Le modèle mono-fichier fonctionne. Un développeur peut écrire un seul fichier .flin et obtenir une page web fonctionnelle.
  4. Le modèle CEO + CTO IA fonctionne. Thales et Claude, travaillant depuis Abidjan, ont construit un langage de programmation qui rend dans le navigateur. Pas d'équipe de dix. Pas de cycle de développement d'un an. Vingt-six sessions.

Les statistiques racontent l'histoire en chiffres : 617 tests réussis, 4 fichiers modifiés, 200 lignes ajoutées, 2 bogues critiques corrigés. Mais les chiffres ne capturent pas le changement psychologique. Avant la Session 026, chaque session construisait vers un objectif incertain. Après la Session 026, chaque session améliorait un produit fonctionnel.


Ceci est la partie 29 de la série « Comment nous avons construit FLIN », documentant comment un CEO à Abidjan et un CTO IA ont construit un langage de programmation à partir de zéro.

Prochain : [30] Agents parallèles dans le runtime FLIN -- comment nous avons utilisé l'exécution concurrente et le passage de messages pour construire des fonctionnalités en parallèle.

Share this article:

Responses

Write a response
0/2000
Loading responses...

Related Articles

Thales & Claude thales

Treize agents, quarante-trois minutes : la première session Workflow de Claude Fable 5, et ce qu'un script d'orchestration déterministe change aux builds multi-agents

Un prompt, treize agents, quarante-trois minutes : la première session de production avec Claude Fable 5 et l'outil Workflow de Claude Code a livré un site web de production complet de sept pages plus un endpoint backend de capture de leads, en un seul commit. Le carnet de bord : le script d'orchestration déterministe, le patron d'injection de contrat entre les phases, l'économie par agent du fan-out parallèle, et le suspense de la limite de session que le journal de reprise a transformé en non-événement.

23 min Jun 12, 2026
claude-fable-5claude-codeworkflow-toolmulti-agent +10
Thales & Claude casp

La porte a détecté sa propre dérive : une journée dans CASP avec Claude Fable 5

Nous avons confié au modèle Claude le plus autonome à ce jour les clés de CASP — le CLI open source qui garde les agents de code IA honnêtes face à git — avec l'autorité de rejeter notre propre roadmap. Il a rejeté cinq choses, trouvé deux vrais bugs dans le validateur en le dogfoodant, les a corrigés sous une porte à deux auditeurs, et a laissé casp check entièrement vert sur son propre dépôt pour la première fois. CASP 0.3.0 en est le résultat.

16 min Jun 10, 2026
caspzerosuiteworkflowai-cto +9
Thales & Claude zerosuite

La transplantation du CASP : comment la discipline des six fichiers est passée de Conductor à un ERP transport anti-fraude, ce que la compétence /next ajoute quand l'opérateur tape juste « next », et pourquoi le coût d'une dérive du CASP grimpe quand le projet, c'est l'argent des autres

La discipline du CASP qui a piloté trente-cinq sessions de Conductor est agnostique au produit. Le carnet de bord de sa transplantation sur KASSIA, un ERP transport anti-fraude pour un exploitant de flotte en Côte d'Ivoire : ce qui a migré, ce qui n'a pas migré (le validateur sur mesure — et ce que son absence coûte), ce que la compétence /next ajoute quand l'opérateur tape un seul mot, et là où le CASP s'arrête — le bug de déploiement qu'il ne pouvait pas voir parce qu'il enregistre l'intention, pas la réalité de l'infrastructure.

23 min Jun 8, 2026
kassiaerp-kassia-transport-logistiquezerosuiteCASP +15