Advanced concepts in Vue, Angular & Svelte, page 2
Vue Router: Controlling Scroll Behavior
In a SPA, the browser doesn't manage scroll position; scrollBehavior is your manual override. Use it to scroll to top on new pages or restore position on back/forward. The footgun is forgetting savedPosition, breaking native back-button behavior.
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.
Vue Render Functions: Trading Templates for JS Power
Render functions trade Vue's declarative templates for the full programmatic power of JavaScript. Use them for highly dynamic components where logic is too complex for templates. The footgun is losing template optimizations and readability for imperative code.
Vue Plugins: Add App-Wide Functionality
A Vue plugin packages reusable logic to add features across your entire app, like a global toolbox. Use them for routing, state management, or making custom functions globally available.
Svelte Preprocessors: Write in Any Language
A Svelte preprocessor is a translator, converting code like TypeScript or SCSS into plain JS and CSS before compilation. This lets you use advanced tooling in .svelte files. The footgun is forgetting to configure it, leading to syntax errors.
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.
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.
Angular TransferState: Avoid Double Data Fetching in SSR
TransferState is a key-value cache that bridges your Angular SSR server and the browser, preventing the client from re-fetching data the server already got. Use it to pass resolved API data from the server render to the client, avoiding wasted network calls.
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.
ISR: Static Speed for Dynamic Content
Incremental Static Regeneration (ISR) gives users a fast, static page while regenerating it in the background. It's ideal for e-commerce catalogs or blogs that update periodically.
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