Comparison and analysis of mainstream mobile component libraries

With the development of the front-end, component libraries are emerging one after another. A complete component library can greatly improve development efficiency, allowing developers to focus on business logic without considering the reusability, scalability, and stability of basic components. . Faced with many component libraries, how to choose? This article will compare and analyze the current popular mobile component libraries from multiple perspectives, hoping to help everyone.

background

Since the release of NutUI3.x, there have been more and more users, whether it is an internal or external developer, and the cumulative number of projects within the JD Group has exceeded 200+. NutUI also gradually increased the ability of theme customization, internationalization and so on. While NutUI continues to add components and expand capabilities, it also pays attention to the completeness of "component granularity". The component library is like a building, and the components are its foundation, so the importance is self-evident. Therefore, at the beginning of 2022, we have completed the difference comparison of mainstream component libraries, learned from excellent component libraries, identified deficiencies, and quickly filled the ability of each component granularity.

6 models were carefully selected from the mainstream component library for comparison and analysis:

• NutUI - Mobile UI component library developed by JD.com, supports Vue3, Taro multi-terminal adaptation, and is oriented to e-commerce business scenarios
• Vant - Mobile UI component library developed by Youzan, supports Vue3, WeChat applet, Alipay applet
• TDesign Mobile - A mobile component library developed by Tencent, suitable for use in Vue3 technology stack projects
• Ant Design Mobile - A mobile component library developed by Ant Financial, supporting React
• Mand Mobile - UI component library for financial scenarios developed by Didi, supports Vue3
• Varlet - Material style mobile component library developed by Vue3, developed and maintained by small partners in the community

a preliminary understanding

First, we have a preliminary grasp of the above component libraries from the aspects of technology stack, open source time, number of components, Npm downloads, and GitHub Star number:

(Note: The deadline for Npm download statistics is: June 20, 2022)

It is not difficult to find from the above table that there are relatively few mobile component libraries in the React technology stack, and relatively many component libraries in the Vue technology stack.

Although the NutUI component library ranks first in the number of components, it still has a certain distance from the first-class component library in Npm downloads and GitHub Star. This also urges us to emphasize the quality of components, development experience and reputation in the later stage. The first stage is mainly to complete the function to meet the group's business development.

Component comparison

In order to make NutUI more robust, each component in NutUI corresponds to the components of other component libraries, and analyzes the components' usage documents, function points, APIs, etc. one by one, finds deficiencies, and improves them in time 💪.

Working with documentation

• NutUI
  The components are described from the aspects of "introduction", "introduction method", "code demonstration", "API" and "common problems". Among them, in the code demonstration of the component, each example has added Codesandbox and the self-developed Codehouse online code debugging, which is convenient for users to understand the component more intuitively and quickly.

  

• Vant
  The components are described from the aspects of "introduction", "introduction method", "code demonstration", "API", "theme customization (CSS variable configuration)", and "common problems". Compared with other component libraries, the display content is the most comprehensive. Vant does not provide the online code debugging function of components for the time being, and users can only experience it in the project.

  

• Ant Design Mobile
  The components are described from four aspects: "Introduction", "Example", "API", and "FAQ". Among them, each example of Ant Design Mobile contains multiple Demo demonstrations. When using it, users need to sift through them. One code demonstration without an example is more intuitive.

  

• TDesign Mobile
  The components are described in terms of "introduction", "example", and "API". Among them, each example has joined the Stackblitz online code debugging. Different from other component libraries, the entry to quickly enter the issue of this component is added to the usage documentation of each component, which is very user-friendly.

  

• Mand Mobile
  The components are described in terms of "introduction", "example", and "API". Mand Mobile's documentation description is very simple, and it is difficult to see a single line in the Demo example.

  

• Varlet

  The components are described in terms of "introduction", "example", and "API". Among them, each example has added Varlet UI Playground online code debugging developed by Varlet. Unlike other component libraries, every instance of Varlet incorporates a collapsing feature.

  

Component documentation is one of the important ways for users to understand components. The above component libraries have their own advantages and disadvantages.

In contrast, NutUI is still insufficient in the description of each example, and this problem will be gradually improved in subsequent releases.

In addition, the API exposed by a component may determine whether the component meets the current business scenario. Next, let's take a look at the API exposed by each component library.

API

Let's first look at a set of data: the number of APIs exposed by all components in each component library

As can be seen from the above data, Vant has the most APIs for exposed components. Although NutUI has a higher number of components than Vant, the average number of APIs per component is not as high as that of Vant. It can be seen that NutUI is insufficient in the number of APIs exposed by components. It is imperative to compare each component in turn to find the missing APIs.

Of course, you can't blindly add APIs, the same components, but the design ideas are different, and some APIs do not need to be added, you need to think twice.

General ability

It is not enough to just focus on each component, but also to enlarge the pattern, pay attention to the general capabilities of the component library, and meet the demands of developers as much as possible.

NutUI

In the past year, NutUI has continuously expanded its component functions. The Vscode plug-in intelligent prompt plug-in, the self-developed online editor CodeHouse, theme customization, online theme customization, and internationalization have all been supported.

• NutUI Vscode Smart Prompt Plugin

  The benefits provided to developers, realize the intelligent extraction of API and automatic completion, and improve the developer experience.

  

• Online theme customization

  It allows users to switch skins with different theme styles during the development stage, and also allows developers to directly modify the style of specified components to meet mobile business scenarios with different design styles.

  

Vant

Vant carries all the core businesses of Youzan internally and serves more than 100,000 developers externally. It is one of the mainstream mobile component libraries in the industry. Vant also has the ability to customize the theme, online theme preview tools, internationalization and other capabilities.

• Online Theme Preview Tool

  vant-theme is an online theme preview tool for the vant component library. It can be modified through the provided style variables and feedback the modified style in time.

  

Ant Design Mobile

Ant Design Mobile 5.0 version is a complete rework, which brings a new design experience and 100% rewritten component code implementation, replaced a new logo, and entered a new chapter. Ant Design Mobile has the ability of theme customization and internationalization. At the same time, it also has the ability of online editing, but it is relatively hidden ( online experience ).

TDesign Mobile

TDesign Mobile Vue has not been released for a long time, so capabilities such as internationalization and theme customization are not supported for the time being. I believe that these capabilities will be added in the near future. Although TDesign Mobile Vue does not have its own online editor, it has been successfully integrated into the Stackblitz online editor.

Mand Mobile

Mand Mobile provides a set of UI themes based on Didi's financial business design specifications by default, and also supports the theme customization function. The design idea of the theme customization function is the same as that of Vant.

Varlet

Varlet provides component highlighting capabilities for webstorm and vscode, and also provides a separate auxiliary plugin for vscode. Varlet also independently developed the Varlet UI Playground online debugging tool. Users can use the StyleProvider component or change CSS variables to complete the theme customization.

It is not difficult to see that capabilities such as online debugging tools, internationalization, theme customization, and Vscode plug-ins have become indispensable capabilities of a component library.

characteristic

Let's take a look at the internal implementation logic of each component.

Icon Icon

Icon, as an important element in UI composition, affects the overall style of UI interface to a certain extent. For the component library, adding a large number of images will seriously affect the package size. How to deal with a large number of icons has become a major problem in the design of the component library. As can be seen from the above chart, the implementation of the 6 component libraries is divided into 2 types:

• IconFont icon library

  NutUI, Vant, and Varlet component libraries are all implemented based on the IconFont icon library, which is finally rendered as a font. The size of the icon (using font-size), color, shadow, rotation, etc. can be directly controlled through CSS, which is simple and convenient to use.

  NutUI and Vant are used differently. After IconFont generates a custom Icon file, NutUI puts the downloaded file in the same repository as NutUI component development, while Vant puts the downloaded file in a new repository , the @vant/icons package is generated.

  

  Vant's processing method is convenient for users to use alone, and Vant's derivatives can also be reused. However, for component developers, once the existing Icon is not satisfied and a new Icon is added, it needs to be re-issued for version management. From this point of view, the processing method of NutUI will be more convenient.

  The two processing methods have their own advantages and disadvantages, which can be selected according to the framework and planning of the component library to maximize strengths and avoid weaknesses.

• SVG rendering

  The icons in the Ant Design Mobile and TDesign Mobile component libraries are separate NPM packages, and you need to install them separately if you want to use them. Finally rendered as SVG. Mand Mobile directly uses svg-sprite-loader for SVG icon rendering.

  SVG can also be controlled using CSS, and even better, SVG-specific properties such as strokes. Not only that, SVGs are true vector graphics and are guaranteed to be undistorted under any circumstances. But in terms of compatibility, it is not as good as the rendering form of Icon Font, and Icon Font is rendered normally even under IE6.

  

packaging/build tools

The 6 component libraries are packaged with Vite, Rollup, and Gulp respectively. Among them, Vite is the most used. As a new generation of front-end construction tools, Vite also uses Rollup as a packaging tool in production, while TDesign Mobile and Mand Mobile directly use Rollup for packaging. It can be seen that Rollup is very important.

CSS variables

CSS variables are custom properties, which contain values that can be reused throughout the document, set by custom property tags (eg: --main-color: black;), and retrieved by the var() function (eg. : color: var(--main-color);). A general best practice is to define under the root pseudo-class: root

 :root {
  --main-bg-color: white;
}

Vant, Ant Design Mobile, TDesign Mobile, and Varlet organize styles through rich CSS variables. By overriding these CSS variables, effects such as custom themes can be achieved.

Ecological construction

In fact, the developer of the component library and the product manager of the component library all hope that the component library can cover more business scenarios, support more technology stacks, and have more capabilities, so each component library is constantly Explore the possibilities of the component library and let it continue to multiply more products.

NutUI

After continuous efforts, the NutUI team now has 6 derivative products for different scenarios.

• NutUI - JD-style mobile Vue component library
• NutUI-React - JD-style React mobile component library
• NutUI-JDT - JD-style mobile component library
• NutUI-JDL - JD Logistics-style mobile component library
• NutUI-Bingo - Help Marketing Activities and Mini Game Scenarios
• NutUI-Cat - A business component library for mobile promotion scenarios

At the same time, in order to provide developers with a more efficient and convenient development method, the combination of NutUI and Taro not only allows developers to code in one place, run on multiple terminals, and develop small programs smoothly and freely. In the development process, you can use a more beautiful, more convenient and richer component library. I combined NutUI and Taro more perfectly, and Taro officially uses NutUI as the recommended component library for the Vue technology stack. Now developers will be able to use NutUI to seamlessly develop H5 and multi-terminal applets. NutUI provides 70+ components covering most of the components used in daily business development.

Zan Design System

Zan Design System serves the design system of SaaS products. There are currently 3 component libraries maintained on the official website

• Zent - Zent ( \ˈzent\ ) is a React implementation of the PC-side WebUI specification, providing a complete set of basic UI components and some commonly used business components.
• Vant - Lightweight and reliable mobile Vue component library
• Vant Weapp - Lightweight and reliable applet UI component library

There are 2 component libraries maintained by the community team

• React Vant - A mobile component library for the React framework based on the Vant design specification.

• Vant Aliapp - Alipay applet version of Vant, a mobile Vue component library

  

Ant Design

Ant Design's ecological construction is very comprehensive. It is mainly used for the research and development of enterprise-level mid- and back-end products. There are many products currently maintained, but most of the products are still used on the PC side, and there are fewer products on the mobile side.

• Ant Design Mobile - Mobile React component library

• Ant Design Mini - Alipay Mini Program UI Component Library

  

TDesign

TDesign's official website is committed to building an enterprise-level design system. It can be seen that TDesign has many products. However, most of the mobile products are still in the state of being launched, and there are 3 mobile products that have been released.

• TDesign Mobile Vue - Vue component library adapted to mobile terminal, it is still in Alpha (internal test) stage
• TDesign Miniprogram - TDesign WeChat applet component library, currently in Beta (quick iteration) stage

• TDesign QQ Miniprogram - TDesign QQ mini program component library, which is still in the Alpha (internal test) stage

  

Mand Mobile

Mand Mobile is a Vue component library for financial scenarios developed by Didi Chuxing. There are 3 mobile terminal products.

• Mand Mobile - Vue mobile UI component library for financial scenarios
• Cube UI - Exquisite mobile component library based on Vue.js

• Pile.js - React-based mobile development component library, Pile.js 1.x version has a good reputation.

  

at last

Through the comparison with other component libraries, NutUI found the shortcomings, but also found the shining points of the component libraries. The insufficiency of NutUI components started at the beginning of the year and is now nearing the end. I believe developers will slowly appreciate the changes in NutUI.

Finally, I hope this article can help you. For a component library to be successful, it needs to be perfect in all aspects, and NutUI will also learn from each other's strengths and improve it continuously, bringing the ultimate experience to developers. Welcome to join the NutUI family and make it more valuable~

If you encounter problems during development, you can raise an issue at any time, and the students of the NutUI team will take it seriously and solve the problem. If you have good components, both business class and general class, you can submit PR to the NutUI component library. You are very welcome to participate in the joint construction.

Looking forward to your use and feedback ❤️~