Advanced everything in Vue, Angular & Svelte, page 3
Implement a scoped slot pattern in a reusable DataList
It tests delegating rendering while keeping data ownership in the child. A strong answer covers a DataList that fetches internally and exposes rows via slot props, plus Angular TemplateRef via let-item. Red flag: parent loops or slots inheriting child scope.
How do you configure Vite Library Mode for ESM and UMD outputs?
Tests Vite Library Mode multi-format packaging. Strong answer: build.lib entry, formats es and umd, fileName function, and rollupOptions.output.globals for Vue. Red flag: multiple configs or omitting UMD global name.
How would you implement lazy loading for an Angular feature module?
This tests route-level code splitting and CLI workflows. A great answer hits: ng generate module, loadChildren in the route config, and excluding the feature from AppModule. A red flag is suggesting manual chunking instead of router-driven lazy loading.
Svelte compiler downsides vs Vue and Angular runtime
Tests compile-time versus runtime trade-offs in large apps. Strong answers address dynamic component limits, plugin friction, build scalability, and migration cost. Red flag: claiming Svelte has no runtime or that dynamic components are impossible.
How would Angular vs Vue philosophies influence your large-scale architecture choice?
Tests mapping philosophy to team scale. Contrast Angular's opinionated batteries-included tooling and two-way binding with Vue's progressive incremental adoption and Composition API; pick Angular for standards or Vue for flexibility.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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 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.
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.
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.
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