More in Frontend Dev — page 8
How would you structure a scalable store for interconnected domains?
Tests domain-driven state partitioning and cross-slice derived data. Strong answers use feature slices, normalized entities, and memoized selectors; keep computed state out of the store. Red flag: a monolithic state tree with component-level recomputation.
Create a custom synchronous validator for an Angular Reactive Form
Tests your grasp of the ValidatorFn contract and reactive form wiring. A strong answer: a function accepting AbstractControl returns null when valid or an error object when invalid, passed as the second FormControl argument. Red flag: returning booleans.
How do Vue, Angular, and Svelte handle deep prop mutation re-rendering?
WHAT IT TESTS: Deep reactivity vs zone-driven dirty checking. ANSWER OUTLINE: Vue and Svelte detect nested mutations via Proxies; Angular default re-renders via Zone.js, but ngOnChanges misses it since the reference is unchanged.
How does Angular's Zone.js change detection differ from Vue and Svelte reactivity?
Tests granular reactivity architecture. Angular Zone.js monkey-patches async to scan the full component tree; Vue uses runtime Proxy tracking; Svelte compiles runes into targeted DOM bindings.
Compare SSR, SSG, and ISR trade-offs in meta-frameworks
What it tests: matching rendering modes to build time, freshness, and scale. Outline: contrast SSR per-request cost with SSG fast CDN delivery but stale content and long builds, then show ISR as lazy regeneration post-deploy.
Explain server.ts and main.ts in Angular Universal
WHAT IT TESTS: Angular SSR entry points and hydration. ANSWER OUTLINE: server.ts SSRs initial HTML via Node/Express; main.ts bootstraps the browser app and hydrates the DOM. First request hits the server; later navigations are client-side only.
How do you create a POST API endpoint in SvelteKit?
WHAT IT TESTS: Filesystem routing and server-only API routes in SvelteKit. ANSWER OUTLINE: Add a +server.js file in a src/routes subdirectory, export a POST handler returning a Response, and note that +server files never run in the browser.
What is the purpose of +page.server.js in SvelteKit?
WHAT IT TESTS: Server-only load boundaries in SvelteKit. ANSWER OUTLINE: Exclusively server-side load feeding the data prop, used for secrets like DB queries and private env vars. RED FLAG: Claiming it runs in the browser or equating it with +page.js.
What is SSR and what are its advantages over a client-side SPA?
This tests server-client rendering trade-offs. A strong answer defines SSR as server HTML generation plus client hydration, citing faster time-to-content, better SEO for async data, and unified component logic.
Explain patch flags and static hoisting in Vue 3's compiler
Tests your grasp of compiler-informed virtual DOM optimizations. A strong answer covers patch flags as bitmap hints for dynamic bindings and static hoisting as extracting static nodes to skip diffing. Red flag: claiming Vue 3 removes the virtual DOM.
How does Svelte compile count += 1 into DOM updates?
Tests if you know Svelte reactivity is compile-time via runes, not runtime proxies. Good answer: $state marks reactive vars; runes are compiler hooks; compiler emits DOM-sync code. Red flag: describing useState or VDOM.
Compare Angular Zone.js and Vue 3 Proxy reactivity
This tests update granularity. Contrast Vue 3 Proxy tracking, targeting only affected components, with Angular Zone.js patching async APIs to trigger top-down dirty checking across tree. Vue binds deps at render; Angular compares values each cycle.
How is a Vue template compiled into a render function?
WHAT IT TESTS: Knowing Vue templates compile to h() render functions and directives become JS control flow. ANSWER OUTLINE: Map v-if to ternaries, v-for to array map, and events to onXxx props. RED FLAG: Believing directives survive as runtime HTML attributes.
Why is Svelte called a 'disappearing framework'?
Tests whether you understand compile-time versus runtime-heavy frameworks. A strong answer says Svelte compiles components to vanilla JS at build time, shipping a tiny runtime instead of a reconciler or virtual DOM. Red flag: claiming there is zero runtime.
What is the Virtual DOM's role during a Vue state update?
Tests your grasp of Vue's reactive render pipeline. A strong answer: state change triggers a new virtual DOM tree; runtime diffs it against the old tree to apply only necessary real DOM updates. Red flag: saying virtual DOM updates browser DOM directly.
How would you diagnose and optimize slow Angular component tests?
Tests Angular test economics and runner overhead. Strong answers profile with Vitest, swap Karma for jsdom/happy-dom, mock services, and reduce TestBed recompilation via targeted imports.
Describe the role of a spy in testing with a framework example
This tests whether you know a spy records calls without replacing original implementation. A strong answer defines the tracking role, picks a concrete Vue or Angular handler, and asserts with toHaveBeenCalled.
How do you test a Svelte component updates a writable store?
WHAT IT TESTS: Integration of Svelte writable stores with Testing Library. ANSWER OUTLINE: Import the store with the component, render, await fireEvent.click, then assert the store value. RED FLAG: Using component internals or treating fireEvent as sync.
How do you mock an async service call in an Angular component test?
This tests Angular unit isolation and HTTP mocking. A strong answer covers HttpTestingController setup, flushing a mock response, asserting UI changes, and notes mocking avoids flaky networks. Red flag: using real HTTP calls in unit tests.
How do you test emitted events using Vue Test Utils?
Tests Vue Test Utils event inspection. Strong answer: mount, trigger('click'), then check wrapper.emitted('increment') for the payload array. Remember it returns an array of arrays, one per emission.