The Jingdong vue3 component library is shockingly upgraded, and it's coming as promised!

JD Retail Open Source Project NutUI is a set of JD-style lightweight mobile Vue component library, which is an enterprise-level product for developing and serving mobile web interface. After a long period of development and polishing, NutUI 3.0 is finally here! Version 3.0 has made great improvements in both technical and visual aspects, making the components look more gorgeous and more comfortable to use.

Source code first look: https://github.com/jdf2e/nutui

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

new change

Technical highlights

1. Embrace Vue3
2. Introduce Vue3 new features Composition API, Teleport, Emits, etc.
3. Breaking changes, full upgrades
4. Refactoring using the combined API Composition syntax, with clear structure and modular functions
5. Component emits events are extracted separately to enhance code readability
6. Refactoring mount class components with new Teleport features
7. Build tools upgraded to Vite2.x

Deprecate webpack and introduce the next-generation front-end build tool Vite. The startup speed is increased from the original 30s to about 500ms, which will greatly improve the development efficiency.

3. Full use of TypeScipt

NutUI 3.0 uses TypeScript as the main development language. In the context of the soaring complexity of front-end applications, it is difficult to maintain and expand components.

Fully upgraded visual experience

NutUI is a set of lightweight Vue component library with Jingdong style. With the continuous improvement and release of Vue 3.0, our Jingdong design system has also been upgraded with the new APP9.0 design language. NutUI is based on the Jingdong APP9.0 design language combined with retail Numerous application scenarios create more standardized design semantics. For the scalability of components, basic components can cover the use in various business scenarios

• Reduce redundant controls
• Help mobile designers quickly reuse basic components
• Establish common detailing standards
• Improve the modularity and versatility of the interface
• Establish basic standards for the connection between design and development
• Improve the efficiency of production and research output docking and reduce the output workload
• Based on the JD design language system, build scenarios
• The main process of bone refinement reconstruction and construction of "scene moving lines" make the experience smoother
• Facing the ever-growing product system, business types and contents are becoming more and more complicated, and design efficiency is driving the reform of the design system. Through componentized solutions, redundant design and production costs are reduced, enabling designers to focus on better user experience and higher design value.

The original intention of making

Pain and Difficulty

Components and specifications have taken shape, and new questions arise when considering business scenario components: when should we abandon the specification, and when should we stick to the specification?
In addition to the components extracted based on the latest specification of JD.com APP 9.0, we also need to consider many components that users need for various businesses in non-retail scenarios. This is what every component library team will do from their own business. Problems encountered:

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

(2) On the other hand, in some special business scenarios, the design scheme that does not use components will have a better experience. Such a dilemma is often encountered, and it is difficult for the particularity of the business and the consistency of the components to coexist.

Development and Challenge

The rapid development of the Internet has brought great challenges to designers and engineers. The previous one-way collaboration model is difficult to apply, and the new collaboration process will be a cyclic evolution model, which will change the communication between the two. more. However, the “chasm” that is difficult to bridge between designers and engineers will reduce the efficiency of collaboration. In order to have more time for each other to do more valuable things in their respective fields, this layer of obstacles must be eliminated.

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

Standard and Experience

The original intention of the component library is actually to bring a standardized experience to design and development, and to ensure the unified information architecture, visual expression and interactive experience of different page levels. In the product terminal, the user experience of each link and each position is consistent, and the information elements they see will also be conveyed in common.
Development By establishing a common component library, development efficiency can be greatly improved. Once the style is developed into a unified component by front-end engineers, it will have the following advantages:

• Reduce redundancy, optimize performance, and improve development efficiency;
• Improve design restoration;
• Reduce the cost of connection between design and R&D;
• Unify product experience and map brand mentality.

The synchronization between the output of designers and the output of technicians is a headache in almost every current system. Because the composability of components designed by designers is not equivalent to components developed by technicians.

For example: The design draft given by the designer is assembled from 6 components, but the technician found that he needs 8 things to assemble it, which is unequal composability. This problem makes it difficult for many products that try to eliminate the boundary between design and development, because the consideration of composability of those components from the designer's perspective is usually insufficient. One's own vision is often limited, and it is impossible to fully understand the user's usage scenarios under various modules and states. The output of other characters is actually very valuable. Only by not contradicting opinions, accepting various ideas, and abstracting key design points can we deduce a solution that everyone agrees with.

NUT UI3.0 In terms of establishing the basic standards for the connection between design and development, our team's designers and R&D explore together, break up each component element, and rethink its inherent [consistency] and [composability]. It can also flexibly support the extension and expansion of page content in different needs and scenarios. NutUI will also grow through continuous iterative upgrades and optimizations, and develop and progress through production-research collaboration.

Enabling Case

As an open source component library, we not only cover the needs of many scenarios in the retail business, but also have in-depth thinking about the application of open source components in various scenarios for the majority of users. Every optimization made to the component library is based on user and scenario assumptions. Our optimization needs to stand the test of users and the market, and verification-iteration is what we have to do in the long run.

[Part of NUT UI3.0 empowerment cases] are as follows:

Intimate channel

For a long time, the team's friends have been dedicated to maintaining NutUI 2.0. After the release of version 3.0, we will still actively maintain and iterate, provide technical support for students in need, and publish some related articles from time to time to help you better understand and use our component library.

Attach what our little brother R&D has seen and thought in each development component, let's take a look at our little R&D stories in development: https://jelly.jd.com/search/all?keyword=nutui

Stay tuned

NutUI has gained 2800+ Stars since its release in 2018.

In 2020, under the background of a major upgrade of the Vue programming paradigm and the release of Vue3.0, we are actively involved in the upgrade and adaptation of NutUI to Vue 3.0. Due to the low online version, the old style and the inconsistent specifications, we are determined to carry out a major change. The new NutUI 3.0 still adheres to the [based on JD style], that is, the component specification is based on the latest mobile terminal specification 9.0 of JD APP for visual extension Designed, each component adheres to the ultimate experience, standard specifications and strong expansibility to produce templates, and at the same time has made a comprehensive upgrade in all aspects of product function, experience, ease of use and flexibility!

A smooth transition to Vue3 is always a very difficult thing, and various issues such as compatibility and user impact need to be considered, but after 6 months of development, NutUI version 3.0 is finally on schedule to meet you!

This is a Vue component library with rich components, covering 70+ exquisite components, this release is expected to be online 34, and will continue to be supplemented and updated in the future, so stay tuned~

Focusing on the future, NutUI has a mature design system, strong composability and flexible scalability. We look forward to your use and feedback. If you like it, please click to star ❤️ Support us~