> 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/pt-br/2026/w12-d2-observation-frontend-vitality-in-the-ai-wave/2026-d2-key-takeaways-review.md). # Principais pontos do D2 de 2026 Programação: Em geral, a organização compartilha os slides após um mês. Não há transmissão ao vivo nem gravações. Dezenas de apresentações acontecem em paralelo em um único dia, então é inevitável perder muito conteúdo. Escolhi alguns palestrantes com sólida experiência técnica. Abaixo estão apenas as sessões a que assisti e que considero dignas de revisitar. Antes, uma breve apresentação do ecossistema atual de JavaScript. Percebo que até muitos profissionais de frontend conhecem pouco o ecossistema da própria linguagem ou ainda o veem como quando começaram na profissão. Hoje, os principais participantes incluem Vercel, VoidZero, Bun e Biome. Pedi ao ChatGPT um diagrama ASCII, que comunica bem essa estrutura e serve de referência. ``` ┌──────────────────────────────────────────────────────────────────────┐ │ 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 │ └──────────────────────────────────────────────────────────────────────┘ ``` #### 1. **Vite+: uma cadeia integrada de ferramentas JS — Evan You** Continua a promoção da reescrita de ferramentas de frontend em Rust. Usar Rust na infraestrutura de frontend praticamente já é consenso no setor. Com exceção do TSC. | **Tipo de ferramenta** | **Geração anterior (JavaScript)** | **Nova geração (Rust)** | | ----------------------------- | ------------------------------------------- | ----------------------- | | Estrutura inicial de projetos | Vue Cli / Create React App | Vite 8 | | Empacotamento | Webpack (compilação com ts-loader) / Rollup | Rolldown | | Build de TS | tsup (baseado em esbuild) | tsdown | | Análise de código | ESLint | Oxlint | | Formatação | Prettier | Oxfmt | | Framework de testes | Jest | Vitest | ![Slide sobre a evolução das ferramentas](https://km.sankuai.com/api/file/cdn/2752980249/228125441867?contentType=1\&isNewContent=false) O Vite+ reúne os vários arquivos de configuração da cadeia de ferramentas em um único arquivo, simplificando o trabalho. ![Slide sobre a configuração unificada do Vite+](https://km.sankuai.com/api/file/cdn/2752980249/228143018714?contentType=1\&isNewContent=false) Por que esse trabalho importa? Por que a era da IA precisa de ferramentas unificadas e eficientes? **Ideia central: escrever código deixou de ser o gargalo. A IA precisa verificar continuamente o próprio código. Sem uma cadeia de ferramentas limpa e eficiente, o crescimento futuro da produtividade encontrará um obstáculo.** ![Slide sobre ferramentas e produtividade com IA](https://km.sankuai.com/api/file/cdn/2752980249/228145264077?contentType=1\&isNewContent=false) No fim, ele mencionou brevemente um produto em testes internos na VoidZero, voltado sobretudo à implantação automática e à segurança de tipos de ponta a ponta em toda a pilha. Parece o início de uma oferta de serviços em nuvem, na mesma direção da Vercel. ![Slide sobre o produto da VoidZero](https://km.sankuai.com/api/file/cdn/2752980249/228143392739?contentType=1\&isNewContent=false) #### 2. **Google A2UI: interfaces geradas por LLMs para agentes e A2A —** Jennie Uma ideia da influência do Google: ![Slide sobre a presença do Google](https://km.sankuai.com/api/file/cdn/2752980249/228154026954?contentType=1) ![Slide da apresentação do Google](https://km.sankuai.com/api/file/cdn/2752980249/228178285513?contentType=1\&isNewContent=false) A sessão apresentou o A2UI, que trata da geração dinâmica de interfaces para usuários. Além dele, existem várias alternativas. | **Dimensão** | **AG-UI** | **ChatKit** | **MCP UI** | **Vercel AI UI** | **Google A2UI** | | ----------------------- | ----------------------------------- | -------------------------------------- | ------------------------------------------ | ------------------------------------ | -------------------------------------------- | | **Posicionamento** | Orientado pelo estado do frontend | Específico da OpenAI | Renderização remota pelo agente | Integração vertical da pilha | **Protocolo declarativo de uso geral** | | **Mecanismo central** | Estado compartilhado do cliente | Biblioteca proprietária de componentes | iframe em sandbox | Shadcn + SDK | **Descrição da renderização em JSON** | | **Relação sinal/ruído** | Muito alta (desempenho nativo) | Média | Média (custo da comunicação entre origens) | Alta (eficiência de desenvolvimento) | **Muito alta (consistência visual)** | | **Segurança** | Alta (frontend controlado) | Alta | Muito alta (ambiente isolado) | Alta | **Muito alta (execução de código proibida)** | | **Multiplataforma** | Fraca (exige reescrever o frontend) | Fraca | Forte (prioriza Web) | Fraca (prioriza Web) | **Muito forte (nativo e Web)** | **Característica do Google A2UI: a interface é dado estruturado** Enquanto a Vercel envia trechos de componentes React, isto é, código, diretamente do servidor, o A2UI exige que o agente envie apenas descrições JSON. * O agente produz um fluxo de JSON com estrutura plana, descrevendo a intenção da interface, por exemplo `{type: "chart", data: [...]}`. Ao recebê-lo, o cliente chama componentes locais predefinidos e confiáveis, como Angular, Flutter ou Lit, para renderizar. * Essa arquitetura que separa dados e renderização elimina completamente o risco de scripts maliciosos gerados por LLMs, como XSS, e permite que as respostas tenham o mesmo estilo visual em aplicativos móveis nativos e páginas Web. A lógica fundamental do AG-UI é: o agente cuida apenas de pensar e decidir; a lógica da interface precisa permanecer no frontend. * Sincronização de estado (Shared State): estabelece entre agente e frontend um objeto de estado com sincronização bidirecional em tempo real. O agente pode alterá-lo diretamente por instruções, como `state.selectedItems = [...]`. Ao detectar a alteração, o framework de frontend, React ou Vue, atualiza os componentes locais em milissegundos. * Disparo de ações (Action System): desenvolvedores de frontend expõem um conjunto de funções de capacidade, as Actions. O agente decide quando chamá-las, mas o código do frontend define inteiramente como serão executadas. Isso garante a segurança da lógica de negócio. A lógica fundamental do MCP UI é: interfaces devem ser padronizadas como APIs; onde o agente for, a interface o acompanha. * Interface como recurso (UI as Resource): no protocolo MCP, a interface deixa de ser código previamente escrito no frontend e passa a ser um recurso oferecido dinamicamente pelo agente. Ele retorna um URI pelo protocolo `ui://`, como `ui://analytics-dashboard/v1`. * Independência do hospedeiro (Host Agnostic): você escreve um servidor MCP, e sua interface pode ser renderizada diretamente no Claude Desktop, ChatGPT, Cursor ou no seu próprio aplicativo, sem reescrever o frontend para cada plataforma. (iframe) #### **3. Construindo Agentic Coding: do modelo ao framework —** Cui Zeyu (Mayou), Luo Changwei (Shanguo) Há muitas ferramentas de programação com IA dentro da Alibaba, cada departamento desenvolvendo a sua. Parece mesmo o frontend de dez anos atrás. Assisti a apenas duas apresentações, Qoder e Qwen-Code. O Qwen-Code foi um pouco mais interessante. É um fork do Gemini Cli: . Anotei só duas ideias. O restante era apresentação do produto; quem se interessar pode ler o repositório ou instalar para experimentar. A importância da programação vem, em essência, de ser uma tarefa altamente verificável. Em muitas atividades, gerar conteúdo é fácil, mas verificar sua correção é difícil, como na escrita de artigos ou em julgamentos subjetivos. Na programação ocorre o contrário: embora gerar seja mais difícil, compilação, testes e sistemas de avaliação permitem verificar rapidamente o resultado. Essa combinação de geração difícil e verificação fácil faz da programação um alvo ideal de otimização para IA e mostra a forte relação entre o valor de uma tarefa e sua verificabilidade. ![Slide sobre programação e verificabilidade](https://km.sankuai.com/api/file/cdn/2752980249/228183240565?contentType=1) O caminho central para melhorar a capacidade de programação dos modelos envolve três formas de escala: escala de dados, com grande volume e alta proporção de código; escala de contexto, permitindo compreensão de repositórios e cadeias longas, como um contexto de 256K; e dados de alta qualidade, melhorando continuamente o treinamento por meio de dados sintéticos. Juntas, permitem que o modelo evolua em um ciclo de retorno verificável e avance qualitativamente em tarefas complexas de engenharia. ![Slide sobre as três formas de escala](https://km.sankuai.com/api/file/cdn/2752980249/228162627358?contentType=1\&isNewContent=false) #### 4. **Da engenharia de contexto à Harness Engineering —** Zhou Xiao Zhou Xiao estava entre os palestrantes de melhor visão técnica, analisando com calma a partir de primeiros princípios. A conta Web Infra da ByteDance publicou a transcrição: . Resumo: A programação com IA elevou a eficiência de escrever código em uma ordem de grandeza, mas a entrega não acelerou, porque programar ocupa apenas 30% do trabalho. Os outros 70% são testes, investigação de falhas, publicação e comunicação. Otimizar só a escrita é um caso típico de ótimo local: mais código, maior pressão de verificação e pessoas ainda mais cansadas. Zhou parte de realidades físicas como a autorregressão dos Transformers, KV Cache, Prompt Cache e ReAct. Quanto maior o contexto, mais caro o prefill, mais diluída a atenção e mais alucinações. Acrescentar é barato; alterar o meio é caro. A essência da engenharia de contexto é, portanto, preservar a estabilidade do prefixo e desenhar cuidadosamente a estrutura do prompt, em vez de acumular informações sem critério. É comprimir conversas longas em snapshots ou AGENTS.md e delegar seu armazenamento ao sistema de arquivos, em vez de empurrar tudo para o contexto. Sob essa premissa, o engenheiro passa de quem escreve código a quem desenha ambientes e ferramentas: precisa construir para o agente uma cadeia legível, de baixa latência, com saídas estruturadas e retorno que torne falhas perceptíveis. GUIs, logs e gráficos tradicionais voltados a pessoas são, em grande parte, ruído para agentes. Uma boa ferramenta deve ser uma API para eles. O MCP fornece ações atômicas; Skills transformam práticas maduras em procedimentos carregados sob demanda; subagentes dividem tarefas longas em sandboxes independentes e se comunicam por resumos estruturados, evitando que a entropia de um único contexto saia do controle. O ciclo não pode parar em “a IA escreve e eu reviso o código”. O agente deve acessar LSP, testes e CLIs em sandbox, demonstrar a correção e reunir escopo das alterações, capturas e plano de testes em um relatório. A pessoa revisa a entrega, sem acompanhar cada operação. Especificações, planos, colaboração humano-máquina e o momento de usar AskUser servem para reduzir tentativas inúteis e preservar a atenção humana para definir objetivos e examinar resultados. A conclusão central é que modelos são funções sujeitas a restrições físicas, não magia. Ao entender essas restrições, a verdadeira vantagem defensável do engenheiro está em desenhar um harness melhor: fazer um grupo de agentes e poucas pessoas formar um sistema de engenharia controlável, verificável e escalável, dentro dos limites de contexto e ferramentas. Ela não está em escrever mais linhas de código.