JD.com style NutUI released

NutUI&JD technology front-end and UI designers have worked closely together for more than 2 quarters to develop and iterate. NutUI-JDT, as the official JD technology-style NutUI, finally meets with you. This time, it has created a theme customization method on both sides to achieve different styles of The perfect integration of component libraries has greatly improved the user experience, ease of use, flexibility, and reduced maintenance costs of components.

background

With the continuous development of business and the continuous expansion of application scenarios, there are more and more scenarios in which JD.com (referred to as: Technology) needs to support both H5 and mini programs in the same project on the mobile side. FindMobile, which is self-developed on the technology side, needs to be maintained separately. Multi-terminal is easy to cause problems such as asynchronous function launch time and duplication of resource costs. How to better use a set of code to adapt to multi-terminal and achieve unified maintenance and online has already required focus attention. Through the research of many component libraries in the group, NutUI supports multi-terminal (H5 and applet) features, which is very suitable for the needs of business research and development on the technology side. JDT.

Target

In line with the purpose of adapting a set of codes to multiple terminals, unified maintenance, and simultaneous release and launch, the development of multi-terminal scenarios on mobile terminals is simpler. Through the use of component libraries, R&D can be separated from the complicated and repetitive basic work, and can focus more on business logic. Optimize and improve performance, improve R&D delivery efficiency, and reduce development costs. At the same time, through the application and polishing of components in more scenarios on both sides of Jingdong Technology and Jingdong Mall, the component library will be gradually built to be more perfect.

How to blend

The technology-side self-developed FindMobile and NutUI are two independent component libraries. The definitions of component visual style, component type, and component API attributes are very different. After many discussions and communication, we finally decided to adopt a joint development theme customization scheme. In order to achieve the purpose of in-depth integration of both sides and unified maintenance and iteration, based on the consensus plan, the UI design and front-end development of both sides have been dismantled and divided into tasks, that is, two routes of expanding components/component properties and theme customization are carried out respectively. , and finally realized the completion of the scientific and technological visual theme development and acceptance.

The successful launch of the in-depth customization function of technological visual themes has also set a precedent for more visual systems in the group to access NutUI in the future, and laid the foundation for ensuring faster and more perfect adaptation and release.

Augmenting Differentiated Components/Functional Fusion

By screening the components on both sides one by one, after we excluded the components that are shared on both sides and have the same functional attributes, we found some components that are frequently used on the technology side but have not yet been included on the NutUI side. It is necessary to expand some API interface properties to achieve the level of supporting the existing technology side components. In addition, the components with the same functional properties on both sides are still quite different in UI style, so we divide the fusion into three parts - 1 Identify the components required by the technology side (which NutUI does not have), 2. Identify the components that need to expand the API interface properties for development, and 3. Sort out the UI style differences of all (70+) components to complete the theme of technology style.

1. Identify 5 components (form, empty state, indicator, grid, cascade selector) that need to be added to the NutUI component library system;

2. Identify 8 components that need to expand the API interface attributes based on the original NutUI components;

• Button: increase the size attribute;
• Cell: add description to group, support slot for title, add size attribute;
• Dialog: Added style attribute theme;
• Switch: support custom icons;
• Toast: add title attribute, custom position;
• Circular progress bar: support gradient color, two-line text style;
• Tab switching: increase the size attribute, add scroll shadow to the right, scroll interaction;
• Input box: the right side supports is-link;

3. Sorting out the UI style differences of all (70+) components: Sort out the UI style differences of a total of 70+ components after integration, and then develop and adjust the theme one by one to customize the theme of JD.com.

Theme customization

After discussion, it was finally decided that different styles can be switched on the same website through theme customization, which not only ensures the unity of integration and the independence of compatible styles, but also establishes a successful case for subsequent component libraries compatible with more styles.

1. Determine the scope of custom variables, and increase the number of theme variables from 300+ to 700+;
2. Customize variable development to complete the newly sorted variable development tasks;
3. The scientific and technological visual theme completes the full component adaptation;

Technology visual style sketch component library plugin

The technology visual style sketch component plug-in has encapsulated all components into controls (symbol) to facilitate quick multi-scene recall and reuse; at the same time, the internal page package of the plug-in defines the full stock text style, layer style, color style, which is convenient for text, Graphics, etc. are directly styled to ensure unified UI specification output;
The latest plugins include 39 components, 500+ controls (symbol), 170+ text styles, 90+ layer styles, and 30+ color styles;

Click to experience the resource plugin

How to use the Sketch plugin

Old driver, please ignore this paragraph~

After the installation is completed, it is placed in the actual project file by calling the control (symbol), and the control can display the required content by editing the overlay content (without unmarshalling the control), and it can also be upgraded with one click when the component library is updated. The project components are updated to the latest, which solves the problem that the old project file has many pages and cannot be quickly replaced with the latest UI styles.

1. Complete the installation of the plug-in by setting "Preferences > Component Library > Add Component Library" in the sketch software;

2. When using the actual project, select "Place" in the menu to select the corresponding component;

3. Modify the content of the control on the operation panel, or perform direct style coverage or relatively free stretching of text, graphics, etc.;

4. Update components: When the component library is iteratively updated, delete the old and save the new in the storage folder where the original component library is located (the file name needs to be consistent) and then you can call and place the latest component, and sketch to open the project file (or the old project file). Click In the "Notification" in the upper right corner of the software, there is "The component library has an update available". After clicking to confirm, the project file can be fully updated to the latest components;

Technical highlights

For developers

NutUI has always been based on the style of Jingdong Red (JD APP), and this release has derived a new theme ecology-Technology Blue. Developers can choose different UI styles according to their own business requirements.

New theme official website

The new JD.com technology theme, combined with many application scenarios of technology, come and try it.

• Theme switching is very simple, just 1 second
• Improve the visual interaction experience of the technology team
• Establish common detailing standards
• Establish basic standards for the connection between design and development
• Improve the efficiency of production and research output docking and reduce the output workload
  

difference

Compared with before, at the development level, we have generated multiple theme files such as variables.scss and variables-jdt.scss under the style folder inside the source code. The global variables.scss file of each theme is based on the standard internal The rules store holds common style variables and style variables for each component. This time, the number of theme variables has been increased from 300+ to 700+, strengthening the granularity customization capability of each component.

how to use

For the way developers use, we keep the original way, developers can install additional plug-in packages indefinitely, just need to modify vite.config or modify the variable-jdt.scss theme package name in taro/config. How to use: https://nutui.jd.com/jdt/#/guide/theme

Follow-up planning

1. More component applications are incorporated into the Tech Vision sketch plugin, and follow up with theme variables
2. NutUI unified icon icon library

Build a milestone

From November 2021, we have completed the sorting out of the differences between NutUI and Find (nearly 70 items), the development of missing high-frequency components (5), the development of component-level UI customization (extracting more than 700 style variables), and the technology version UI development and launch.

open source

Everyone is gathering firewood and the flame is high. Here we welcome interested students to participate in the development of the NutUI project. It is recommended to participate by submitting a Pull Request. The continuous iteration of NutUI is inseparable from everyone who participates in the development. Every recognition to us is the greatest encouragement to us.