OpenTiny: Technical implementation and practice of cross-framework front-end component library
Mr. Kagol, senior front-end engineer of HUAWEI CLOUD, made a technical sermon
Empower the future with the light-chasing teenagers
Teach you how to play with the front-end component library~
The whole process is full of dry goods,
Wonderful not to be missed!
Activity background
This time, OpenTiny participated in the offline meetup of Beijing Institute of Technology , and conducted open source science popularization for students at the school, so that everyone can understand the significance and value of participating in open source, and choose open source projects that they are interested in to participate in open source. At the same time, combined with the current technical field of the project, we will share open source technology, and help college students understand the application practice of current cutting-edge technology through face-to-face technical exchanges, and strengthen their understanding of front-end technical field knowledge. Through the introduction of front-end open source technology + after-school assignments , the students' understanding of open source front-end technology will be strengthened, memory will be strengthened through on-site training camp practice, and information sharing of technical programming activities for college students will be realized.
Activity process
(1) Activity schedule
13:30-14:00 Check-in
14:00-14:10 Host opening
14:10-14:40 Topic 1: Big Guys Talk about Open Source--How College Students Participate in Open Source
14:40-15:10 Topic 2: Application of Data Structure and Algorithm in Database
15:10-15:40 Topic 3: Volcano’s high-level scheduling capabilities accelerate cloud-native AI training
15:40-16:10 Topic 4: Technical implementation and practice of cross-framework front-end component library
16:10-16:20 Open interactive communication
16:20-17:20 Training camp--group parallel
Event Details
Mr. Xiang Yu shared the data structure and algorithm used in the openGemini time series database in his keynote speech "Application of Data Structure and Algorithm in Database". -Tree gave a key explanation. He believes that it is very important to learn data structures and algorithms well in school, but it lacks the combination with actual products or scenarios. Focus on performance, and the use of resources by the algorithm. Xiang Yu said that openGemini has evolved since 2019 and has accumulated a lot of practical experience in data structure and algorithm optimization. Students are welcome to participate in the community to learn, develop, and improve their technical capabilities. The community provides technical guidance and support for college developers. Relevant community development training.
Teacher Wang Yang shared with you the development history and challenges of cloud-native batch computing (HPC, big data, AI), mainly including job management, high-level scheduling strategies and performance, domain framework support, resource sharing and heterogeneous computing, etc., for the above The challenge unfolds Volcano's architecture design and feature implementation in detail, and demonstrates the role and value of Volcano in cloud-native AI training scenarios.
Teacher Zeng Lingka shared with you the 20-year development history of the front-end framework, and thus led to OpenTiny in order to meet future challenges, conceived a set of cross-framework component design architecture, by extracting the logic layer of non-rendering components, and adding Corresponding to the adaptation layer of the framework, so as to achieve cross-framework, this architecture has been implemented in the OpenTiny project, and it has been verified by a large number of businesses that it is feasible. Then, through a specific example of a TODO component, we took everyone to fully realize the renderless component architecture, and verified the feasibility of the cross-framework component library on site. You only need to write a set of code logic, and it can be applied to PC/Mobile terminals. On the Vue/React multi-technology stack, the exposed APIs are completely consistent, which solves the problem of business migration between frameworks, saves development costs, and is truly future-oriented.
OpenTiny main content sharing
1. Framework: There is no fixed front-end framework
Introduce the development history of the front-end framework and discuss how to realize the future-oriented component architecture
According to the past, present and future, the development of the front-end framework is simply divided into three stages. The first stage of the jQuery era, the first version of jQuery was released in 2006. At that time, there were already many frameworks competing for supremacy, such as Dojo, Prototype, ExtJS, etc. jQuery relied on the Sizzle selector engine launched in 2009, plus the convenient chain It was only through the traditional DOM operation that it gained an overwhelming advantage and entered the 7-year jQuery era. Until around 2014, Angular, React, and Vue were launched one after another, and in 2016 they formed a three-legged confrontation. The front-end development model also entered the era of MVC/MVVM from manipulating DOM, and minimized DOM operations through virtual DOM and diff algorithms. , to improve the performance of front-end applications, the era of the three major frameworks has continued to this day. In the future, emerging frameworks such as Svelte and SolidJS are emerging and becoming more and more popular among developers. As a front-end component library developer, you need to think about how to deal with future challenges, because how to survive when external factors can no longer be used? How to ensure business continuity from the architecture? That's why the OpenTiny Component Library conceives a cross-framework component architecture.
2. Architecture: Design a cross-terminal cross-framework component architecture
Introduce the design ideas and concepts of component architecture
From the picture on the left, it can be seen that a Vue component can be split into three parts: rendering template, logic script and component style. If a component can have multiple sets of rendering templates, for example, different scenes and terminals have corresponding templates, then this component can adapt to various scenes and terminals. However, if these rendering templates can share a logic script, this can ensure the unity of component API interfaces, so that users only need to write a set of codes. If in a certain scenario, the default logic script of the component cannot meet the requirements, the user can also expand and specify the component to use a custom logic script. As for the style of the component, it can be designed separately for different scenarios and terminals. Through CSS variable technology, users can dynamically modify the style of the component.
The picture on the right shows that the design concept of OpenTiny is: separation of business and framework. The business here includes not only the implementation logic of UI components, but also the page logic of the application, because both UI components and pages are components in Vue. . Therefore, the bottom layer of the architecture is the core of the business logic. No matter what open source framework is used in the upper layer, it must remain unchanged to meet all changes. If neither Vue nor React can be used due to external factors, we can also migrate to other frameworks.
3. Technology: React hooks and renderless components
Introduce technical approaches to future-proof design architectures
OpenTiny is developed with composition-api. Here is an example of a TODO component officially provided by Vue. The code block on the left is written in Vue 2.0, and the code block on the right is written in Vue 3.0. They both implement the same components and functions. As can be seen from the figure on the right, the related parts of the code are represented by the same color, Vue2.0 is more scattered and messy, while Vue3.0 is much neater and more orderly.
Another technology, no rendering component, may be more appropriate to call it a concept. This article is also a TODO component. Its idea is to only realize the function without rendering, so it can make a component look different, but the function is exactly the same. The solution introduced in the article was limited by the technology at the time and could only be realized through Vue's scoped slots.
Combining these two technologies, these codes are TODO components of Vue 3.0. The left side is the rendering template of the component, and the right side is the logic script of the component. Our idea is to split the object returned by the setup method in the logic script into A standalone renderless file that returns the data and methods needed for rendering. For example, the todo.vue file here is split into two, one is the simplified todo.vue file, and the other is the renderless.js script file containing all component logic.
4. Combat: Build a cross-terminal cross-framework TODO component
Through technical interpretation, practical development of TODO components
This TODO component actually comes from the example of Vue's official Composition API, as well as the example in the previous Renderless article. What we need to do here is to make these examples into the presentation form of a TODO component in different scenarios and different terminals. In order to let everyone experience the running effect of this TODO component, here are two links, one is the URL of the online demo, and the other is the source code of this project. Open the demo URL, and you can see that the page is divided into left and right parts. The left side is implemented with Vue, and the right side is implemented with React. Both implementations share the same component logic code.
The entire TODO component example implements three functions. The first function is to realize the switching between PC and Mobile status of the component. The specific point is to provide two buttons, click the PC button, the component switches to the PC display form, click the Mobile button, the component switches to the Mobile display form, during the switching process, the component data and input status are kept in sync. The second function is to realize that the component supports custom rendering templates. For example, developers feel that the PC display form of the TODO component does not conform to the business scenario, and want to adjust it in their own way, but they do not want to rewrite a new component, because the functions of the existing components meet their requirements. The third function is to realize the rewriting of the component Renderless function. Similarly, developers feel that the function of this TODO component cannot meet their needs and want to adjust it in their own way. At this time, they need to provide an ability to override the logic of the existing component.
Demo: AUI 3.0 POC Demo
Source code: GitHub - kevinmoch/aui3-poc-demo: AUI 3.0 POC Demo - Composition API + Renderless + CSS Vars
5. Summary: The influence of architecture
Interpret the strengths and weaknesses of the architecture
Advantages: The first is the separation of business and framework. In addition to decoupling the component library itself from the open source framework, it can also guide application developers to decouple their business code from the framework as much as possible. The second is one-time encoding for multi-terminal adaptation. Obviously, the components developed by this architecture can reduce the workload of multi-terminal component development by reusing renderless logic. The third is to unify the front-end technology stack. Because this architecture has great flexibility, inclusiveness and scalability, it can cover multiple frameworks, terminals, and topics, and eventually promote the unification of technology stacks in various fields. This is what OpenTiny will do in the future road.
Disadvantages: asynchronous components, component methods cannot be called before loading is complete; cross-framework development, low reusability in the case of large differences in frameworks; only on the Web side, does not support Android and iOS, and does not support various small programs .
6. Practice after class: add the function of clearing all to-do items to the TODO component of the cross-end component library
Operation Manual: Wiki - Gitee.com
The above is the entire content of OpenTiny, and you are welcome to use the OpenTiny open source project and participate in the discussion and sharing of front-end technologies.
activity feedback
In addition to the activity, the students also gave some feedback. For example, student A wanted to build a website application for displaying school information. Since he used the jQuery technology stack before, many components were handwritten, and the development efficiency was not high. He hoped that he could use Vue technology stack + OpenTiny component library for development.
And student B is also very interested in the front-end framework. After the teacher shared, he consulted a lot of knowledge about the front-end and front-end framework, such as what is DOM, what is the MVVM framework, and how to realize the corresponding view after the data changes.
Some students also believe that the front end, as the basis of web application construction, plays a vital role in improving the quality of the entire application. However, since most students do not have a deep understanding of the front-end at present, it is very necessary to popularize front-end knowledge in schools, which can not only deepen students' understanding of the front-end, but also mobilize students' interest in the front-end. Popularizing front-end knowledge can help students understand the basics of Web development, master development skills, and improve application quality. It also helps to better understand market demand and improve application development efficiency after entering a company after employment.
About OpenTiny
OpenTiny is an enterprise-level component library solution produced by HUAWEI CLOUD. It adapts to multiple terminals such as PC/mobile, covers Vue2/Vue3/Angular multi-technology stacks, and has efficiency improvements such as theme configuration system/middle-background template/CLI command line Tools that help developers efficiently develop web applications.
Core highlights:
跨端跨框架: Using the Renderless non-rendering component design architecture, a set of codes supports Vue2/Vue3, PC/Mobile at the same time, and supports function-level logic customization and full template replacement, with good flexibility and strong secondary development capabilities.组件丰富: There are 80+ components on the PC side and 30+ components on the mobile side, including high-frequency components Table, Tree, Select, etc., with built-in virtual scrolling to ensure a smooth experience in big data scenarios. In addition to common components in the industry, we also provide Some unique feature components, such as: Split panel divider, IpAddress IP address input box, Calendar calendar, Crop image cropping, etc.配置式组件: The component supports both template and configuration methods, suitable for low-code platforms. Currently, the team has integrated OpenTiny into the internal low-code platform, and has made a lot of optimizations for low-code platforms周边生态齐全: Provides a TinyNG component library based on Angular + TypeScript, a TinyPro mid-background template with 10+ practical functions and 20+ typical pages, a TinyCLI engineering tool covering the entire process of front-end development, and a powerful online theme configuration platform TinyTheme
contact us:
- Official public number:
OpenTiny - OpenTiny official website : opentiny.design/
- OpenTiny code repository : github.com/opentiny/
- Vue component library : github.com/opentiny/ti… (Welcome Star)
- Angluar component library : github.com/opentiny/ng (Welcome Star)
- CLI tool : github.com/opentiny/ti… (Welcome Star)