Svelte's `bind:`: Two-Way Data Binding Made Simple
Svelte's `bind:` turns one-way data flow into a two-way street, letting child elements update parent state. It's essential for syncing form inputs without manual event handlers. The footgun: an invalid number input yields `undefined`, not 0.
Container vs. Presentational: A Component Separation Pattern
Split components into 'smart' containers that handle data and logic, and 'dumb' presentational components that just render UI. This lets you reuse state across different views, like showing a product list in a grid or a table.
Angular Schematics: Automating Code Modification Safely
Think of a schematic as a safe, scriptable code generator. It operates on a virtual copy of your project, applying changes only after verifying the entire operation. Use them to enforce conventions or package library code.
Module Federation: The Multi-Framework "Hydra"
Module Federation can unite micro frontends from different frameworks (e.g., Angular, React) in one app. This is a last resort for migrations or integrating legacy code, not a standard pattern, as it increases complexity and bundle size.
Angular's angular.json: Your Workspace Blueprint
angular.json is the blueprint for your workspace, telling the CLI how to build, serve, and generate code. It defines project paths, build targets, and default prefixes. The footgun: assuming the `projects` section mirrors the file system.
ng generate: Your Project's Code Wizard
ng generate is a command-line wizard for scaffolding new Angular features. It doesn't just create files; it wires them into your app. Use `ng g component my-component` to create components, services, and more.
Angular's Default Change Detection with Zone.js
Zone.js tells Angular to re-check your entire app whenever any async event finishes. This is Angular's default magic: a variable updates after an HTTP call, and the UI just works. The footgun? This "check everything" approach is expensive in large apps.
Angular NgModules: Organizing Legacy Code
Think of an NgModule as a shipping container for related features, bundling components, directives, and pipes. You'll find them organizing code in older Angular apps.
SvelteKit Server-Only Modules: Keep Your Secrets Secret
SvelteKit's server-only modules are a firewall for your code, preventing sensitive data like API keys from ever being bundled for the browser. Use them for database clients or secret logic.
SvelteKit Prerendering: Build-Time HTML for Faster Sites
SvelteKit prerendering creates static HTML files at build time for instant loads. It's ideal for content that doesn't change per user, like marketing pages or blog posts. The main footgun: unlinked pages won't be found unless you explicitly list them.
Universal Rendering: Server-First, Client-Interactive
Universal Rendering sends a pre-built HTML page from the server for a fast load, then adds interactivity on the client. It's the default in frameworks like Nuxt for better SEO, but the footgun is writing code that crashes on the server by assuming a browser.
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.
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.
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.
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.
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.
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.
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.
List Virtualization: Rendering the Viewport, Not the Dataset
List virtualization renders only the visible slice of a huge dataset, keeping your app fast by maintaining a tiny DOM. Use it for long lists or infinite scroll feeds.
Headless Components: Separate Logic from UI
A Headless Component separates a component's logic from its UI, providing the 'brain' without the 'looks'. Use it for complex elements like dropdowns that need consistent behavior but different visual styles. The footgun is assuming it's a drop-in UI.