Frontend Framework Selection

{
  "_meta": {
    "schema": "https://www.drawdecisiontree.com/decision-dag.schema.json",
    "source": "https://www.drawdecisiontree.com",
    "description": "DrawDecisionTree.com is a free tool for building, sharing, and embedding interactive decision trees. This file is the machine-readable export of a published decision tree. The `dsl` field contains the original source in the Decision DAG DSL; the `dag` schema is documented at the URL in `schema` above.",
    "links": {
      "interactive": "https://www.drawdecisiontree.com/t/drawdecisiontree/frontend-framework.html",
      "embed": "https://www.drawdecisiontree.com/embed/path/drawdecisiontree/frontend-framework",
      "dsl_reference": "https://www.drawdecisiontree.com/decision-tree-dsl-reference.html",
      "guides": "https://www.drawdecisiontree.com/guides",
      "schema_docs": "https://www.drawdecisiontree.com/decision-dag.schema.json",
      "author_trees": "https://www.drawdecisiontree.com/trees/drawdecisiontree"
    },
    "generated_at": "2026-05-29T12:05:39.293Z"
  },
  "author": {
    "handle": "drawdecisiontree",
    "first_name": "Andrew",
    "last_name": null,
    "avatar_url": "1d32d828-b6ca-40ec-bdd7-771fe7b9c36a/avatar-1778531481027.svg",
    "display_name": "Andrew"
  },
  "file": {
    "id": "96110dff-7678-4cbc-b248-07798896e838",
    "name": "Frontend Framework Selection",
    "public_slug": "frontend-framework",
    "updated_at": "2026-05-12T16:53:43.587978+00:00",
    "url": "https://www.drawdecisiontree.com/t/drawdecisiontree/frontend-framework.html",
    "json_url": "https://www.drawdecisiontree.com/t/drawdecisiontree/frontend-framework/tree.json",
    "dsl_url": "https://www.drawdecisiontree.com/t/drawdecisiontree/frontend-framework/tree.dag"
  },
  "meta": {
    "description": "Frontend framework choice shapes hiring, component library selection, and team conventions for years. This tree cuts through the ecosystem noise and eliminates options that don't match your rendering model, performance constraints, or team context — leaving you with a concrete shortlist rather than a five-way comparison.",
    "mode": "elimination",
    "entry": "Q1",
    "tags": [
      "frontend",
      "javascript",
      "web development",
      "architecture",
      "software design"
    ],
    "image": "https://images.unsplash.com/photo-1593720213428-28a5b9e94613?w=1200&q=80"
  },
  "questions": [
    {
      "id": "Q1",
      "text": "Is your application primarily a rich single-page application with substantial client-side state, complex interactions, and minimal server-rendered pages?"
    },
    {
      "id": "A",
      "text": "YES — complex SPA with rich client-side state [REACT, VUE, ANGULAR, SVELTE]"
    },
    {
      "id": "B",
      "text": "NO — server-rendered with targeted interactivity [HTMX, SVELTE, VUE]"
    },
    {
      "id": "Q2",
      "text": "Does your organisation require a batteries-included full framework with built-in routing, HTTP client, forms, dependency injection, and long-term enterprise LTS guarantees?"
    },
    {
      "id": "A",
      "text": "YES — full framework, opinionated structure, enterprise LTS [ANGULAR]"
    },
    {
      "id": "B",
      "text": "NO — we'll compose our own stack from focused libraries [REACT, VUE, SVELTE, HTMX]"
    },
    {
      "id": "Q3",
      "text": "Is minimising JavaScript bundle size and eliminating a virtual DOM runtime a primary goal?"
    },
    {
      "id": "A",
      "text": "YES — targeting slow devices, low-bandwidth, or Core Web Vitals are a primary KPI [SVELTE, HTMX]"
    },
    {
      "id": "B",
      "text": "NO — typical modern browser performance is acceptable [REACT, VUE, ANGULAR, SVELTE]"
    },
    {
      "id": "Q4",
      "text": "Does your team have significant existing investment in a specific ecosystem — component libraries, mobile apps, or hired expertise?"
    },
    {
      "id": "A",
      "text": "React codebase, React Native, or we prioritise the largest hiring pool [REACT]"
    },
    {
      "id": "B",
      "text": "Existing Vue or Angular investment [VUE, ANGULAR]"
    },
    {
      "id": "C",
      "text": "Starting fresh — we prioritise simplicity and developer happiness over ecosystem size [SVELTE, VUE]"
    }
  ],
  "outcomes": [
    {
      "id": "REACT",
      "label": "React"
    },
    {
      "id": "VUE",
      "label": "Vue.js"
    },
    {
      "id": "ANGULAR",
      "label": "Angular"
    },
    {
      "id": "SVELTE",
      "label": "Svelte"
    },
    {
      "id": "HTMX",
      "label": "HTMX"
    }
  ],
  "dsl": "dag: Frontend Framework Selection\nversion: 1.0.0\nimage: https://images.unsplash.com/photo-1593720213428-28a5b9e94613?w=1200&q=80\ndescription: Frontend framework choice shapes hiring, component library selection, and team conventions for years. This tree cuts through the ecosystem noise and eliminates options that don't match your rendering model, performance constraints, or team context — leaving you with a concrete shortlist rather than a five-way comparison.\ntags: frontend, javascript, web development, architecture, software design\nentry: Q1\nmode: elimination\n\nQ1: Is your application primarily a rich single-page application with substantial client-side state, complex interactions, and minimal server-rendered pages?\n  hint: A SaaS dashboard, collaborative tool, or data-heavy admin panel is a clear SPA. A marketing site, blog, or e-commerce storefront with occasional interactive widgets is not — server rendering with targeted JavaScript enhancement fits those better.\n  A: YES — complex SPA with rich client-side state [REACT, VUE, ANGULAR, SVELTE]\n  B: NO — server-rendered with targeted interactivity [HTMX, SVELTE, VUE]\n\nQ2: Does your organisation require a batteries-included full framework with built-in routing, HTTP client, forms, dependency injection, and long-term enterprise LTS guarantees?\n  hint: Angular provides everything in one opinionated package — useful in large organisations where consistency across many teams matters more than flexibility. If you're comfortable assembling a stack from best-of-breed libraries (a router, a state manager, a form library), you don't need Angular's constraints.\n  A: YES — full framework, opinionated structure, enterprise LTS [ANGULAR]\n  B: NO — we'll compose our own stack from focused libraries [REACT, VUE, SVELTE, HTMX]\n\nQ3: Is minimising JavaScript bundle size and eliminating a virtual DOM runtime a primary goal?\n  hint: Svelte compiles components to vanilla JS at build time — there is no runtime framework shipped to the browser. HTMX adds around 14 KB gzipped and has no virtual DOM. React and Vue both ship a runtime that adds 30–45 KB to the initial bundle, which matters most for performance on low-end mobile devices.\n  A: YES — targeting slow devices, low-bandwidth, or Core Web Vitals are a primary KPI [SVELTE, HTMX]\n  B: NO — typical modern browser performance is acceptable [REACT, VUE, ANGULAR, SVELTE]\n\nQ4: Does your team have significant existing investment in a specific ecosystem — component libraries, mobile apps, or hired expertise?\n  hint: React has the largest talent pool and the widest component library ecosystem (shadcn/ui, Radix, MUI, Chakra). Vue has strong adoption in Asia and a gentler learning curve. If you are hiring, React skills are easiest to find; if you are building a design system, React's ecosystem breadth is a real advantage.\n  A: React codebase, React Native, or we prioritise the largest hiring pool [REACT]\n  B: Existing Vue or Angular investment [VUE, ANGULAR]\n  C: Starting fresh — we prioritise simplicity and developer happiness over ecosystem size [SVELTE, VUE]\n\n[REACT]: React\n  color: #61DAFB\n  description: React is the dominant JavaScript UI library — used by more teams, backed by more component libraries, and represented in more job descriptions than any alternative. Its unidirectional data flow and component model are the de facto mental model for modern frontend development. The ecosystem around React is vast: Next.js for server rendering and full-stack, React Native for mobile, shadcn/ui and Radix for accessible components, Zustand and Jotai for state management. React's flexibility is both a strength and a weakness — there is no canonical way to handle routing, server state, or forms, so teams must make and standardise those choices themselves. The virtual DOM runtime adds approximately 45 KB to the initial bundle but is well-optimised for most workloads. React 18 introduced concurrent rendering and server components, which remain the most significant architectural evolution in the library's history.\n  code: FE_REACT\n\n[VUE]: Vue.js\n  color: #42B883\n  description: Vue.js strikes a careful balance between React's flexibility and Angular's structure. It provides a gentle learning curve — templates use standard HTML syntax, and the Options API is approachable for developers coming from non-JavaScript backgrounds — while also offering a Composition API for teams that prefer a more function-based style. Vue's single-file components (`.vue` files combining template, script, and styles) are a clean abstraction that most developers find immediately productive. Nuxt.js provides the same server-rendering and full-stack capabilities for Vue that Next.js provides for React. Vue is particularly strong in Asia and Europe, and it remains the framework of choice for teams that find React's ecosystem too fragmented and Angular's too heavy. Its 44 KB runtime is comparable to React.\n  code: FE_VUE\n\n[ANGULAR]: Angular\n  color: #DD0031\n  description: Angular is a complete application framework — not a library — that provides routing, HTTP client, forms, dependency injection, testing utilities, and build tooling in a single, cohesive, opinionated package. This predictability is its primary advantage in large organisations with multiple teams: every Angular project has the same structure, the same patterns, and the same toolchain, which makes onboarding and cross-team code review far simpler. Angular is TypeScript-first — there is no JavaScript option — which delivers strong type safety and IDE tooling at the cost of a higher initial learning curve. Google maintains Angular with a long-term support model: each major version receives 18 months of active support. The trade-off is real verbosity — Angular applications require significantly more boilerplate than React or Vue for equivalent functionality, and its bundle size is the heaviest of the mainstream frameworks.\n  code: FE_ANGULAR\n\n[SVELTE]: Svelte\n  color: #FF3E00\n  description: Svelte takes a fundamentally different approach from React and Vue: it is a compiler, not a runtime framework. Svelte components are compiled to efficient vanilla JavaScript at build time — the user's browser receives no Svelte runtime, only the output code. This results in smaller bundles, faster initial load times, and simpler state management (reactive declarations use plain variable assignments rather than hooks or observables). SvelteKit provides a full-stack framework equivalent to Next.js or Nuxt. Svelte is an excellent choice for performance-sensitive applications, teams starting a greenfield project who are willing to trade ecosystem breadth for a superior developer experience, and embedded widgets where bundle size is critical. The trade-off is a smaller ecosystem — component libraries and third-party integrations are less mature than React's — and a smaller talent pool.\n  code: FE_SVELTE\n\n[HTMX]: HTMX\n  color: #3366CC\n  description: HTMX is not a JavaScript framework in the traditional sense — it is a small library (14 KB gzipped) that extends HTML with attributes for making AJAX requests, handling responses, and updating the DOM without writing JavaScript. The mental model returns to server-rendered HTML: the server returns HTML fragments, and HTMX swaps them into the page. This is a powerful pattern for applications where the backend already renders HTML (Django, Rails, Laravel, Phoenix) and interactivity needs are moderate — forms, search-as-you-type, modal dialogs, tabs, and live updates. HTMX eliminates the entire JavaScript build toolchain, dramatically reduces complexity, and lets backend developers build interactive UIs without learning a frontend framework. It is not the right choice for complex, highly stateful single-page applications where client-side state management is genuinely necessary.\n  code: FE_HTMX\n"
}