More in Frontend Dev — page 9
What is Angular's TestBed and when would you use it?
WHAT IT TESTS: Your knowledge of TestBed as the component factory and change-detection controller. ANSWER OUTLINE: Say createComponent returns a fixture with no immediate binding, so await fixture.whenStable before asserting DOM.
What is the fundamental difference between unit and component tests?
WHAT IT TESTS: Isolation levels in frontend testing. Unit tests verify single functions or composables with mocked dependencies; component tests verify mounting, rendering, and interaction and pull in more code. RED FLAG: Claiming it is only the tool.
How do you architect Svelte stores to minimize WebSocket re-renders?
Tests Svelte store granularity and subscription semantics. A great answer splits the monolith into domain stores, uses derived selectors to isolate slices, and leverages readable stores to encapsulate the WebSocket source.
Implement virtual scrolling for a large list in Vue
Tests DOM cost awareness and viewport culling. Strong answer: mount only visible nodes plus overscan, recycle DOM on scroll, and preserve total scroll height with a spacer. Red flag: suggesting pagination or naive v-for without keys.
How does Svelte surgically update the DOM without VDOM?
Tests VDOM overhead vs compile-time optimization. A strong answer explains that Svelte compiles reactive dependencies into direct DOM API calls, skipping tree creation and diffing. Red flag: claiming VDOM is slow because the DOM itself is slow.
Why does an OnPush Angular child not update when its input changes?
Tests OnPush reference equality and manual change detection. Strong answers name: in-place object mutation as the root cause; ChangeDetectorRef.markForCheck or detectChanges to force updates; and Angular Signals as a modern path.
How would you use dynamic import() to lazy-load a component-specific library?
Tests lazy loading and bundle splitting. Good answers call import() inside the component lifecycle, await the module namespace, let the bundler split the chunk, and handle loading and error states. Bad answers put import() at top level, defeating lazy loading.
How do you lazy-load a route in Vue or Angular?
Tests route-level code splitting. Strong answers mention dynamic imports in Vue Router or Angular loadChildren and highlight a smaller initial JS bundle. Red flag: confusing this with image lazy loading or claiming it speeds up runtime navigation.
Vue computed vs method: performance difference and when to choose each?
This tests Vue reactivity caching. Answer: computed caches and reruns only when reactive deps change, while methods run each render. Choose computed for derived data; methods for events/args. Red flag: saying computed is always faster or passing arguments.
Explain Svelte Action update and provide a reactive CSS example
Tests Svelte actions beyond initial mount. Strong answers explain update re-runs when parameters change, give a CSS custom properties example, and contrast with destroy. Red flag: suggesting the action re-runs from scratch or using reactive statements.
When would you provide an Angular service at the component level?
Tests Angular DI scoping beyond singletons. A strong answer picks stateful reusable widgets, explains providers create one instance per subtree, and notes cleanup on destroy. Red flag: claiming this is for performance without mentioning state isolation.
How would you design useCounter to support shared or independent state?
Tests your grasp of scope in Vue composables. Great answers contrast module-level refs for global singleton state against function-level refs for per-instance isolation, and explain tradeoffs.
Architect reusable form validation in Vue vs Angular
Tests how you encapsulate reactive state across frameworks. Contrast Vue's useForm composable returning refs and lifecycle hooks. Contrast Angular's service exposing a FormGroup via RxJS.
How would you create a parameterized Svelte tooltip Action?
It tests your grasp of the Svelte Action lifecycle for reactive parameters. Answer: action takes node and parameter, returns update and destroy, bound as use:tooltip={text}. Using component events instead of the Action API, or omitting update, is a red flag.
Vue 3 Composables vs Vue 2 Mixins: differences and problems solved
Tests why Vue replaced mixins with composables for stateful logic reuse. Answers cite property collisions, unclear origin, inflexible config, and weak type inference.
Would you use a Service or a custom Pipe for currency formatting?
WHAT IT TESTS: Using Pipes for template formatting versus Services. ANSWER OUTLINE: Choose Pipe for declarative syntax; implement PipeTransform with transform(value, ...args); use Intl.NumberFormat; register standalone.
What is a Svelte Action? Write a simple logging action.
WHAT IT TESTS: Whether you understand a Svelte action as a lifecycle function attached to a DOM node via use: and can write its minimal signature. ANSWER OUTLINE: Define a function receiving the node, log a message, and optionally return destroy.
How to create a singleton Angular auth service
Tests Angular dependency injection and singleton scope. Strong answer: use the Injectable decorator with providedIn set to root for an application-wide singleton, then inject it into components.
How do you implement a data-fetching Composable in Vue 3?
WHAT IT TESTS: grasp of stateful logic reuse via Vue's Composition API. ANSWER OUTLINE: write useFetch accepting a URL, exposing data, loading, and error refs, then return them. RED FLAG: returning plain vars or using shared singletons instead of factories.
How do you manage router scroll behavior and history position restoration?
WHAT IT TESTS: Your grasp of popstate and centralized router scroll orchestration. ANSWER OUTLINE: Use scrollBehavior to return savedPosition on popstate and top: 0 on new navigations; handle hash anchors and async delays.