Vue, Angular &amp; Svelte

Angular's ChangeDetectorRef: Manually Triggering Updates

Angular's ChangeDetectorRef is your manual override for change detection. Use it when updates from outside Angular's zone (like third-party libraries) don't refresh the UI. The footgun is overuse, which can mask performance issues or cause lifecycle errors.

Svelte's Legacy immutable={true} Optimization

The immutable={true} option was a contract with the Svelte 3/4 compiler: you promise to never mutate data, and it uses fast referential checks for updates. It was a performance boost for immutable patterns.

Partial Hydration: Interactive Islands in a Static Sea

Partial hydration makes sites faster by treating interactive UI as "islands" in a sea of static HTML, loading JavaScript only where needed. It's ideal for content-heavy pages. The biggest challenge is managing state between these isolated interactive islands.

Angular Unit Testing: Jasmine & Karma

Jasmine is your testing script (expect(a).toBe(b)), while Karma is the stage that runs it in a browser. This is Angular's default stack for unit testing components and services to ensure they work in isolation.

Unit Testing Vue Components with Vitest

Think of it as a two-part system: Vue Test Utils mounts your component in a virtual environment, and a runner like Vitest executes the test and reports pass/fail. Use this to verify a component's logic in isolation.

Cypress Component Testing: Test in a Real Browser

Cypress component testing mounts your UI components in a real browser, not a simulated DOM, so you test them exactly as users see them. Use it for faster feedback on individual React, Vue, or Angular components.

The Testing Trophy: Prioritize Integration Tests

The Testing Trophy flips the classic pyramid, arguing for "mostly integration tests" to maximize your return on investment. It's for UI apps where testing component interactions gives more confidence than isolated unit tests.

Svelte Testing Library: Test Components Like a User

Test Svelte components like a user would use them. Svelte Testing Library interacts with the rendered DOM, not internal state, to verify behavior. This avoids brittle tests tied to implementation.

Vitest Mocking: Isolating Code with `vi.mock`

Vitest's vi.mock replaces a module with a fake version, isolating your code for tests. This is key for preventing real network or database calls. The footgun: calls are "hoisted" to the top of the file, running before other code and breaking variable access.

Angular's TestBed: A Sandbox for Component Testing

Angular's TestBed creates a mini-app just for your test, letting you check how a component renders and behaves with mock dependencies. It's for testing component-template interactions in isolation.

Playwright: E2E Tests That Aren't Flaky

Playwright makes E2E tests reliable by automatically waiting for UI elements to be ready. Use it to test critical user journeys across Chrome, Firefox, and WebKit. The footgun is using brittle CSS selectors instead of user-facing locators like getByRole.

Vue's Virtual DOM: Efficient UI Updates

Vue keeps a JavaScript copy of the UI (the Virtual DOM) in memory. When data changes, it compares a new virtual tree to the old one and efficiently updates only the changed parts of the real DOM, avoiding costly full re-renders.

Vue Single-File Components (SFCs)

Vue's Single-File Components (SFCs) bundle a component's template, logic, and styles into one .vue file. A build tool compiles this into browser-readable JS and CSS, turning your template into optimized render functions.

Angular Ivy: The Tree-Shakable Compiler

Angular's Ivy engine compiles components like separate puzzle pieces, making apps smaller and faster. This enables effective tree-shaking for smaller bundles and faster rebuilds.

Configuring the Angular Compiler (ngc)

The Angular Compiler (ngc) transforms your templates into optimized JavaScript ahead-of-time. You tune it in tsconfig.json to create smaller production builds or publish reusable libraries.

Vue's <script setup>: Less Boilerplate, More Performance

Vue's <script setup> is compile-time sugar that automatically exposes variables and functions to your template, cutting boilerplate. It yields more succinct, performant components with better type-safety.

Framework Reactivity: Coarse vs. Fine-Grained Updates

Frameworks sync UI and state differently. Coarse-grained systems like React re-run component code, while fine-grained systems like Vue (Proxies) or Angular (Signals) track dependencies to update only what's needed.

Angular Incremental Compilation: Faster Rebuilds

Angular's incremental compilation avoids full rebuilds by tracking changes, making performance proportional to what you changed, not the whole app. It speeds up development by reusing analysis and skipping file generation for unchanged code.

Server-Side Rendering: Your App's First Paint Matters

Server-Side Rendering (SSR) sends a fully-formed HTML page from the server, not a blank one. This speeds up the first paint and helps SEO. The footgun is assuming it's always faster; it increases server load and can delay interactivity.