Mobile open source site address: OKee okee.oceanengine.com/mobile/vue/…

Making: github.com/oceanengine…

preface

What is OKee? Behind the word “OK” is “All Correct,” which is precisely the goal — to consistently do the right thing and do it better, while being simple enough to remember.

The slogan of OKee Design is “Make More OKee, Make everything better”, to achieve the ultimate business experience, always adhere to the pursuit of perfection, multiple compatibility, open and win-win concept.

Today, I’d like to introduce OKee Mobile, the first open source Mobile component library of OKeeDesign ecology.

Everyone is welcome to use and make suggestions.

One might ask, why write a mobile library when there are so many? I said to the next face.

When we receive a business requirement and determine the technology stack, we choose one of the many component libraries to serve us. Many times, after researching a number of component libraries, we are still hesitant because none of them matches our business needs. Choosing an inappropriate “he” can lead to a lot of useless work in subsequent development, such as overwriting styles or introducing a second component library.

Why is this a problem?

Because different businesses and even different projects have unique interaction styles and UI styles. Component libraries are derived from the business, and if the positioning of component libraries doesn’t fit your business, there will always be problems.

The main character OKee Mobile is positioned to not only serve the ToC business, but also cover the common ToB scenarios, and deep into the data display scenario. Component libraries are based on a complete set of design concepts that break components down into design tokens, allowing you to gracefully configure your products.

At this stage, OKee Mobile offers 36 components that cover a large number of businesses and continue to evolve!

Let’s talk a little bit about it. What’s different?

Avi experience

  1. We have extracted a complete set of global less variable control components for the overall style. These include colors, rounded corners, fonts, animations, and so on. Some of the styles are shown as follows:
@primary-color: @blue; @primary-color-1: ~`colorPalette('@{primary-color}', 7) `; @primary-color-2: ~`colorPalette('@{primary-color}', 6) `; @primary-color-3: ~`colorPalette('@{primary-color}', 5) `; @primary-color-4: ~`colorPalette('@{primary-color}', 3) `; @primary-color-5: ~`colorPalette('@{primary-color}', 1) `; @z-index-1: 1; @z-index-2: 3; @z-index-3: 5; @z-index-4: 7; @z-index-5: 10; @border-radius-1: 2px; @border-radius-2: 4px; @border-radius-3: 8px; @border-radius-4: 12px; @border-radius-5: 16px; @ animation - duration - base: 0.3 s; @ animation - duration - fast: 0.2 s;Copy the code
  1. The design elements of a single component are extracted and the customization capability of a single component is extended. The design elements of the button are shown below:

1. Skin peels at compilation time

In order to reduce the cost of communication between designer and development, reduce the resulting secondary development of components.

We are developing a theme configuration platform that will give designers the ability to configure their own component library themes and export a set of component library skins that match the product style prior to the development phase. This platform will be open later!

The core functionality of this configuration platform is already built into the documentation.

On the configuration screen, adjust the corresponding color, such as the Primary color, and preview the display effect in real time on the right.

When the color value is changed, the components that use the color value are adjusted.

Finally, click “Export” to export the configured variable as var.json and overwrite it in the less-loader of the project to complete the theme configuration.

const vars = require('./config/theme/var.json');

module.exports = {
  rules: [
    {
      test: /.less$/,
      use: [
        {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true,
            modifyVars: vars,
          },
        },
      ],
    },
  ],
};
Copy the code

2. Skin peeling during operation

We use less variable to CSS variable strategy to achieve online skin.

In other words, we don’t need to write out CSS variables by hand during development. We just need to provide a configuration file at the time of file packaging to indicate which less variables are to be compiled into CSS variables. Our compiler plug-in will automatically collect less variables that depend on them and replace them all with the corresponding CSS variables. The specific process is as follows:

  • During the less compilation phase, declare the marked less variable as a CSS variable and hang on:rootPseudo class.
  • Convert the property values used in these variables to the corresponding CSS variables.
  • During peels, change:rootTo change the global style and component specific style at run time.

It’s important to note that you need to limit the number of CSS variables, otherwise you can have a significant impact on page performance.

Core competence

The above skin peeling experience can provide excellent adaptation to the business.

However, adaptation ability alone is far from enough. We also need to have complete basic components, expand them to a certain extent based on business scenarios, enhance their interaction ability, and constantly polish them to finally improve the use experience of the product.

Here’s a brief introduction to a component that is the backbone of data products but is often overlooked on the mobile side: Table.

At this point, people tend to mention that the mobile screen is too small, and the data that was intended to be presented as a Table can only be translated into other formats. I acknowledge that in the ToC scenario, presentation information can be aggregated on lightweight components such as lists.

But in a ToB scenario, the real requirement is often to show a lot of data that is not very cohesive and has a lot of columns. There is no doubt that the Table has its stage, and the key question becomes whether the interaction is good enough.

Next, take a look at the Table display of OKee Mobile

conclusion

OKee Design system covers all the mainstream technology stack of PC and mobile component library, chart library, icon library, illustration library, theme configuration platform, the follow-up surprises, please look forward to!

You are welcome to participate in the open source, whether it is to build or ask questions, you can contact us in the issue, thanks for reading.

You are also welcome to leave comments, and we will write follow-up articles in response to your questions.