# Gabriel Caiana — Personal Blog

> Personal blog of Gabriel Caiana, Senior Software Engineer specializing in frontend architecture, Vue.js, Nuxt, TypeScript, and web performance. Articles published in both English and Portuguese (BR).

## About

- Author: Gabriel Caiana
- Role: Senior Software Engineer and Tech Lead at Petlove
- Expertise: Applied AI, LangGraph, evals, Vue, Nuxt, TypeScript
- Site: https://gabrielcaiana.com
- GitHub: https://github.com/gabrielcaiana
- LinkedIn: https://www.linkedin.com/in/gabrielcaiana/
- X: https://x.com/gabriel_caiana
- Medium: https://medium.com/@gabrielcaianaguedes
- Email: gabrielcaianaguedes@gmail.com

## Key pages

- [Blog (EN)](https://gabrielcaiana.com/blog): All English articles
- [Blog (PT)](https://gabrielcaiana.com/pt/blog): All Portuguese articles
- [Series (EN)](https://gabrielcaiana.com/series): Multi-part article series in English
- [Series (PT)](https://gabrielcaiana.com/pt/series): Multi-part article series in Portuguese
- [Now](https://gabrielcaiana.com/now): What I'm currently working on and studying
- [Projects](https://gabrielcaiana.com/projects): Side projects
- [About](https://gabrielcaiana.com/about): Professional profile

## Articles (English)

- [LangGraph Only for the Handoff: A Support Chatbot Where a Decision Model Picks Who Answers](https://gabrielcaiana.com/blog/langgraph-only-for-the-handoff-a-support-chatbot-where-a-decision-model-picks-who-answers): A post-sales chatbot built with LangChain and LangGraph where a decision model picks the subagent per message: architecture, code, fallback, A/B and failures. (2026-10-16 · AI, LLM, Architecture)
- [Decision Models in Practice: When Picking the LLM per Message Pays Off (and When the Mid-Tier Model Is Enough)](https://gabrielcaiana.com/blog/decision-models-in-practice-when-picking-the-llm-per-message-pays-off): I had Microsoft-Decision-1 pick the subagent and LLM in a post-sales chatbot: harness, calibration, cost guard, and what 1,000 synthetic conversations showed. (2026-10-15 · AI, LLM, Architecture)
- [Vertical Slices in the Frontend: When the Folder Tells You What the Product Does](https://gabrielcaiana.com/blog/vertical-slices-in-the-frontend-when-the-folder-tells-you-what-the-product-does): How to structure a React SPA in vertical slices by domain: public API per slice, data from route loaders, and an architecture test that blocks shortcuts in CI. (2026-10-11 · Architecture, Frontend, React, TypeScript)
- [From Base Model to ChatGPT: SFT, Tools and Reinforcement Learning](https://gabrielcaiana.com/blog/from-base-model-to-chatgpt): How an LLM base model becomes ChatGPT: supervised fine-tuning, tool use, hallucination reduction and reinforcement learning explained clearly and in depth. (2026-07-02 · AI, LLM)
- [From Common Crawl to the Base Model: How an LLM Learns Language](https://gabrielcaiana.com/blog/from-common-crawl-to-the-base-model): How an LLM goes from raw web data to the base model: the Transformer, Common Crawl, FineWeb, tokenization and pre-training explained clearly, no hype. (2026-07-02 · AI, LLM)
- [React is a View Library, Not an Architecture](https://gabrielcaiana.com/blog/react-is-a-view-library-not-an-architecture): Your component started innocent, but today it does everything. Learn why React is a View library, not an architecture, and how to separate domain from UI. (2026-06-29 · Frontend, Architecture, Vue.js, JavaScript)
- [How We Reorganized an E-commerce Checkout Without Stopping Sales](https://gabrielcaiana.com/blog/how-we-reorganized-the-checkout-without-stopping-sales): How we reorganized a major e-commerce checkout in production with Nuxt Layers, the CAL pattern, and automated linting rules — without stopping a single sale. (2026-06-19 · Vue.js, Nuxt, TypeScript, Architecture)
- [Amazon Bedrock in practice: AI as part of the architecture, not as an external dependency](https://gabrielcaiana.com/blog/amazon-bedrock-in-practice-ai-as-part-of-the-architecture): How I moved from OpenAI to Amazon Bedrock: IAM auth, consolidated billing, Haiku vs Sonnet by task, and real trade-offs of running AI on AWS. (2026-05-06 · AWS, AI, Architecture)
- [What I have learned from building a product with Spec-Driven Development](https://gabrielcaiana.com/blog/o-que-aprendi-com-spec-driven-development): What I learned building a product with Spec-Driven Development: How structured specs eliminate technical debt using AI as a development peer. (2026-04-08 · AI, Architecture, Good Practices)
- [NestJS monorepo with pnpm workspaces: how I structured the dev experience for multiple services](https://gabrielcaiana.com/blog/monorepo-nestjs-pnpm-workspaces-dev-experience): How I structured a NestJS monorepo with pnpm workspaces for multiple services: shared packages, hot reload in dev and optimized build in production. (2026-04-06 · Architecture, Good Practices, TypeScript)
- [Composable Abstraction Layer: the missing pattern between Pinia and its Vue components](https://gabrielcaiana.com/blog/composable-abstraction-layer-pinia-vue): Learn how the Composable Abstraction Layer eliminates the coupling between Pinia and Vue 3, centralizing logic, side-effects and ensuring testability per layer. (2026-03-23 · Vue.js, TypeScript, Architecture)
- [Modular Architecture with Nuxt Layers in Vue Projects](https://gabrielcaiana.com/blog/arquitetura-modular-frontend-nuxt-layers-revoluciona-organizacao-projetos-vue): Discover how Nuxt Layers organizes Vue.js projects with modular architecture. Create scalable and maintainable front-end applications with backend concepts. (2025-10-02 · Nuxt, Vue.js, Architecture, Frontend, Good Practices)
- [HTTP Caching and CDN with Cloudflare - Complete Guide](https://gabrielcaiana.com/blog/cache-http-cdn-cloudflare): Learn how to implement HTTP caching with the Cloudflare CDN to improve web application performance, reduce server costs and make your pages load faster. (2025-09-10 · Performance, AWS, Frontend, Good Practices)
- [Nuxt 4: TypeScript and Type Safety - Complete Guide](https://gabrielcaiana.com/blog/nuxt-4-typescript-type-safety): Explore TypeScript in Nuxt 4: auto-generated types, native type safety, and intelligent inference for safer, more productive Vue.js development. (2025-09-07 · Nuxt, TypeScript, Vue.js, Frontend, Good Practices)
- [Nuxt 4: New Directory Structure and Migration Guide](https://gabrielcaiana.com/blog/nuxt-4-nova-estrutura-diretorios-migracao): Discover the new Nuxt 4 directory structure with the app/ directory and learn how to migrate your Nuxt 3 projects safely and without breaking anything. (2025-09-01 · Nuxt, Vue.js, Frontend, Architecture, Good Practices)
- [JavaScript in 2025: Complete Guide to the Most Popular Methods and Operators](https://gabrielcaiana.com/blog/javascript-em-2025-guia-completo-metodos-operadores): Complete guide to the most searched JavaScript methods in 2025: forEach, map, filter, reduce, split, push, splice and the ternary operator, with examples. (2025-08-28 · JavaScript, Frontend, Good Practices)
- [Persistent Storage in Nuxt with Unstorage](https://gabrielcaiana.com/blog/armazenamento-persistente-no-nuxt-com-unstorage): Learn how to use Unstorage on Nuxt to persist server-side data with Redis and Cloudflare KV. Complete guide with practical storage examples in Nuxt 3. (2025-07-10 · Nuxt, JavaScript, Architecture, Performance, Good Practices)
- [How to store data in the browser without making a mess](https://gabrielcaiana.com/blog/como-armazenar-dados-no-navegador-sem-fazer-bagunca): Understand when to use localStorage, sessionStorage and IndexedDB. Practical guide with e-commerce examples to store data in the browser in an organized way. (2025-07-07 · JavaScript, Frontend, Performance, Good Practices)
- [Optimizing Indexing with Astro](https://gabrielcaiana.com/blog/otimizando-indexacao-com-astro): Discover how Astro improves site indexing with static rendering, zero JavaScript and SEO techniques to maximize visibility in search engines. (2025-06-15 · Good Practices, SEO, Performance)
- [Reactivity: SolidJS vs React vs Vue](https://gabrielcaiana.com/blog/reatividade-solidjs-v-react-vs-vue): Compare the reactivity systems of React, Vue and SolidJS: re-rendering, proxies and signals. Understand the differences and the impact on front-end performance. (2025-06-06 · Vue.js, Frontend, Performance)
- [Integration between GitHub and Discord for Pull Request Notifications](https://gabrielcaiana.com/blog/integracao-github-discord-notificacoes-pull-requests): Configure GitHub and Discord for automatic, real-time Pull Request notifications. Complete guide with step-by-step GitHub Actions for your team. (2024-09-01 · Good Practices)
- [Components for Debug and Rendering with DevOnly and ClientOnly in Nuxt 3](https://gabrielcaiana.com/blog/componentes-para-debug-e-renderizacao-com-devonly-e-clientonly-no-nuxt-3): Learn how to use DevOnly and ClientOnly in Nuxt 3 for conditional rendering, safe debugging in development, and more efficient and optimized production builds. (2024-08-31 · Nuxt, Vue.js, Frontend)
- [How to Preserve Component State Between Routes with KeepAlive in Nuxt 3](https://gabrielcaiana.com/blog/como-manter-estado-componentes-entre-rotas-keepalive-nuxt-3): Learn how to use KeepAlive in Nuxt 3 to preserve the state of components between route changes and ensure a more fluid and performant experience. (2024-08-26 · Nuxt, Vue.js, Performance)
- [Exploring Functional Programming in JavaScript](https://gabrielcaiana.com/blog/explorando-a-programacao-funcional-em-javascript): Learn the fundamentals of Functional Programming in JavaScript: first-class functions, immutability, composition and the map, filter and reduce methods. (2024-03-30 · JavaScript, Frontend, Good Practices)
- [How Core Web Vitals works](https://gabrielcaiana.com/blog/como-funciona-o-core-web-vitals): Understand Google's Core Web Vitals: LCP, FID and CLS. Learn how these metrics affect rankings and how to optimize the user experience on the website. (2024-02-24 · Performance, SEO, Frontend)
- [How to add webpack package analysis to your nuxt project](https://gabrielcaiana.com/blog/nuxt-webpack-analyze): Learn how to configure webpack bundle analysis in Nuxt with an interactive treemap to visualize and optimize your application's bundle size. (2024-01-21 · Nuxt, Performance, Frontend)
- [Metrics to Measure Software Performance](https://gabrielcaiana.com/blog/metricas-para-medir-performance-em-software): Understand the main software performance metrics: latency, throughput and scalability. How to monitor and optimize systems for high availability. (2024-01-11 · Performance, Architecture, Good Practices)
- [Building a Robust Architecture](https://gabrielcaiana.com/blog/construindo-uma-arquitetura-robusta): Explore the pillars of a robust software architecture: configurability, extensibility, and ease of installation for scalable, flexible systems. (2024-01-10 · Architecture, Frontend, Good Practices)
- [Understanding Nielsen's 10 Heuristics](https://gabrielcaiana.com/blog/entendendo-as-10-heuristicas-de-nielsen): Discover Nielsen's 10 Heuristics for interface design. Jakob Nielsen's principles created in 1994 that guide usability and good UX practices. (2022-07-08 · Frontend)
- [What are micro frontends](https://gabrielcaiana.com/blog/o-que-sao-micro-frontends): What Micro Frontends are: the architectural pattern that brings microservices to the frontend for independent teams, faster deployments and scalability. (2022-07-08 · Architecture, Frontend, Good Practices)

## Articles (Português)

- [LangGraph só pro handoff: um chatbot em que um modelo de decisão escolhe quem atende](https://gabrielcaiana.com/pt/blog/langgraph-so-pro-handoff-um-chatbot-em-que-um-modelo-de-decisao-escolhe-quem-atende): Chatbot de pós-venda com LangChain e LangGraph em que um modelo de decisão escolhe o subagente por mensagem: arquitetura, código, fallback, A/B e falhas reais. (2026-10-16 · IA, LLM, Arquitetura)
- [Decision models na prática: quando escolher o LLM por mensagem vale a pena (e quando o médio basta)](https://gabrielcaiana.com/pt/blog/decision-models-na-pratica-quando-escolher-o-llm-por-mensagem-vale-a-pena): Coloquei o Microsoft-Decision-1 pra escolher subagente e LLM num chatbot de pós-venda: harness, calibration, cost guard e o que 1.000 conversas mostraram. (2026-10-15 · IA, LLM, Arquitetura)
- [Vertical slices no frontend: quando a pasta conta o que o produto faz](https://gabrielcaiana.com/pt/blog/vertical-slices-no-frontend-quando-a-pasta-conta-o-que-o-produto-faz): Como organizar uma SPA React em vertical slices por domínio: public API por slice, dados no loader da rota e um teste de arquitetura que impede o atalho no CI. (2026-10-11 · Arquitetura, Frontend, React, TypeScript)
- [De modelo base a ChatGPT: SFT, ferramentas e reinforcement learning](https://gabrielcaiana.com/pt/blog/de-modelo-base-ao-chatgpt): Como o modelo base de uma LLM vira o ChatGPT: supervised fine-tuning, uso de ferramentas, redução de alucinação e reinforcement learning explicados aqui. (2026-07-02 · IA, LLM)
- [Do Common Crawl ao modelo base: como uma LLM aprende linguagem](https://gabrielcaiana.com/pt/blog/do-common-crawl-ao-modelo-base): Como uma LLM sai de dados brutos da web e chega ao modelo base: Transformer, Common Crawl, FineWeb, tokenização e pré-treinamento explicados sem enrolação. (2026-07-02 · IA, LLM)
- [React é uma biblioteca de Views, não uma arquitetura](https://gabrielcaiana.com/pt/blog/react-e-uma-biblioteca-de-views-nao-uma-arquitetura): Seu componente começou inocente, mas hoje faz tudo. Entenda por que React é uma biblioteca de Views, não uma arquitetura, e como separar domínio da UI. (2026-06-29 · Frontend, Arquitetura, Vue.js, JavaScript)
- [Como reorganizamos o checkout de um grande e-commerce sem parar de vender](https://gabrielcaiana.com/pt/blog/como-reorganizamos-o-checkout-sem-parar-de-vender): Como reorganizamos o checkout de um grande e-commerce com Nuxt Layers, padrão CAL e linting automático para escalar — sem parar de vender em produção. (2026-06-19 · Vue.js, Nuxt, TypeScript, Arquitetura)
- [Amazon Bedrock na prática: IA como parte da arquitetura, não como dependência externa](https://gabrielcaiana.com/pt/blog/amazon-bedrock-na-pratica-ia-como-parte-da-arquitetura): Como migrei de OpenAI para Amazon Bedrock: auth via IAM, billing consolidado, Haiku vs Sonnet por tarefa e trade-offs reais de rodar IA na AWS. (2026-05-06 · AWS, IA, Arquitetura)
- [O que tenho aprendido ao construir um produto com Spec-Driven Development](https://gabrielcaiana.com/pt/blog/o-que-aprendi-com-spec-driven-development): O que aprendi construindo um produto com Spec-Driven Development: como specs estruturados eliminam débito técnico usando IA como par de desenvolvimento. (2026-04-08 · IA, Arquitetura, Boas Práticas)
- [Monorepo NestJS com pnpm workspaces: como estruturei o dev experience para múltiplos serviços](https://gabrielcaiana.com/pt/blog/monorepo-nestjs-pnpm-workspaces-dev-experience): Como estruturei um monorepo NestJS com pnpm workspaces para múltiplos serviços: packages compartilhados, hot reload em dev e build otimizado em produção. (2026-04-06 · Arquitetura, Boas Práticas, TypeScript)
- [Composable Abstraction Layer: o pattern que faltava entre Pinia e seus componentes Vue](https://gabrielcaiana.com/pt/blog/composable-abstraction-layer-pinia-vue): Aprenda como o Composable Abstraction Layer elimina o acoplamento entre Pinia e Vue 3, centralizando lógica, side-effects e garantindo testabilidade por camada. (2026-03-23 · Vue.js, TypeScript, Arquitetura)
- [Arquitetura Modular com Nuxt Layers em Projetos Vue](https://gabrielcaiana.com/pt/blog/arquitetura-modular-frontend-nuxt-layers-revoluciona-organizacao-projetos-vue): Descubra como o Nuxt Layers organiza projetos Vue.js com arquitetura modular. Crie aplicações front-end escaláveis e manuteníveis com conceitos do backend. (2025-10-02 · Nuxt, Vue.js, Arquitetura, Frontend, Boas Práticas)
- [Cache HTTP e CDN com Cloudflare - Guia Completo](https://gabrielcaiana.com/pt/blog/cache-http-cdn-cloudflare): Aprenda a implementar cache HTTP com Cloudflare CDN para melhorar a performance das aplicações web, reduzir custos de servidor e acelerar o carregamento. (2025-09-10 · Performance, AWS, Frontend, Boas Práticas)
- [Nuxt 4: TypeScript e Type Safety - Guia Completo](https://gabrielcaiana.com/pt/blog/nuxt-4-typescript-type-safety): Explore o TypeScript no Nuxt 4: auto-generated types, type safety nativo e inferência inteligente para desenvolvimento Vue.js mais seguro e produtivo. (2025-09-07 · Nuxt, TypeScript, Vue.js, Frontend, Boas Práticas)
- [Nuxt 4: Nova Estrutura de Diretórios e Guia de Migração](https://gabrielcaiana.com/pt/blog/nuxt-4-nova-estrutura-diretorios-migracao): Descubra a nova estrutura de diretórios do Nuxt 4 com o diretório app/ e aprenda como migrar seus projetos do Nuxt 3 de forma segura e sem quebrar nada. (2025-09-01 · Nuxt, Vue.js, Frontend, Arquitetura, Boas Práticas)
- [JavaScript em 2025: Guia Completo dos Métodos e Operadores Mais Buscados](https://gabrielcaiana.com/pt/blog/javascript-em-2025-guia-completo-metodos-operadores): Guia completo dos métodos JavaScript mais buscados em 2025: forEach, map, filter, reduce, split, push, splice e operador ternário com exemplos práticos. (2025-08-28 · JavaScript, Frontend, Boas Práticas)
- [Armazenamento Persistente no Nuxt com Unstorage](https://gabrielcaiana.com/pt/blog/armazenamento-persistente-no-nuxt-com-unstorage): Aprenda a usar o Unstorage no Nuxt para persistir dados server-side com Redis e Cloudflare KV. Guia completo com exemplos práticos de armazenamento no Nuxt 3. (2025-07-10 · Nuxt, JavaScript, Arquitetura, Performance, Boas Práticas)
- [Como armazenar dados no navegador sem fazer bagunça](https://gabrielcaiana.com/pt/blog/como-armazenar-dados-no-navegador-sem-fazer-bagunca): Entenda quando usar localStorage, sessionStorage e IndexedDB. Guia prático com exemplos de e-commerce para armazenar dados no navegador de forma organizada. (2025-07-07 · JavaScript, Frontend, Performance, Boas Práticas)
- [Otimizando a Indexação com Astro](https://gabrielcaiana.com/pt/blog/otimizando-indexacao-com-astro): Descubra como o Astro melhora a indexação de sites com renderização estática, zero JavaScript e técnicas de SEO para maximizar visibilidade nos buscadores. (2025-06-15 · Frontend, SEO, Performance)
- [Reatividade: SolidJS vs React vs Vue](https://gabrielcaiana.com/pt/blog/reatividade-solidjs-v-react-vs-vue): Compare os sistemas de reatividade de React, Vue e SolidJS: re-renderização, proxies e signals. Entenda as diferenças e o impacto na performance front-end. (2025-06-06 · Vue.js, Frontend, Performance)
- [Integração entre GitHub e Discord para Notificações de Pull Requests](https://gabrielcaiana.com/pt/blog/integracao-github-discord-notificacoes-pull-requests): Configure GitHub e Discord para notificações automáticas de Pull Requests em tempo real. Guia completo com GitHub Actions passo a passo para seu time. (2024-09-01 · Boas Práticas)
- [Componentes para Debug e Renderização com DevOnly e ClientOnly no Nuxt 3](https://gabrielcaiana.com/pt/blog/componentes-para-debug-e-renderizacao-com-devonly-e-clientonly-no-nuxt-3): Aprenda a usar DevOnly e ClientOnly no Nuxt 3 para renderização condicional, debug seguro em desenvolvimento e builds de produção mais eficientes e otimizadas. (2024-08-31 · Nuxt, Vue.js, Frontend)
- [Como Preservar o Estado dos Componentes entre Rotas com KeepAlive no Nuxt 3](https://gabrielcaiana.com/pt/blog/como-manter-estado-componentes-entre-rotas-keepalive-nuxt-3): Aprenda a usar o KeepAlive no Nuxt 3 para preservar o estado dos componentes entre mudanças de rota e garantir uma experiência mais fluida e performática. (2024-08-26 · Nuxt, Vue.js, Performance)
- [Explorando a Programação Funcional em JavaScript](https://gabrielcaiana.com/pt/blog/explorando-a-programacao-funcional-em-javascript): Aprenda os fundamentos de Programação Funcional em JavaScript: funções de primeira classe, imutabilidade, composição e os métodos map, filter e reduce. (2024-03-30 · JavaScript, Frontend, Boas Práticas)
- [Como funciona o Core Web Vitals](https://gabrielcaiana.com/pt/blog/como-funciona-o-core-web-vitals): Entenda os Core Web Vitals do Google: LCP, FID e CLS. Saiba como essas métricas afetam o ranqueamento e como otimizar a experiência do usuário no site. (2024-02-24 · Performance, SEO, Frontend)
- [Como adicionar a análise de pacotes do webpack em seu projeto nuxt](https://gabrielcaiana.com/pt/blog/nuxt-webpack-analyze): Aprenda a configurar a análise de pacotes webpack no Nuxt com um mapa de árvore interativo para visualizar e otimizar o tamanho do bundle da sua aplicação. (2024-01-21 · Nuxt, Performance, Frontend)
- [Métricas para Medir a Performance em Software](https://gabrielcaiana.com/pt/blog/metricas-para-medir-performance-em-software): Entenda as principais métricas de performance em software: latência, throughput e escalabilidade. Como monitorar e otimizar sistemas para alta disponibilidade. (2024-01-11 · Performance, Arquitetura, Boas Práticas)
- [Construindo uma Arquitetura Robusta](https://gabrielcaiana.com/pt/blog/construindo-uma-arquitetura-robusta): Explore os pilares de uma arquitetura de software robusta: configurabilidade, extensibilidade e facilidade de instalação para sistemas escaláveis e flexíveis. (2024-01-10 · Arquitetura, Frontend, Boas Práticas)
- [Entendendo as 10 Heurísticas de Nielsen](https://gabrielcaiana.com/pt/blog/entendendo-as-10-heuristicas-de-nielsen): Descubra as 10 Heurísticas de Nielsen para design de interfaces. Os princípios de Jakob Nielsen criados em 1994 que guiam usabilidade e boas práticas de UX. (2022-07-08 · Frontend)
- [O que são micro frontends](https://gabrielcaiana.com/pt/blog/o-que-sao-micro-frontends): Entenda o que são Micro Frontends: o padrão arquitetural que aplica microsserviços ao frontend para times independentes, deploys ágeis e escalabilidade. (2022-07-08 · Arquitetura, Frontend, Boas Práticas)