React vs Angular vs Vue in 2026: Pick the Right Framework

// io.thecodeforge — JavaScript tutorial
// React Server Component: fetching live product pricing for a checkout flow.
// This component runs ONLY on the server — no client JS bundle cost.
// The cache: 'no-store' is critical here. Without it, React caches this fetch
// and users can see stale prices for the duration of the cache TTL.

import { Suspense } from 'react';
import CheckoutItemSkeleton from './CheckoutItemSkeleton';

// RSC — no 'use client' directive means this runs on the server
async function CheckoutProductList({ cartItemIds }) {
  // Force a fresh fetch on every request — never cache pricing data
  const response = await fetch(
    `https://api.internal/products?ids=${cartItemIds.join(',')}`,
    { cache: 'no-store' } // Without this, Next.js caches and serves stale prices
  );

  if (!response.ok) {
    // Throw here so the nearest error.tsx boundary catches it cleanly
    throw new Error(`Product pricing fetch failed: ${response.status}`);
  }

  const products = await response.json();

  return (
    <ul className="checkout-product-list">
      {products.map((product) => (
        // Each item is a Client Component — needs interactivity for quantity controls
        <Suspense key={product.id} fallback={<CheckoutItemSkeleton />}>
          <CheckoutItem product={product} />
        </Suspense>
      ))}
    </ul>
  );
}

export default CheckoutProductList;

// --- Client Component for interactive quantity controls ---
'use client'; // This directive sends this component to the browser bundle

import { useState } from 'react';

function CheckoutItem({ product }) {
  const [quantity, setQuantity] = useState(1);

  // Derived value — never store computed values in state
  const lineTotal = (product.priceInCents * quantity) / 100;

  return (
    <li className="checkout-item">
      <span>{product.name}</span>
      <input
        type="number"
        min="1"
        value={quantity}
        onChange={(e) => setQuantity(Number(e.target.value))}
        aria-label={`Quantity for ${product.name}`}
      />
      {/* toFixed(2) to avoid floating-point display artifacts like $12.999999 */}
      <span>£{lineTotal.toFixed(2)}</span>
    </li>
  );
}

export default CheckoutItem;

// io.thecodeforge — JavaScript tutorial
// Angular 18 Signals-based service for a payment processing flow.
// Injectable service handles state + side effects — keeps components thin.
// Signals replace BehaviorSubject patterns here — no RxJS overhead for simple state.

import { Injectable, signal, computed } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

export type PaymentStatus = 'idle' | 'processing' | 'succeeded' | 'failed';

export interface PaymentIntent {
  intentId: string;
  amountInCents: number;
  currency: string;
}

@Injectable({
  providedIn: 'root', // Singleton across the app — one source of truth for payment state
})
export class PaymentProcessingService {
  // Signals are the Angular 18 way — writable signal is private, readonly exposed
  private readonly _status = signal<PaymentStatus>('idle');
  private readonly _errorMessage = signal<string | null>(null);
  private readonly _lastIntent = signal<PaymentIntent | null>(null);

  // Computed signals — derived state, recalculates only when dependencies change
  readonly isProcessing = computed(() => this._status() === 'processing');
  readonly hasError = computed(() => this._errorMessage() !== null);

  // Public readonly surfaces — components read these, never write directly
  readonly status = this._status.asReadonly();
  readonly errorMessage = this._errorMessage.asReadonly();
  readonly lastIntent = this._lastIntent.asReadonly();

  constructor(private readonly http: HttpClient) {}

  async initiatePayment(cartId: string, amountInCents: number): Promise<void> {
    // Guard: don't allow double-submission — signal prevents race condition
    if (this._status() === 'processing') {
      return;
    }

    this._status.set('processing');
    this._errorMessage.set(null); // Clear previous errors on new attempt

    try {
      // firstValueFrom converts Observable to Promise — cleaner in async/await flows
      const intent = await firstValueFrom(
        this.http.post<PaymentIntent>('/api/payments/initiate', {
          cartId,
          amountInCents,
        })
      );

      this._lastIntent.set(intent);
      this._status.set('succeeded');
    } catch (error) {
      // Set a user-safe message — never expose raw error internals to the template
      this._errorMessage.set(
        'Payment could not be processed. Please try again or contact support.'
      );
      this._status.set('failed');

      // Re-throw so the calling component can log to your error tracking (e.g. Sentry)
      throw error;
    }
  }

  resetPaymentState(): void {
    this._status.set('idle');
    this._errorMessage.set(null);
    this._lastIntent.set(null);
  }
}

// io.thecodeforge — JavaScript tutorial
// Vue 3 Composition API: a composable for real-time inventory polling
// in a warehouse management SaaS. Encapsulates polling lifecycle completely —
// the component using this never manages timers or cleanup manually.

import { ref, computed, onMounted, onUnmounted } from 'vue';

// Composable convention: always prefix with 'use' — this is the Vue equivalent
// of a React custom hook, but without the Rules of Hooks restrictions.
export function useInventoryPolling(skuId, pollingIntervalMs = 5000) {
  const stockLevel = ref(null);      // null = not yet loaded
  const isLoading = ref(false);
  const fetchError = ref(null);
  let pollingTimer = null;            // Timer reference for cleanup

  // Computed: derived state recalculates automatically when stockLevel changes
  const isLowStock = computed(() => {
    // Guard against null during initial load
    if (stockLevel.value === null) return false;
    return stockLevel.value < 10; // Business rule: below 10 units = low stock alert
  });

  async function fetchCurrentStock() {
    // Don't stack requests if a fetch is already in-flight
    if (isLoading.value) return;

    isLoading.value = true;
    fetchError.value = null;

    try {
      const response = await fetch(`/api/inventory/${skuId}/stock-level`);

      if (!response.ok) {
        // Surface the HTTP status — useful for 403 (auth expired) vs 503 (backend down)
        throw new Error(`Inventory API returned ${response.status}`);
      }

      const payload = await response.json();
      stockLevel.value = payload.unitsAvailable; // Update reactive ref — Vue tracks this
    } catch (error) {
      fetchError.value = error.message;
      // Don't re-throw — polling should survive transient network failures silently
    } finally {
      isLoading.value = false;
    }
  }

  // onMounted runs after the consuming component is attached to the DOM
  onMounted(() => {
    fetchCurrentStock(); // Immediate fetch on mount — don't wait for first interval
    pollingTimer = setInterval(fetchCurrentStock, pollingIntervalMs);
  });

  // onUnmounted is critical — forgetting this leaks the interval and causes
  // 'Warning: Can't perform a React state update on an unmounted component'
  // in React. Vue doesn't warn you — it just leaks silently.
  onUnmounted(() => {
    if (pollingTimer !== null) {
      clearInterval(pollingTimer);
      pollingTimer = null;
    }
  });

  return {
    stockLevel,   // readonly in practice — consuming component should not mutate
    isLowStock,
    isLoading,
    fetchError,
    refetch: fetchCurrentStock, // Expose manual refetch for 'Refresh' button
  };
}

// --- Usage in a warehouse dashboard component ---
// <script setup>
// import { useInventoryPolling } from '@/composables/useInventoryPolling';
// const { stockLevel, isLowStock, fetchError } = useInventoryPolling('SKU-4821', 3000);
// </script>
//
// <template>
//   <div :class="{ 'alert-low-stock': isLowStock }">
//     <span v-if="fetchError">Error: {{ fetchError }}</span>
//     <span v-else>Units available: {{ stockLevel ?? 'Loading...' }}</span>
//   </div>
// </template>

// io.thecodeforge — JavaScript tutorial
// This isn't runnable code — it's a decision model expressed in code.
// Use this to make the framework choice auditable and explicit.
// Copy this into your team's architecture decision record (ADR).

const PROJECT_CONSTRAINTS = {
  teamSize: 4,                    // Number of frontend engineers at steady state
  timeToFirstShip: 'weeks',       // 'weeks' | 'months' | 'quarters'
  projectLifespan: '2+ years',    // How long does this product need to live?
  tsEnforcement: 'preferred',     // 'required' | 'preferred' | 'optional'
  hiringPriority: 'high',         // How critical is hiring more devs in 6 months?
  mobileFirstAudience: false,     // Does bundle size critically affect your users?
  regulatedIndustry: false,       // Finance, health, government — auditability matters
};

// Score each framework 0-3 per constraint (0 = poor fit, 3 = ideal fit)
function scoreFrameworks(constraints) {
  const scores = {
    react: 0,
    angular: 0,
    vue: 0,
  };

  // Team size: Angular shines at scale, Vue at small teams
  if (constraints.teamSize >= 10) {
    scores.angular += 3; scores.react += 2; scores.vue += 1;
  } else if (constraints.teamSize >= 5) {
    scores.react += 3; scores.vue += 2; scores.angular += 1;
  } else {
    scores.vue += 3; scores.react += 2; scores.angular += 0;
  }

  // Time-to-first-ship: Vue and React win on initial velocity
  if (constraints.timeToFirstShip === 'weeks') {
    scores.vue += 3; scores.react += 2; scores.angular += 0;
  } else if (constraints.timeToFirstShip === 'months') {
    scores.react += 3; scores.vue += 2; scores.angular += 2;
  } else {
    scores.react += 2; scores.angular += 3; scores.vue += 2;
  }

  // TypeScript enforcement: Angular is TypeScript-first by design
  if (constraints.tsEnforcement === 'required') {
    scores.angular += 3; scores.react += 2; scores.vue += 1;
  }

  // Hiring pipeline depth heavily favours React
  if (constraints.hiringPriority === 'high') {
    scores.react += 3; scores.angular += 1; scores.vue += 1;
  }

  // Bundle size matters for low-bandwidth mobile audiences
  if (constraints.mobileFirstAudience) {
    scores.vue += 3; scores.react += 1; scores.angular += 0;
  }

  // Regulated industries: Angular's explicit DI and module structure aids auditing
  if (constraints.regulatedIndustry) {
    scores.angular += 3; scores.react += 1; scores.vue += 1;
  }

  return scores;
}

const scores = scoreFrameworks(PROJECT_CONSTRAINTS);

// Sort by score descending — the top result is your recommended choice
const recommendation = Object.entries(scores)
  .sort(([, a], [, b]) => b - a)
  .map(([framework, score]) => `${framework}: ${score}`);

console.log('Framework scores for your constraints:');
console.log(recommendation.join('\n'));
console.log(`\nRecommendation: ${recommendation[0].split(':')[0].toUpperCase()}`);
console.log('Document this decision in your ADR — include the constraints that drove it.');