The interviewer asks: "How would you architect a micro-frontend system for a multi-team organisation?" Which answer demonstrates the strongest architectural thinking?
Option B is strongest: it defines three approaches with explicit pros/cons for each, gives a "best for" context for each approach, explains the Module Federation version conflict problem specifically (the most common production challenge), and introduces Conway's Law with the vertical slice vs. horizontal layer distinction — a senior architectural insight. Micro-frontend vocabulary:Module Federation — Webpack 5 feature for sharing JavaScript modules across applications at runtime. Shell application — the host app that loads remote micro-frontends. Remote — a micro-frontend application exposed as a Module Federation module. Conway's Law — "organisations design systems that mirror their communication structures." Vertical slice — a team owns a complete feature from frontend to backend. Options C and D are accurate but lack the "best for" context and the Conway's Law application.
2 / 5
The interviewer asks: "How do you enforce consistency across design tokens in a multi-brand design system?" Which answer is most mature?
Option B is strongest: it names the three layers with precise definitions, shows concrete examples for each layer with real CSS custom property syntax, explains the mechanism by which multi-branding works (alias token substitution), gives a real tooling recommendation with attribution (Style Dictionary by Amazon), describes the CI enforcement approach, and adds the critical Figma-to-code synchronisation concern — a common failure point in real design systems. Design token vocabulary:Design token — a named value for a design decision (colour, spacing, typography). Primitive / global token — raw value with no semantic meaning. Alias / semantic token — a named token with intent, referencing a primitive. Style Dictionary — Amazon open-source tool for transforming design tokens into platform formats. Token drift — when Figma tokens and code tokens diverge, causing design/implementation inconsistencies. Options C and D are accurate but lack the CSS syntax examples and the Figma sync concern.
3 / 5
The interviewer asks: "Walk me through your approach to measuring and improving Core Web Vitals in a large SPA." Which answer is most practical?
Option B is strongest: it distinguishes lab vs. field data with the specific tools for each and explains why both matter (lab identifies, field proves), gives Google's numeric thresholds, explains the LCP CSS background image discovery problem (a subtle but impactful point), notes the INP/FID transition (2024), and provides the scheduler.yield() technique which is the modern recommended approach for long task splitting. Core Web Vitals vocabulary:LCP (Largest Contentful Paint) — time to render the largest visible element. INP (Interaction to Next Paint) — responsiveness metric replacing FID since March 2024. CLS (Cumulative Layout Shift) — visual stability of the page. CrUX — Chrome User Experience Report; real-user data. RUM — Real User Monitoring; collecting performance data from actual users. scheduler.yield() — modern API to break long tasks and yield to the browser. Options C and D are accurate but lack the lab/field data distinction and the CSS background image caveat.
4 / 5
The interviewer asks: "How do you make frontend architectural decisions that remain maintainable for 3+ years?" Which answer is strongest?
Option B is strongest: it names four specific practices with detailed rationale, explains the "volatile vs. stable" separation at the right layer (business logic vs. framework vs. platform), highlights the most valuable part of an ADR (rejected alternatives), names specific high-churn areas (CSS-in-JS, webpack configs) with standards-based alternatives, and ends with the honest architectural philosophy — "reduce cost of change, not avoid it" — which shows senior maturity. Frontend architecture vocabulary:ADR (Architecture Decision Record) — a short document capturing a significant technical decision and its context. Framework-agnostic — code that does not depend on a specific rendering framework. Migration surface — the interfaces that would be re-implemented during a framework migration. CSS-in-JS — a pattern for writing CSS in JavaScript (e.g., styled-components). Options C and D are accurate but lack the volatile/stable separation rationale and the "reduce cost of change" philosophy.
5 / 5
The interviewer asks: "What are the key trade-offs between CSR, SSR, SSG, and ISR rendering strategies?" Which answer is most comprehensive?
Option B is strongest: it organises each strategy across three explicit dimensions (TTFB, SEO, dynamic content), gives specific use cases for each ("use when"), explains the ISR stale-while-revalidate behaviour (a subtle but important point), mentions React 18 streaming SSR, and ends with the key modern insight — hybrid per-route strategies. The answer shows that the right choice is context-dependent, not universal. Rendering vocabulary:TTFB (Time to First Byte) — time before the first byte of the response arrives. LCP (Largest Contentful Paint) — time to render the main content. SSG (Static Site Generation) — HTML generated at build time. ISR (Incremental Static Regeneration) — Next.js feature for revalidating static pages. Stale-while-revalidate — serving cached (possibly stale) content while fetching a fresh version. Streaming SSR — sending HTML in chunks as it is rendered, reducing perceived TTFB. Options C and D are accurate but lack the per-strategy use-case guidance and the ISR stale-while-revalidate explanation.