Preparing for a Framework Switch with Web Components

As Vue2 reached EOL, 8Percent had to prepare for a gradual migration to React. At the same time, they were trying to introduce a design system, and expected the problem of having to implement the same UI component separately for each framework and maintain it twice.

Initially, there were three options.

• Build the UI components in Vue2 first, and re-implement them in React later.
• Migrate Vue2 to React first, then build UI components for React.
• Implement Vue2 and React UI components simultaneously.

Every option was costly, and especially in a gradual migration where the two frameworks coexist, the UI easily fragments. Even for the same button, if implementation and modification are done separately, UI consistency, maintenance, and communication costs between designers and developers all suffer.

The solution was to build UI components that are not tied to a framework. Using Web Components, a browser standard technology, the same component can be reused in both Vue and React, and Shadow DOM allows styles to be encapsulated as well.

Lit was used for the implementation. Lit is a library that lets you write web components more productively, supporting reactivity, TypeScript, SSR, and decorator-based declarative code.

As a result, 8Percent built the design system eds-wc as web components, and was able to use the same components as-is even while moving from Vue2 to React. The effects are as follows.

• No need to re-implement UI for React.
• eds-wc can be maintained as the SOT (Single Source of Truth).
• UI fragmentation and communication costs during migration can be reduced.

Even in actual screens being converted to Next.js, multiple eds-wc components could be used together as-is, and frontend developers could focus on business logic instead of rewriting UI for each framework.