More in Frontend Dev — page 10
Contrast SvelteKit file-system routing with Vue/Angular router configs
WHAT IT TESTS: Convention-over-configuration tradeoffs. ANSWER OUTLINE: Contrast SvelteKit directory routes with Vue/Angular config routers; filesystem routing removes boilerplate but couples URLs to folders and limits dynamic registration.
What is the purpose of an Angular Resolve guard vs ngOnInit?
Tests routing lifecycle timing and UX state management. Strong answers: Resolve blocks activation until data returns; ngOnInit renders first then fetches, causing flicker.
What are nested routes and why are they useful?
WHAT IT TESTS: hierarchical UI-to-URL mapping. ANSWER OUTLINE: nested routes render children inside a parent's router-view, preserving shared layouts while URL segments swap nested content. RED FLAG: flat routes with duplicated parent wrappers in every child.
How do you configure a route for lazy loading?
Tests route-level code splitting and initial bundle control. Outline: dynamic imports in route config, on-demand chunk fetching, and measurable load-time wins versus eager loading. Red flag: treating lazy loading as just images or components, not route code.
Explain navigation guards and provide an auth use case
WHAT IT TESTS: Grasp of routing lifecycle interception. ANSWER OUTLINE: Guards are global, per-route, or in-component hooks; returning false cancels, a route object redirects; use auth on /dashboard. RED FLAG: Calling them listeners without mentioning returns.
How do you create a dynamic route and access the id parameter?
This tests Vue Router dynamic segment syntax and param access. Define the path with a colon like /products/:id, then read via useRoute().params.id or $route.params.id. A red flag is expecting a remount on param changes or parsing window.location manually.
Create a template link to a route without a full page reload
Tests SPA client-side routing knowledge. Strong answer: name RouterLink or routerLink, explain click interception and History API URL updates, and contrast with plain anchor tags.
How do you define a basic Vue or Angular route?
Tests SPA routing conventions. Angular: Routes array in app.routes.ts with path and component, provided in bootstrap. Vue: routes array in src/router/index.js passed to createRouter. Red flag: omitting the outlet or placing config in a component.
Build a reactive data-fetching utility with Svelte stores
Tests store composition for async data fetching with caching and auto re-fetch. Strong answer: readable for lifecycle, derived's set callback for race-safe fetches, writable for private inputs. Red flag: exposed internals or missing cleanup.
Differentiate client state from server state and their tools
This tests whether you recognize server state as async, remote, and cacheable versus local synchronous client state. A strong answer contrasts ownership and lifecycles, mapping Pinia to UI state and Vue Query to fetched data.
How would you cache data between a list and detail view?
WHAT IT TESTS: Splitting server and client state, sharing cache from list to detail. ANSWER OUTLINE: Use nested keys so detail reads from list cache with staleTime to skip refetches.
Implement optimistic UI for a like button with rollback on failure
Tests state management and error recovery in async UIs. A strong answer mutates state instantly, fires the API in parallel, keeps a rollback snapshot, and reverts with a toast on failure. Red flag: waiting for the network or skipping revert logic.
Fetch data on first render and manage loading and error states
Tests lifecycle awareness and separation of concerns. Strong answer: use mount hook (onMounted, ngOnInit, onMount), hold reactive data/loading/error states, and render conditional UI branches. Red flag: calling fetch directly in template or render function.
Share state between sibling components without a state library
Tests if you over-engineer simple sibling state. Good answers lift state to the common parent, passing data down via props and changes up via events; or use built-in primitives like Svelte stores or an Angular shared service.
What is prop drilling and when is it a problem?
WHAT IT TESTS: props through indifferent layers couple components. ANSWER OUTLINE: define it as passing data through components that ignore it; move to global state when unrelated branches need same data. RED FLAG: prescribing Pinia for every shared field.
How would you architect a multi-step Svelte wizard with Stores?
Tests state isolation and validation orchestration across wizard steps. A solid answer uses a centralized store with step slices, derived validity stores, and pre-navigation guards. Red flag: unrelated per-step stores or validation only on final submit.
How do you structure components and state for a dynamic Vue form?
This tests your design of normalized reactive state for dynamic Vue forms. A great answer uses a flat item array with stable keys, row components or scoped slots, and schema-driven validation. Red flags include mutating by index or using array indices as keys.
Implement an async Angular validator with HTTP and PENDING feedback
Tests Angular async validator lifecycle and HTTP race conditions. A strong candidate returns an Observable from AsyncValidatorFn, lets Angular set PENDING automatically, debounces input, and binds control.pending in the template.
How would you build a reusable Svelte validation action?
Tests Svelte action lifecycles versus inline logic. Strong answers describe a node function that attaches input or blur listeners, toggles classes or ARIA directly, returns update and destroy, and cite reusability.
How do you debounce input for API validation in Vue or Angular?
Tests reactive stream control and cancellation. A strong answer uses debounceTime at 300ms, switches with switchMap, and handles loading and error states. Red flag: using setTimeout without cleanup or ignoring race conditions.