Advanced concepts in Vue, Angular & Svelte
Vue's Reactivity: JavaScript That Acts Like a Spreadsheet
Vue's reactivity system makes your data act like a spreadsheet: change a value, and dependent parts of your app update automatically. It works by wrapping your data in special objects. The footgun: reactivity is lost if you replace a whole object.
Vite's Low-Level SSR API
Vite's SSR API lets you run Vite as a middleware inside your own Node.js server, giving you full control over rendering. It's for building custom SSR solutions, often with Express. The footgun: most apps should use a higher-level SSR plugin, not this API.
SvelteKit Hooks: Intercepting Requests and Events
SvelteKit Hooks are like middleware, letting you intercept requests and events to run app-wide logic. Use them for tasks like authentication checks, initializing DB clients, or custom routing.
Vite's Dependency Pre-Bundling
Vite's dev server pre-bundles dependencies to accelerate local development. It converts CommonJS modules to browser-native ESM and merges packages with many files into one, preventing massive HTTP request chains.
Svelte Slot Props: Child Informs, Parent Renders
Svelte slot props let a child component pass data up to its parent's slot. This is key for reusable list components where the child provides data for each item, but the parent controls the rendering. The footgun: the let: directive goes on the component tag.
Angular View Encapsulation: Walling Off Your Component Styles
View Encapsulation walls off a component's CSS to prevent styles from leaking in or out. By default, Angular emulates a Shadow DOM to scope styles, but you can change this. The footgun is using None to fix a style, creating global CSS conflicts.
Angular: Dynamic Component Loading
Programmatically create and render components anywhere in your app, not just where you've hardcoded them. Use it for dynamic dashboards or modal dialogs. The footgun is forgetting to manually destroy components, which leads to memory leaks.
Vue Dynamic Components: Swap Components on the Fly
Use Vue's <component :is="..."> element to render different components based on a state variable, like swapping views in a tabbed interface. The footgun: components are destroyed on switch; use <KeepAlive> to preserve their state and avoid losing user…
Svelte's `{@html}` and `{@debug}`: When to Use Them
Svelte's {@html} and {@debug} offer powerful but risky escapes. {@html} renders raw HTML strings, while {@debug} acts like a debugger statement in your markup. Use them for trusted content and dev-time inspection.
Vue Watchers: Running Code on State Changes
Vue watchers are tripwires for your data. When a specific piece of state changes, a watcher executes code, like fetching data from an API. Use them for side effects, not for deriving new values. The footgun is using a watcher where a computed property would.
Pinia: Vue State Management That Feels Like Components
Pinia makes global Vue state feel like a component's local data. Create small, independent, type-safe stores for sharing data like user sessions or settings, avoiding complex prop drilling.
Svelte Derived Stores: Reactive Values from Other Stores
A Svelte derived store is like a spreadsheet formula for your state. It listens to other stores and automatically computes a new value whenever they change. The footgun is trying to write to it—it's read-only; you must update its sources instead.
Shadow DOM: Encapsulating Styles and Structure
Shadow DOM walls off a component's HTML and CSS from the rest of the page. Like a browser's <video> player, its internal controls are isolated, preventing your site's CSS from breaking them.
Angular Custom Validators: Beyond Built-in Rules
Custom validators let you define your own business logic for form inputs. Use them to check for unique usernames via an API or enforce complex password rules. The main footgun is forgetting async validators must return an Observable or Promise.
Zod: TypeScript-First Schema Validation
Zod creates a single source of truth for your data's shape, providing both runtime validation and static TypeScript type inference from one definition. Use it to parse API inputs or form data, ensuring data is correct and typed.
Optimistic UI: Assume Success for a Faster Feel
An optimistic UI assumes an action will succeed, updating the interface instantly instead of waiting for the server. This makes actions like liking a post or adding to a cart feel instant. The footgun is failing to revert the UI when the server reports an.
XState: Predictable UI State with State Machines
XState treats UI logic as a formal state machine, making impossible states impossible. It's ideal for complex components like multi-step forms or data fetching UIs. The footgun is overusing it for simple boolean toggles, which adds needless boilerplate.
SSR Hydration: Don't Re-render, Reuse
Hydration tells your client-side app to reuse the HTML sent by the server instead of wastefully re-rendering it. This prevents UI flicker in Server-Side Rendered apps and improves load performance.
Vue Route Animations: Animating Page Changes
Animate between pages by wrapping your router view in a <transition> component, giving your SPA the feel of a native app. This is used for sliding or fading effects during navigation.
Router History vs. Hash Mode: URL Style and Server Setup
Router history mode determines your SPA's URL style. History mode uses clean URLs (/users) but needs server setup, while hash mode uses a hash symbol (/#/users) and works out-of-the-box.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles