Implementing OpenTiny component library cross-framework technology from 0 to 1

[Yuan Chuang Conference Preview] 1024 Programmers’ Day (two days before), meet at the Open Source China office, let’s talk about AI! >>>

This article is shared from Huawei Cloud Community " Implementing OpenTiny Component Library Cross-Framework Technology from 0 to 1 ", author: Selected by Huawei Cloud Community.

In the 44th issue of Huawei Cloud's "DTSE Tech Talk" technical live broadcast "Play with OpenTiny cross-frame component library from scratch to achieve one-stop front-end advancement", Huawei Cloud front-end development DTSE technology evangelist Mr. Mo Chunhui was in this live broadcast We exchanged the core advantages and design concepts of the OpenTiny component library solution with developers, and demonstrated how OpenTiny implements cross-framework component library technology from 0 to 1 through specific practical operations.

Take you from 0 to 1 to develop a cross-framework UI component

Implementing component library cross-frame technology is a very important method to improve Web page development efficiency and application flexibility. With the rapid development of front-end technology, the types of component libraries and frameworks are becoming increasingly diverse. Therefore, implementing cross-framework technology for component libraries is of great significance to solving development pain points and reducing development costs.

The goal of this practical operation is to build a button demonstration demo across Vue, React, and Solid frameworks to show how to implement the application of cross-framework technology in component libraries. Through this exercise, we hope to provide developers with a clear and specific implementation process to help everyone better understand the practical application of this technology.

For specific source code, please refer to: https://github.com/opentiny/dtt-cfc

This practical process is mainly divided into four parts:

1. Initialization project

a) Use pnpm to manage the project and configure pnpm-workspace.yaml

b) Configure the project eslint, prettier and git environment

2. Create a Vue application and add @opentiny/vue-button component related logic:

a) Initialize Vue application

b) Develop the adaptation layer of the Vue component and the vue-button component

c) Develop js files adapted to renderless

3. Create a React application and add @opentiny/react-button component related logic:

a) Initialize React application

b) Develop the adaptation layer of React components and the react-button component

c) Develop js files adapted to renderless

4. Create a Solid application and add @opentiny/solid-button component related logic:

a) Initialize Solid application

b) Develop the adaptation layer and solid-button components of Solid components

c) Develop js files adapted to renderless

TinyVue component library currently implements cross-end, cross-framework, and cross-version

Thanks to the Renderless design architecture, TinyVue of the OpenTiny project, as a Vue component library, not only implements a cross-framework component library, but also implements a set of code that not only supports Vue 2 / Vue 3, but also supports PC and mobile. end, more adaptable to multi-topic specifications. In practical applications, developers can develop cross-terminal (PC, mobile, watch), cross-framework (Vue2, Vue3, React, Solid), cross-theme (fonts, colors, rounded corners, icons... ), projects across design specifications (icons, interactions, default configurations...).

The picture below is the demonstration effect after the OpenTiny cross-end, cross-framework, cross-version, and cross-design specification example is started (for specific source code, please refer to: https://github.com/opentiny/cross-framework-component ):

So why does OpenTiny want to implement cross-end, cross-framework, and cross-version component libraries?

At present, component libraries in the industry are generally classified according to the different front-end frameworks React, Angular, and Vue. Or according to the target terminal, such as PC component library, Mobile component library, applet component library, etc. Since the Vue 2 and Vue 3 versions are incompatible, the component library code of Vue 2 is different from the component library code of Vue 3. That is, the same technology stack also has different versions of the component library. The current status quo is undoubtedly a burden for both developing component libraries and using component libraries.

Moreover, the two sets of Vue 2 / Vue 3 component libraries correspond to two different sets of codes. It is inevitable that the component functions and APIs are out of sync. If developers want to migrate from the Vue 2 component library to the Vue 3 component library, they will face certain costs and risk.

The current component library categories are as follows:

In the face of quite a pain point in the industry, TinyVue adopts the design concept of separating components and frameworks (Renderless architecture). By allowing Web components to support cross-end, cross-technology stack, and cross-UX specifications, developers only need to develop and maintain a set of component library codes. , you can launch versions of different technology stacks for different terminals, reducing development and maintenance costs. At the same time, when users use this set of component libraries, although they are using versions of different terminals and different technology stacks, because the bottom layer is based on a set of codes, their API interfaces are basically the same, thus reducing the cost of user learning, use, migration and upgrades.

Of course, this design architecture needs to combine the business logic-oriented development paradigm and the design pattern without rendering components. Because simply using a business logic-oriented development paradigm can only bring together the parts of the same business logic that were originally scattered in various stages of the life cycle. There are many ways to implement the design pattern of non-rendering components. For example, HOC high-order functions can be used in React, and scopedSlot scope slots can be used in Vue. However, when the business logic of components becomes increasingly complex, high-order functions and scope insertion Slots make code difficult to understand and maintain. Therefore, only by combining the two, is it possible to realize web components that support cross-terminal and cross-framework.

TinyVue ultimately achieves the effect of being used in different frameworks and different terminals by completing issues such as device adaptation, resolution adaptation, and interaction adaptation. Not only that, for Vue 2 and Vue 3, TinyVue also launched corresponding version adapters to smooth out the differences between Vue 2 and Vue 3, and realize a set of code that supports both Vue 2 and Vue 3 versions. In this way, whether it is a Vue 2 project or a Vue 3 project, the way to use components is the same, seamless switching can be achieved, which greatly reduces the cost and risk of migrating from Vue 2 to Vue 3.

Summarize:

OpenTiny is an enterprise-level Web front-end development solution that provides a cross-end and cross-frame UI component library, adapts to multiple terminals such as PC/mobile terminals, supports Vue2/Vue3/Angular multi-technology stacks, and has a flexible and scalable low-code engine. , including theme configuration system/middle and backend templates/CLI command line and other rich efficiency improvement tools, which can help developers develop web applications efficiently.

Of course, OpenTiny, as an important part of Huawei's cloud solutions, enables developers to build cloud-native applications. It will also help developers improve application performance and reliability, and promote application innovation and development.

In the future, with the continuous development and application of technology, OpenTiny will continue to bring a more convenient and efficient experience to developers.

Click to follow and learn about Huawei Cloud’s new technologies as soon as possible~