Contribution model for a multi-framework system
Multi-framework architecture and process.
Web Components core with thin React and Vue wrappers, shared tokens and spec, contribution rules requiring core-plus-wrapper changes, conformance tests.
WHAT THIS TESTS Whether you can reduce per-framework duplication to a minimum and design a contribution and support model that keeps the frameworks in lockstep on behavior.
A GOOD ANSWER COVERS Architect a framework-agnostic core, typically as Web Components or a headless logic layer, that holds behavior, state, and accessibility once. Provide thin React and Vue wrappers that translate idiomatic props, events, and refs to the core, handling each framework's quirks like React's synthetic events or attribute versus property binding. Share design tokens and a written behavior and accessibility spec across all targets. The contribution model requires a change to land in the core and its wrappers together, with a definition of done that includes the spec and tests. Run a shared conformance and a11y test suite against every wrapper in CI. For support, define ownership: a core team for the shared layer and wrapper maintainers, plus a parity matrix and SSR and hydration guidance since Web Components carry SSR caveats.
COMMON WRONG ANSWERS Three fully independent implementations with copy-pasted logic, guaranteeing drift and triple maintenance. Ignoring Web Components SSR and form-integration caveats. No shared spec or conformance tests, so wrappers diverge. Letting wrappers add behavior the core lacks. No clear ownership for cross-cutting fixes.
LIKELY FOLLOW-UPS What are the SSR and hydration trade-offs of Web Components? How do React and Vue wrappers differ in event and attribute handling? How do you write conformance tests that run across wrappers? Who owns a bug that spans core and wrappers?
ONE CONCRETE EXAMPLE A Tooltip's positioning, focus management, and aria live in a Web Component. React and Vue wrappers expose idiomatic props and forward events. A contributor fixing a focus bug edits the core once; CI runs the shared a11y conformance suite against the React and Vue wrappers, and both ship together, so behavior stays identical across frameworks.
Interview question
What architecture most reduces duplication while keeping React, Vue, and Web Component versions consistent?
- a.A framework-agnostic core holding logic and a11y, with thin per-framework wrappersCorrect
- b.Three fully independent implementations sharing only a color palette
- c.Copying the React code into Vue and Svelte and editing by hand
- d.A single React implementation that other frameworks import directly
Why? this is the answer
A shared core with thin wrappers puts behavior and accessibility in one place, so frameworks cannot drift. Independent or copy-pasted implementations duplicate logic and guarantee divergence over time.
Just read this? Test yourself on what you have been reading.
- #multi-framework
- #web-components
- #wrappers
- #contribution-model
- #accessibility
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
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