NutUI, jingdong’s open source retail project, is a set of jingdong style lightweight mobile Vue component library, which is an enterprise-level product for the development and service of mobile Web interface. After a long time of development, NutUI 3.0 is finally here. Version 3.0 has major technical and visual improvements that make components look more beautiful and more comfortable to use.

Source first to see: https://github.com/jdf2e/nutui

3.0 official website: https://nutui.jd.com/3x

A new change

Technology to watch

  1. Embrace Vue3
  • Vue3 new features Composition API, Teleport, Emits, etc
  • Disruptive change, full upgrade
  • Using combined API Composition syntax reconstruction, clear structure, modular function
  • Component emits events are extracted separately to enhance code readability
  • Refactoring mount class components using Teleport’s new feature
  1. Upgrade the build tool to Vite2.x

Ditch WebPack and introduce the next generation of front-end building tools, Vite. The startup speed will be increased from 30s to around 500ms, which will greatly improve development efficiency.

  1. Use TypeScipt across the board

NutUI 3.0 uses TypeScript as its primary development language to address the difficulty of maintaining and extending components in the context of the soaring complexity of front-end applications.

Comprehensive upgrade of visual experience

NutUI is a set of jingdong style lightweight Vue component library, with the continuous improvement and release of Vue 3.0, our JINGdong design system has also upgraded the new APP9.0 design language, NutUI based on jingdong APP9.0 design language combined with numerous retail application scenarios to create more standardized design semantics, For extensibility of components, basic components can be used in a variety of business scenarios

  • Reduce redundant controls
  • Helps mobile designers quickly reuse basic components
  • Establish common detail design standards
  • Improve the modularity and universality of the interface
  • Establish basic standards for design and development docking
  • Improve the efficiency of production, research and output docking, reduce output workload
  • Based on the design language system of JINGdong, the scene is constructed
  • Fine-grained reconstruction of the main process, the construction of “scene moving line”, to make the experience more smooth
  • In the face of ever-growing product system, business types and content are increasingly complicated, and design efficiency improvement drives the reform of design system. Through componentized solutions, redundant design and production costs are reduced, enabling designers to focus on better user experience and play a higher design value.

Production of the original

Pain points and difficulties

Components and specifications are already in shape, and new questions arise when considering business scenario components: when should we abandon specifications and when should we stick to them? In addition to the components extracted based on the latest specification of JINGdong APP 9.0, we also need to consider the components used by various businesses of users in non-retail scenarios. This is a problem that every component library team will encounter from its own business:

(1) On the one hand, we want to ensure the consistency of the whole product, try not to break the original rules to design, and try to use components to cover business requirements;

(2) On the other hand, in some special business scenarios, the design scheme without components will have a better experience. Such dilemmas are often encountered where the specificity of the business and the consistency of the components are difficult to coexist.

Development and Challenges

The rapid development of the Internet has brought great challenges to designers and engineers. The old one-way collaboration model is no longer applicable. Instead, the new collaboration process will be a circular evolution model, making the communication between the two become more and more. However, the unbridgeable “chasm” between designers and engineers reduces the effectiveness of collaboration and must be removed in order to have more time for each other to do more valuable things in their respective fields.

A set of excellent component library can make our communication more efficient, faster development, more consistent product experience, can greatly improve the efficiency of production and research.

Standards and Experience

The purpose of the component library is to provide a standardized experience for design and development, ensuring that information architecture, visual expression, and interactive experience are unified across different page levels. In the product terminal, the experience of each link and position is consistent, and the information elements seen will also be conveyed in a common way. Development can greatly improve development efficiency by establishing a common component library. Once the style is developed into a unified component by front-end engineers, it has the following advantages:

  • Reduce redundancy, optimize performance and improve development efficiency;
  • Improve design reducibility;
  • Reduce the docking cost of design and r&d;
  • Unify product experience and map brand mentality.

Synchronization between designer output and technician output is a headache in almost every current system. Because components designed by designers are not as composable as components developed by technicians.

For example: the designer gives a design that is assembled with six components, but the technician discovers that he needs eight components to assemble, which is the unequal composability. This problem leads to many products today that attempt to eliminate the boundaries between design and development, because composability considerations for components from the designer’s perspective are often inadequate. My vision is often limited, and it is impossible to fully understand the user’s usage scenarios in each module and in each state. The output of other characters is actually very valuable. Don’t contradict opinions, embrace ideas, abstract key design points, and come up with a solution that everyone agrees on.

NUT UI3.0 in establishing the basic standard for the docking of design and development, our team of designers and developers jointly explore, break down each component element, and rethink its inherent [consistency] and [composability]. NutUI can also flexibly support page content to be extended and expanded in different needs and scenarios. NutUI will also grow in constant iteration, upgrade and optimization, and develop and progress in the collaboration between production and research.

Can assign case

As an open source component library, we not only cover the needs of many scenarios under retail business, but also give deep consideration to the application of open source components in various scenarios facing the vast number of users. Every optimization made to the component library is based on user and scenario assumptions. Our optimizations need to stand the test of users and the market, and validation – iteration is what we do in the long run.

NUT UI3.0 enablecases are as follows:

Close the channel

For a long time, the team worked hard to maintain NutUI 2.0. After the release of version 3.0, we will still actively maintain and iterate, provide technical support for students who need it, and release some related articles from time to time to help people better understand and use our component library.

We enclose our r&d little brother in each development component of what you see is what you want, to have a look at our dribs and drabs in the development of research and development of small story: https://jelly.jd.com/search/all?keyword=nutui

Stay tuned for

NutUI has earned 2800+ stars since its launch in 2018.

In 2020, in the context of a major update to the Vue programming paradigm and the release of Vue3.0, we actively engaged in the NutUI adaptation of Vue3.0. Due to the low online version, old style and inconsistent specifications, we are determined to make a big change. The new NutUI 3.0 still sticks to [Jingdong style], that is, the component specification is designed according to the latest mobile terminal specification of JINGdong APP 9.0 for visual extension, and each component adheres to the ultimate experience. Standard specification and expansion to produce templates, at the same time in the product function, experience, ease of use and flexibility and other aspects of a comprehensive upgrade!

The smooth transition to Vue3 was always a tough one, with compatibility and user impact issues to consider, but after six months of development, NutUI 3.0 is finally on schedule!

This is a component rich Vue component library, covering 70+ exquisite components, this release is expected to launch 34, the future will continue to add updates, please look forward to ~

NutUI is future-oriented and has a mature design system, strong composability and flexible scalability. We look forward to your use and feedback. If you like it, please click Star ❤️ to support us