Nutui-cat (create-activity-Template) is a mobile component library created by NutUI front-end team based on Vue 2.0. It is a set of business component library suitable for H5 scenarios of great Promotion activities, and is used for developing great promotion pages quickly.

Source first look: github.com/jdf2e/nutui…

Nutui-cat home page: nutui.jd.com/cat/#/

Component preview:

NutUI – Cat background

The development time of big promotion business activities is more urgent than other projects, and the launch time cannot be delayed. So we need to make sure that the pages are delivered in a short period of time with high quality and that the pages run smoothly. Under this background, through large promote the activities of the team in the past years development experience, based on big business characteristics of promoting activities and unified visual design specification, we comb and out of the high frequency components, in order to reduce the repeated work, design and development for complex scenarios become simple, improve and promote the delivery efficiency of user experience and business activities.

Design idea of Nutui-CAT

Our goal is to create a business component library that can be used in large-scale activity scenarios. Our component library must meet the following requirements:

  • Support the current mainstream technology stack
  • Low cost of learning, can be quickly started
  • Develop strong

In recent years, many front-end stacks have emerged, but React, Vue and Angular are the main ones. In order to meet the above requirements and integrate with the current NutUI technology stack, we chose the Vue framework for development. However, the service promotion scenario needs to be compatible with more models of earlier versions, so Vue 2.0 is adopted, and Vue 3 will be upgraded according to service and compatibility requirements.

Some business components, such as Button, Countdown, and NoticeBar, are secondary developed based on NutUI, the basic component library, so that they can be directly referenced without secondary development.

Nutui-cat is divided into 12 modules based on component functions and currently has 35 components.

NutUI – Cat

1. Adequate components

Nutui-cat provides a 30+ component count that covers the vast majority of scenarios.

2. Unified visual norms

Nutui-cat follows the atomic visual design specification of “JINGdong Retail-Marketing Promotion Campaign”, which not only improves development efficiency, but also saves designers’ time of repetitive work. It ensures a high degree of visual consistency within and between activities.

Detailed documentation and examples

We have written detailed documentation for each component, from the introduction method of the component to the API supported by the component. In order to give a more intuitive introduction to how to use the components and their effects, we have provided multiple real-time demos for each component, so that users can understand the functions of the components more intuitively.

4. Flexible CSS post-processor

Styles in Nutui-cat use px units by default and can be adapted by users to suit their own tastes.

5. Good scalability

Support on-demand import and TypeScript, lightweight and flexible; Strong scalability, can be easily based on existing components to achieve secondary development.

NutUI – Cat

1. Efficiency improvement

Reduce design cost, development cost and communication cost, save 2 days/person on average compared with previous years, and improve efficiency by 50% in “2021 Jd Supermarket Mid-Autumn Festival Main venue”.

2. Extensive reusability

It covers general components such as commodities, conferences and coupons, as well as personalized components such as arc wheel seeding and three-level linkage.

3. Access intelligent algorithms

In addition to providing components, we also set up a special development promote the marketing activities of scaffolding, scaffolding is through Codmi (universal developer tools) custom, Codmi is jingdong retail development of a front-end developer and build tools, to meet different development scenarios, with flexible custom plug-in development ability, convenient support customized demand.

Promote marketing activity scaffolding access to intelligent framework, intelligent floor algorithm, no need to set user decision, algorithm automatically analyze page and user data, identify each user’s personal click preference, dynamic adjustment of floor ranking, to achieve a thousand page display, to achieve the venue data and page efficiency of the double improvement.

4. Keep optimizing

If you have any questions, please feel free to ask questions on Issues. NutUI team will continue to follow up your questions and feedback, and we will continue to optimize and iterate the components.

The application case

Cat component has been applied in “2021 618 Star Store Manager”, “2021 618 Industrial Belt”, “2021 JINGdong Supermarket Mid-Autumn Festival main venue” and so on, with an average component coverage rate of 60%.

future

Nutui-cat has just started, and there are still some imperfections. In the future, it will be optimized in the following directions:

1. Expand components

In addition to referring to atomic component visual draft, we will also analyze data insight reports and future trends of modules, and add and iterate components with high click-through rate and conversion rate.

2. Vue3 upgrade

Fully upgraded to Vue 3, introducing the next generation of front-end building tools Vite, experience chocolate smooth packing speed.

3. The React version

Nutui-cat will add a React version of the component library to support multiple stacks.

We sincerely hope that nutui-CAT will help you in your work. At the same time, we look forward to your support, feedback, and participation as we work together towards the goal of making the development of the Event scenario easier. Feel free to submit any questions you encounter on GitHub.

To point a Star ❤️ to support us