> For the complete documentation index, see [llms.txt](https://weekly-essay.mikey.wang/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://weekly-essay.mikey.wang/fr/2026/w12-d2-observation-frontend-vitality-in-the-ai-wave/2026-d2-key-takeaways-review.md). # 2026-Retour sur les points clés de D2 Programme de la conférence : Les organisateurs partagent généralement les présentations environ un mois plus tard. Il n’y a ni diffusion en direct ni enregistrement vidéo. Des dizaines de conférences se déroulent en parallèle sur une seule journée : on manque forcément beaucoup de choses. J’ai choisi quelques intervenants dont l’expertise est solide. Ce qui suit concerne seulement les sessions auxquelles j’ai assisté et qui me semblent mériter d’être reprises. Avant de commencer, un aperçu de l’écosystème JavaScript actuel. Je constate que même beaucoup de professionnels du frontend connaissent mal l’écosystème de leur langage, ou en gardent une image datant de leurs débuts. Ses principaux acteurs sont aujourd’hui Vercel, VoidZero, Bun, Biome, etc. J’ai demandé à ChatGPT de générer un schéma ASCII, assez parlant, que voici à titre de référence. ``` ┌──────────────────────────────────────────────────────────────────────┐ │ JavaScript Ecosystem │ └──────────────────────────────────────────────────────────────────────┘ ┌──────────────┐ │ Developers │ └──────┬───────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ① AI / Coding Entry Layer │ │----------------------------------------------------------------------│ │ Cursor / Claude Code / Copilot / Windsurf / Zod │ │ │ │ 作用： │ │ - 代码生成 │ │ - agent 工作流 │ │ - IDE 内交互 │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ② Framework / Application Layer │ │----------------------------------------------------------------------│ │ React / Vue / Svelte / Solid │ │ Next.js / Nuxt / Remix / Astro │ │ │ │ 代表公司 / 项目： │ │ - Vercel → Next.js │ │ - NuxtLabs → Nuxt │ │ - Vue / Evan You ecosystem │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ③ Toolchain Layer ← 现在竞争最激烈 │ │----------------------------------------------------------------------│ │ Bundler / Dev Server / Compiler / Linter / Formatter / Test │ │ │ │ 主要玩家： │ │ - Vite / Rollup / Rolldown → VoidZero 阵营 │ │ - Turbopack → Vercel │ │ - Rspack → ByteDance │ │ - Webpack → 旧时代核心基础设施 │ │ - Biome → lint / format │ │ - esbuild → 高性能构建基础件 │ │ - SWC / OXC → 编译基础设施 │ │ │ │ 这里决定： │ │ - 本地开发体验 │ │ - 构建速度 │ │ - 配置模型 │ │ - AI 能否直接操作工程系统 │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ④ Runtime Layer │ │----------------------------------------------------------------------│ │ Node.js / Bun / Deno / Browser / Edge Runtime │ │ │ │ 主要玩家： │ │ - Node.js Foundation / OpenJS │ │ - Bun │ │ - Deno │ │ - Vercel Edge Runtime │ │ - Cloudflare Workers │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ⑤ Deploy / Cloud / Delivery Layer │ │----------------------------------------------------------------------│ │ Vercel / Netlify / Cloudflare / AWS / Azure / GCP │ │ │ │ 作用： │ │ - 部署 │ │ - 托管 │ │ - 边缘分发 │ │ - Serverless / AI App Runtime │ └──────────────────────────────────────────────────────────────────────┘ ``` #### I. **Vite+ : une chaîne d’outils JS intégrée — Evan You** Il poursuit la promotion d’une réécriture en Rust des outils frontend. Utiliser Rust pour cette infrastructure fait désormais largement consensus dans le secteur. À l’exception de TSC. | **Type d’outil** | **Ancienne génération, JavaScript** | **Nouvelle génération, Rust** | | ------------------------- | ------------------------------------------- | ----------------------------- | | Initialisation de projets | Vue Cli / Create React App | Vite 8 | | Bundler | Webpack, compilation par ts-loader / Rollup | Rolldown | | Build TS | tsup, fondé sur esbuild | tsdown | | Analyse du code | ESLint | Oxlint | | Formatage du code | Prettier | Oxfmt | | Framework de test | Jest | Vitest | ![Illustration](https://km.sankuai.com/api/file/cdn/2752980249/228125441867?contentType=1\&isNewContent=false) Vite+ réunit les différents fichiers de configuration de la chaîne d’outils en un seul pour simplifier ce travail. ![Illustration](https://km.sankuai.com/api/file/cdn/2752980249/228143018714?contentType=1\&isNewContent=false) Pourquoi ce travail compte-t-il ? Pourquoi l’ère de l’IA demande-t-elle une chaîne d’outils unifiée et efficace ? **Idée centrale : écrire le code n’est plus le goulot d’étranglement. L’IA doit sans cesse contrôler et valider son code. Sans une chaîne d’outils propre et efficace, vous freinerez demain de fortes hausses de productivité.** ![Illustration](https://km.sankuai.com/api/file/cdn/2752980249/228145264077?contentType=1\&isNewContent=false) Il a enfin brièvement évoqué le produit que VoidZero teste en interne. Il vise surtout le déploiement automatique et la sécurité des types de bout en bout sur toute la pile. Cela ressemble à un début de services cloud, dans la même direction que Vercel. ![Illustration](https://km.sankuai.com/api/file/cdn/2752980249/228143392739?contentType=1\&isNewContent=false) #### II. **Google A2UI : interfaces générées par LLM pour les agents et A2A — Jennie** Un aperçu de l’influence de Google : ![Illustration](https://km.sankuai.com/api/file/cdn/2752980249/228154026954?contentType=1) ![Illustration](https://km.sankuai.com/api/file/cdn/2752980249/228178285513?contentType=1\&isNewContent=false) Cette présentation introduit A2UI, qui répond au besoin de générer dynamiquement des interfaces pour les utilisateurs. Il existe de nombreuses autres approches en dehors d’A2UI. | **Dimension** | **AG-UI** | **ChatKit** | **MCP UI** | **Vercel AI UI** | **Google A2UI** | | ------------------------ | -------------------------------- | --------------------------------------- | --------------------------------------------- | ---------------------------------- | -------------------------------------------- | | **Positionnement** | Piloté par l’état frontend | Propre à OpenAI | Rendu distant par l’agent | Intégration verticale de la pile | **Protocole déclaratif généraliste** | | **Mécanisme central** | État client partagé | Bibliothèque de composants propriétaire | iframe isolée | Shadcn + SDK | **Description du rendu en JSON** | | **Rapport signal/bruit** | Très élevé, performances natives | Moyen | Moyen, coût des communications entre domaines | Élevé, efficacité du développement | **Très élevé, cohérence visuelle** | | **Sécurité** | Élevée, frontend sous contrôle | Élevée | Très élevée, environnement isolé | Élevée | **Très élevée, exécution de code interdite** | | **Multiplateforme** | Faible, frontend à réécrire | Faible | Forte, priorité au Web | Faible, priorité au Web | **Très forte, natif et Web** | **La particularité de Google A2UI : l’interface comme données structurées** Contrairement à Vercel, qui envoie directement depuis le serveur des fragments de composants React, donc du code, A2UI impose que l’agent n’envoie que des descriptions JSON. * L’agent produit un flux JSON à structure plate décrivant l’intention de l’interface, par exemple `{type: "chart", data: [...]}`. Le client le reçoit et utilise des composants locaux prédéfinis et de confiance, comme Angular, Flutter ou Lit, pour le rendu. * Cette architecture qui sépare les données du rendu élimine complètement le risque de scripts malveillants, ou XSS, générés par le LLM. Elle permet aussi aux réponses de l’agent de garder une apparence parfaitement cohérente dans une application mobile native et sur une page web. La logique fondamentale d’AG-UI est : « L’agent ne prend en charge que la réflexion et les décisions ; la logique d’interface doit rester dans le frontend. » * Synchronisation d’état, ou Shared State : un objet d’état synchronisé en temps réel dans les deux sens relie l’agent et le frontend. L’agent peut modifier directement cet état par des instructions, par exemple `state.selectedItems = [...]`. Le framework frontend, React ou Vue, détecte le changement et actualise les composants locaux en quelques millisecondes. * Déclenchement d’actions, ou Action System : le développeur frontend expose à l’agent un ensemble de fonctions de capacité, les Actions. L’agent décide quand les appeler, mais leur exécution est entièrement définie par le code frontend. Cela garantit la sécurité de la logique métier. La logique fondamentale de MCP UI est : « L’interface doit être standardisée comme une API. Là où va l’agent, l’interface le suit. » * L’interface comme ressource, ou UI as Resource : dans le protocole MCP, l’interface n’est plus du code frontend écrit à l’avance, mais une ressource fournie dynamiquement par l’agent. Celui-ci renvoie un URI utilisant `ui://`, par exemple `ui://analytics-dashboard/v1`. * Indépendance de l’hôte, ou Host Agnostic : l’interface fournie par un serveur MCP peut être rendue directement dans Claude Desktop, ChatGPT, Cursor ou même votre propre application, sans réécrire le frontend pour chaque plateforme. (iframe) #### III. **Construire l’Agentic Coding : du modèle au framework — Cui Zeyu (Mayou), Luo Changwei (Shanguo)** Alibaba possède de nombreux outils internes de programmation IA, développés séparément par différents départements. Cela ressemble vraiment au frontend d’il y a dix ans. Je n’ai assisté qu’à deux présentations, Qoder et Qwen-Code. Qwen-Code m’a semblé un peu plus intéressant : c’est un fork de Gemini Cli, . Je n’ai retenu que deux idées ; le reste était de la présentation. Les personnes intéressées peuvent lire le dépôt ou télécharger l’outil pour l’essayer. Si la programmation est si importante, c’est fondamentalement parce qu’elle constitue un domaine de tâches très vérifiables. Dans beaucoup de tâches, produire est facile mais vérifier l’exactitude est difficile, comme pour un article ou un jugement subjectif. La programmation présente la situation inverse : la génération est relativement difficile, mais compilation, cas de test et systèmes d’évaluation permettent de vérifier rapidement les résultats. Cette combinaison, génération difficile mais vérification facile, en fait une cible idéale d’optimisation pour l’IA, et lie étroitement la valeur d’une tâche à sa vérifiabilité. ![Illustration](https://km.sankuai.com/api/file/cdn/2752980249/228183240565?contentType=1) Le chemin central pour améliorer les capacités de programmation d’un modèle repose sur « trois mises à l’échelle » : d’abord le volume de données, avec une forte proportion de code ; ensuite l’échelle du contexte, pour comprendre un dépôt entier et de longues chaînes, par exemple avec un contexte de 256K ; enfin la qualité des données, améliorée continuellement par des données synthétiques. Leur combinaison permet au modèle d’évoluer dans une boucle de retours vérifiables et de franchir un cap qualitatif dans les tâches complexes d’ingénierie. ![Illustration](https://km.sankuai.com/api/file/cdn/2752980249/228162627358?contentType=1\&isNewContent=false) #### IV. **De l’ingénierie du contexte au Harness Engineering — Zhou Xiao** Zhou Xiao se distingue parmi les intervenants par sa profondeur technique et une analyse calme fondée sur les premiers principes. Le compte public Web Infra de ByteDance a publié la transcription : . Résumé : La programmation IA a multiplié l’efficacité de l’écriture de code par un ordre de grandeur, mais la livraison n’a pas accéléré. Le code ne représente que 30 % du travail ; les 70 % restants sont les tests, le diagnostic, la publication et la communication. Optimiser uniquement l’écriture est un optimum local typique : davantage de code, davantage de pression de vérification, et des personnes finalement plus fatiguées. Zhou Xiao part des réalités physiques du Transformer autorégressif, du KV Cache, du Prompt Cache et de ReAct. Plus le contexte est long, plus le Prefill coûte cher, plus l’attention se dilue et plus les hallucinations augmentent. Ajouter à la fin est bon marché ; modifier au milieu est coûteux. L’essence de l’ingénierie du contexte consiste donc à protéger la stabilité du préfixe et à concevoir soigneusement la structure du prompt, plutôt qu’empiler sans frein des informations. Il faut compresser les longues conversations en snapshots ou AGENTS.md et confier leur stockage au système de fichiers, plutôt que tout pousser dans le contexte. Sur cette base, l’ingénieur doit passer du rôle d’auteur de code à celui de concepteur d’environnements et d’outils. Il doit offrir à l’agent une chaîne d’outils lisible, à faible latence, aux sorties structurées, et dotée de retours qui lui font ressentir les erreurs. Les interfaces graphiques, journaux et graphiques conçus pour les humains sont souvent du bruit pour un agent ; un bon outil doit être une API faite pour lui. MCP fournit les actions atomiques. Les Skills fixent les pratiques éprouvées dans des procédures chargées à la demande. Les sous-agents divisent les tâches longues en bacs à sable indépendants et communiquent par des synthèses structurées, pour éviter qu’un contexte unique n’accumule une entropie incontrôlable. La boucle ne doit pas s’arrêter à « l’IA écrit, puis je relis le code ». Il faut connecter l’agent au LSP, aux tests et à une CLI isolée pour qu’il démontre lui-même la correction de son travail, puis rassemble le périmètre du changement, les captures d’écran et le plan de test dans un rapport. L’humain examine le livrable au lieu de suivre chaque opération. Spécifications, plans, collaboration humain-machine et choix du moment où appeler AskUser visent tous à limiter les essais inutiles et à réserver l’attention humaine à la définition des objectifs et à l’examen des résultats. La conclusion centrale est que le modèle est une fonction soumise à des contraintes physiques, pas de la magie. Une fois ces contraintes comprises, l’avantage durable de l’ingénieur ne réside pas dans le nombre de lignes écrites, mais dans sa capacité à concevoir un meilleur Harness : un environnement où un groupe d’agents et quelques personnes forment un système d’ingénierie contrôlable, vérifiable et extensible, avec un contexte et des outils limités.