At the end of last year, Didi WebApp team used Vue.js 2.0 to reconstruct the business, and developed a set of mobile terminal component library cube- UI to support the development of the business. After more than a year of business testing, Culo-UI has become increasingly mature, and we believe that in addition to didi, culo-UI must also have its use. Good things must be shared, so we are very happy to tell you that cube- UI is officially open source today at github.com/didi/cube-u… .

Cube-ui is distilled from Didi’s business and developed and maintained by didi WebApp Front-end Architecture Group. The goal of Cub-UI is to make mobile development easier, to make developers more focused on business logic development, and to improve r&d efficiency.

features

  • Reliable quality

    It is streamlined and refined from Didi’s internal component library, and has gone through more than a year of business tests. In addition, each component is fully unit tested to provide guarantee for subsequent integration.

  • Experience the ultimate

    With rapid response, smooth animation, close to the original as the goal, in the interactive experience of the pursuit of the extreme.

  • Standard specification

    Follow the unified design interaction standard, highly restore the design effect; Interface standardization, unified standard use, more simple and efficient development.

  • Extensibility is strong

    Support on-demand introduction and post-compilation, lightweight and flexible; Strong expansibility, can be conveniently based on the existing components to achieve secondary development.

advantage

What are the advantages of cubo-UI over similar mobile component libraries?

  • I often say, “The Picker component is the only way to write the mobile component library,” because it takes some work to write the component well. The Cube-UI Picker is the most meticulously implemented and best experienced of any of the mobile component libraries available, and it’s close to native iOS pickers. Similar to the IndexList component, we consider the details of some interactions, such as the handling of the top title, pressing state and so on.

  • Post-compilation technology Post-compilation technology is a set of optimized technical solutions concluded by Didi front-end team after thinking about the problem that “multiple MODULES developed by ES6 are referenced in a project, because the compilation of Babel will produce many extra code”. This technical solution is also used for the Cube – UI component library, which optimizes performance to some extent by reducing the volume of code produced by end-user compilation referencing the Cube – UI component library.

component

The cube- UI component mainly consists of three parts, the base component, the pop-up layer component and the scroll component. At present, there are 14 open source components, and our principle is to open only the components with strong commonalities. Although the number of components is small, the experience and interaction of the components, including the ease of use, are pursued to the extreme.

use

Cube – UI can be used in two ways, declarative and API.

<template>
  <cube-button @click="showToast">show toast</cube-button>
</template>

<script>
  export default {
    data() {
      return {
        toastTxt: 'toast content'}},methods: {
      showToast() {
        this.$createToast({
          txt: this.toastTxt
        }).show()
      }
    }
  }
</script>Copy the code

As shown in the code above, there are actually two components of the cubo-UI, the cubo-button and the Cubo-toast. As you can see, the cube-button is created declaratively, and the cube-toast is created via the $createToast API call on the instance.

Vue.js tends to use components declaratively, but in the case of deep nested components, the styles of children can be influenced by the styles of their parents. Therefore, we designed API calls for popup layer types. They will eventually be mounted under the body element, avoiding the influence of the styles of their parents.

extension

Some components of culo-UI have good extensibility. We can extend the functions according to the requirements of actual scenarios. For example:

  • Popup

    The Popup component is the base class for the Popup component. All the built-in Popup components (Toast, Picker, TimePicker, Dialog, ActionSheet, etc.) are based on the Popup component. Of course, we can also develop richer Popup components based on it.

  • Picker

    The mobile selector component, TimePicker, is an encapsulated component based on the Picker, but we can also extend a city selector component based on the Picker.

demo

Demo address, recommended to browse on the phone.

Scan code experience:

cube-ui example

Architecture design

The bottom layer of cube-UI relies on Vue and better-Scroll, and a series of tools for building, deployment, unit testing, etc. On top of these, the cube-UI implements a series of components, as shown in the figure below:

enter image description here

Looking forward to

In the future, we will continue to iterate and optimize the Cube-UI, including but not limited to the following directions:

  • Rich component library

    We will consider developing more common components based on didi’s internal needs and community feedback.

  • Support the skin function

    We will support peels, work with the UI team to design several sets of skins, and also support custom skin capabilities.

  • Support the TypeScript/Flow

    Static type checking is a future trend that cube UI will consider supporting as well.