Why make this component library

The author’s team is doingMulti-terminal C-terminal mall, mainlySmall program + H5, our technology stack isTaro+React. Mall, naturally large, basiccomponentAll of them. Basic buttons, prices, drop-down filters…Those of you who are familiar with this may know,Taro+ReactComponent library, Taro official doneTaro UIAs those of you who have used it know,To work withComponents are really limited, and there is no other useful component library in the industry

Therefore, we developed a multi-terminal React UI component library based on the Taro framework. In the process of precipitation, we actually implemented a component library from 0-1, from which we also accumulated a lot of experience

This article mainly talks about the birth of component library, how to land to open source, focusing on sharing experience, the specific details are limited to space not to expand

Ii. Basic introduction to Tard

1, define,

A set of based onTaroThe many facets of framework developmentReact UIComponent library

2. Component library related links

  • Making the warehouse
  • Component document

3. How was Tard born and landed

We did the first C-terminal mall because the team was just established and the project time was urgent, so we did not come to do the component library, so we went online

Components are written in the business project, which raises the following issues:

  • There’s a lot of business code mixed up in the components,Poor maintenance
  • The quality of component packaging is not high, the API definition is arbitrary,Readability is poor
  • Components cannot be reused across multiple business projects, resulting in low efficiency.Reusability is poor

So we always want to do a set of component library, the idea of component library was born from this, but the real implementation is from the business drive

At that time, the product team planned two new product lines in the mall, which meant that a large number of components needed to be used. Learning from the previous experience, we started to build a component library when the two projects were launched. Our approach was as follows:

  • Study the industry open source component library, basic open source have been studied, refer to the implementation scheme
  • Summarize the components to be encapsulated according to the PRD of the product before development
  • In the development process, the component is first extracted to the component library, and the business project is passednpm linkComponent library usage
  • Component packaging is done according to a unified standard, divided into three categories,Component itself, component documentation, component demo
  • After the design draft comes outComponents are styled from the business design draft

We encapsulated about 30+ components, of course, and we ran into some problems doing so

  1. Component styles are taken from the business design draft,Don't specificationRemember that one of the features of making components is theme customization, and theme customization is implemented in this wayCSS variable, the value of the variable needs to be determined by design, but we do not have so much time and design resources, so the variable is the business design draft
  2. Component specifications,Component names and API parameter names are not consistent(Such as whether the real mask layer is usedisMaskSome people use itoverlay), several people in parallel development, there is no set of unified standards, the goal is to meet the business first, but also not to and take into account more
  3. The component’sImperfect use of documentation and demo, there is still no unified standard check
  4. Components need to adapt small program, H5, self-test is not enough

Iv. Why does Tard want to open source

There were two opportunities: first, a product line was discontinued, which meant we had more time to build a component library; Second, during the process of building the taro-React component library, the research found that the taro-React component library was indeed a blank area. There was no other solution except the taro UI mentioned above and two warehouses with 100+ star number found on Github

So we thought, why not do something better, even open source, to fill the gap!!

So we set out to solve the three big problems above

  1. This need design support, resources in the group are busy with business, so there is no extra resources in component library, we a few people are interested in drive, fortunately there is a design take the initiative to contact me for help, you see a logo, website is designed, but the component library whole style variables is very large, we based on the current business design draft, There should be a subsequent round of optimizations, but the basic use of ❌ will not be affected
  2. Component naming format with a big hump, see each open source component library naming, API to develop a standard document, according to the standard document to develop, before writing inconsistent adjustment, although the business has been used, but not online, the cost of immediate correction is controllable ✅
  3. Developed standards for using documentation and demo writing, as well as cases to cover. After making good is actually the problem of workload, after finishing the division of labor, check in turn, for the problem to change ✅
  4. Fortunately, the business in their own group uses the component library, and the business is tested by the complete test. The adaptation problems encountered are found and solved in time ✅

After completing the above tasks and following the business launch, we released [email protected]

Join us

Future planning:

  • Component library style polishing
  • Provides multiple sets of theme styles
  • Supplementary unit tests
  • Continuously enriching components
  • Component libraries are built as cli
  • Vscode prompt plug-in
  • Lint verification specification
  • .

There is still a long way to go. At present, the three people involved are mainly engaged in business. As I have read a word before, when your business expands from 1-100, it is difficult or impossible to expand resources by 100 times

Recent thoughts on technology: in the short term, the benefits of technology may not be obvious, but the farther we go, the more value we will find. Take the long view and implement it in a best practice manner

Convinced of the need for a component library, we plan to keep upgrading TARD, because there is so much to do. We welcome everyone to build together. We will publish some issues on Github. You can join us by submitting PR