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.
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.