Taro component library | build from 0 to 1

Taro is a multiterminal React UI component library based on the Taro framework. It currently supports H5 and applets.

background

The status quo

With the expansion and enrichment of our current business, mobile terminal projects focus more on business development, so the project complexity continues to grow with the expansion of project staff and the increase of iteration time. In order to meet the rapid launch of the business, it is difficult to implement unified design specifications. In the development process, problems caused by the lack of UI standards are constantly highlighted, which are embodied in the following four levels: product level, design level, development level and test level.

For our development, component code is fragmented, and there are multiple development situations, resulting in high maintenance and expansion costs, and it is difficult to achieve the needs of changing themes and internationalization. Components lack unified management means, lack of bridge with UI, unable to achieve accumulation and precipitation, unable to adapt to the rapid development of new business. So creating a component library is one of our indispensable projects

Since our mobile development currently supports applets and H5, we choose Taro as our framework. Component libraries are also built based on Taro.

The target

Based on the practical pain points in the development work mentioned above, and the foreseeable demand for mobile capabilities in the future, it is necessary to build a unified multi-terminal UI component library. At present, it is developed for the purpose of realizing the basic components and part of the business components of each project, supporting the theme modification, part of the style modification, dynamic theme modification and part of the component customization process in each project.

Therefore, in order to improve the consistency of user experience, enhance the commonality and reuse rate of components among multi-technology solutions, and reduce the r&d cost of overall visual revision. Build taro-based component codebase that can provide high-quality, scalable, and uniformly configurable components by extracting mature business scenarios. So that it has the ability to support multi-business high-level code reuse, and then improve the ABILITY of UI business in Taiwan, so that the project to maintain a high degree of consistency

Competing goods

At present, there are many teams in the Taro style library industry. We have also analyzed the contents of several component libraries, and analyzed the ideas and architecture of their component libraries. The following are their analyses:

implementation

Pave the way

Before doing component library, need to build component library content to do some prerequisite work, I simply summarized:

1. Do before the component library to support us, we will design our own things is not so reasonable, want to take with the UI help we have our own design style or design system is the best choice, the UI through their own design specifications, design language, design principle to generate their own design resources to help us to achieve our components.
2. Set up component library team, invited synchronous door to do business together for development. Learn about the various configurations of mainstream frameworks, such asVant,Antd Mobile,NutUiandtaro-uiWe learned about their architectural design, component properties, and style standardization. Packaging and distribution.

introduce

Currently our component is also in development, but it is ready for use in the project. The component is a multi-terminal React UI component library developed based on the Taro framework. Jingdong Business Team produces, develops and serves mobile Web interface enterprise-level products. We gave it a name — Tard(Taro React Design). See our documentation address for details

The overall train of thought

The component library is also used at the bottomreact,taro,less,typescriptAnd other technologies,taroWithout further ado,reactandlessThe department chooses to use it.

The component library is released through LerNA. At present, only a package of component library is released, and the component library will be split later.

The component is currently divided into three parts: the component library itself, the documentation project, and the Demo project.

• Component library packaging is usedrollupFramework, because Taro is used when compiling small programsesmoduleWebpack cannot currently package this mode, so we use rollup.
• Documentation is usedumi, we use it because it involves stereotyped routing and we can use component librariesrollupWrite a plug-in (component library md file changes, documentation project can directly listen for changes, without routing configuration).
• The demo project is usedTaro scaffoldingThe interaction between the installed demo and documentation was intended to be handled with a micro front end, but Taro does not currently support it. So it’s choseniframeProcess. Using component content doesyarn linkTo implement it dynamically.

Component system design ideas

For multiple systems in the same department, our ultimate goal is to achieve complex business functions. However, many businesses are interlinked or similar between different modules or subsystems, so it is necessary for our business components to appear based on this scenario. We can encapsulate organisms with similar functions or requirements as a business component and expose interfaces for flexible customizability so that we can reuse the same logic and functionality across subsystems on different pages.

Similarly, visually or interactively identical or similar blocks can often appear in different pages. To improve reusability and improve development efficiency, we usually encapsulate them again based on the basic components and business components to make them a separate block for developers to reuse directly. Reduce code.

Through the above layers of encapsulation, we gradually build a complete set of componentized system, based on this pattern of development is often the beginning of a good front-end architecture. However, it is important to note that higher-level components must depend on lower-level components.

Partitioning of component libraries

We also refer to mature components in the industry for the division of component library, but we also need to distinguish again according to the actual business situation of our own department. We are now looking at over 30 components divided into 6 categories:Base component, form component, feedback component, presentation component, navigation component, and feature component. Basically, they are commonly used in the industry. Here we talk about the featured components, which are actually business components expanded on the basis of the basic components. At present, two components are removed from the source, and the rest are still to be developed and tested.

Theme customization

Currently, we provide a set of default themes for our components, and the CSS naming is BEM style, so that users can easily override the styles. If you want to completely replace the theme colors or other styles, you can use the configuration file we provide to change them. We offer two options: style variables and theme dynamic changes. Refer to the documentation.

Style variables are currently divided into three categories: base variables, public variables, and component variables. Base variables We present attributes such as definitions and base units for use by common and component variables. Public variables are used to extract common attributes such as font, spacing and size from components. Component variables are the special attributes of each component are extracted into a variable form for developers to modify

Dynamic theme changes are implemented in principle using CSS function features. However, there is no common portal to implement dynamic modification of applets, so we add a layer of common methods for each component. For use on our page, the color changes are injected into Taro’s global object, captured in the component’s public methods, and then injected into the component’s public template using inline styles. This allows each component to use CSS functions.

Component library compilation

The rollup framework is used for component library packaging, but ts packaging rules are also provided for direct use by other modules. The rollup framework supports EsModule and commonJs. CommonJs is an H5 usage rule, and EsModule is provided for small applications. The package size will also be smaller.

For a brief introduction, EsModule is not compatible with React Hooks because React Hooks do not output as EsModule, so we configured output to output React and React DOM.

{
  file: resolveFile(Package.module),
  format: 'es'.sourcemap: true.globals: {
    react: 'React'.'react-dom': 'ReactDOM',}}Copy the code

The document

The content of the documentation is also the key to the component library. If the developer does not understand the documentation, the content of the component library is not done well. The documentation covers two areas: implementation and specification.

1. The implementation

Documentation development is actually divided into three parts: framework body, documentation processing, and automatic compilation

• Frame bodyUmiFor development, it is convenient, fast, configurable
• Document processing is usedreact-markdown, syntax highlighting, style customization, rich plug-in support. I was going to write oneloader, butUmiThe rules for parsing code are not yet clear. So the above method is more efficient.
• Automatic compilation is writtenwebpackWrite plug-ins to implement MD file listening.

2. Specification

• Layout specification: page layout is divided into three parts: component introduction, code demonstration and API introduction. Component name :(capital hump) should be written with a level 1 heading; Code demo, API: use secondary title; Others: All written in three-level headings.
• API specification: THE API is written to distinguish between the component’s property and event parts. The property part needs to write the property name, description, property type, and default values. In the event section, you need to specify the event name, event description, and event parameters. If the event parameters are complex data types, you need to specify the data structure in the following section.
• Sample specification: The component sample section should be written in the order of the specific function of the component. Each instance should be written in the order of function, description, and code example, which should correspond to the demonstration section on the right.
• Style variables: The style variables section lists component custom variables used in writing the current component in the document so that users can style overrides when using the current component.

Write in the last

The component library took 4 months. The reason why it took such a long time was that we were a business department and needed to maintain and develop the system. The development of the component library could only be packaged into components during the development of the page, or developed in our spare time. Alpha-3.0 is currently available, and the final version will be refined by unit testing and components.

It’s not a performance, it’s not a task. But it is a platform for self-improvement. Live up to every love, live up to every day’s hard work. Thanks also to the developers for their contributions to the component library. @jjjonA0215, @mole 11 Would like to thank both of you for your support and others for your support of this component library.

Link: Github address, document address