Why update now?

In the past two years, I have been busy with my work and can only upgrade components one by one in my spare time. Independent developers are always slow.

Some reflections on the work of the past two years

When I was writing the HeyUI component library, I was working in a start-up company. We had more than 10 front-end projects, but most of them were PC side projects, followed by VUE. Therefore, when writing the component library, there was a relatively large closure, and more emphasis was placed on ease of use.

After joining ant, HeyUI was exposed to more mobile terminal projects due to the change of scene, so gradually there were no more demand scenes, and it was just maintenance and modification of bugs.

Gradually, ant took over a large number of projects, spanning from small program, VUE and React technology. From writing VUE before, I learned React and small program, and wrote PC side projects, mobile side projects and small program projects. A variety of frames or scaffolds are used, such as Bigfish, ANTd, Kylin, Sherry, Smallfish, Herbjs, Minifish…. .

Technology is constantly iterating, business needs are constantly, new technology will gradually become history, become technical debt, and among these changes, for us, which is more important?

Eslint + ACI configuration, so that the format of the code is at least standard. Ants do this very well, almost 90% of projects are configured with ESLint. However, there are still many problems in the details of the code specification, such as variable naming, file definition and so on.

Ii. Code maintainability No matter vUE, React or small program, I took over a lot of business code. However, there are a number of maintainability problems in this code, of which the most prominent are the following:

1. Over-encapsulation of code: Over-encapsulation of code will cause you to change the logic later and easily affect the other logic, so do not overemphasize the encapsulation of code, sometimes, although the native code looks primitive, but really easy to maintain.

2, code reference is not clear: some frameworks have some global configuration, so when you look at the method call when you inherit the code, you don’t know where the method is and what the related configuration is. Especially, most of the time, we are empty-handed directly, will not know a lot of information about the current code framework in advance, too many special configuration forms, will lead to code logic is difficult to understand.

3, the code structure is not clear: the code structure logic is confused, the architecture and the actual logic do not conform, resulting in poor code readability.

Framework maintainability Some of the frameworks we maintain have stopped updating, which causes our code to be maintained with great care. Many problems encountered, there is no way to solve, also can not find the corresponding solution. Therefore, it is very important to choose a framework that can be maintained for a long time.

These summaries are only part of my work, but they also give me some direction in this component library upgrade.

What are the important changes in the version upgrade?

How global methods are referenced

In heyui1.0, global methods are defined in prototype fashion and can be called using this. In heyui2.0, global methods need to be invoked by reference.

/ / 1.0

this.$Message('This is a general reminder.');

/ / 2.0

import { message} from 'heyui';
message('This is a general reminder.');
Copy the code

Input and Textarea are changed from native DOM to component calls

By default in Vue2.0, event listeners passed to components with V-ON can only be emitted via this.$emit. To add a native DOM listener to the root element of a child component, use the.native modifier.

So using the native DOM, you don’t need to redefine many events as methods, which would cause many events to be lost. This definition has some advantages, but also some disadvantages. Because the input and Textarea styles are directly modified globally, the input styles can be problematic when other external components are introduced.

In Vue3.0, Vue will now add all event listeners in a child component that are not defined to be triggered by the component as native event listeners to the root element of the child component, which will solve the problem of event listeners perfectly.

/ / 1.0<input type="text" v-model="value"/>
<textarea v-model="value"></textarea>/ / 2.0<Input type="text" v-model="value" />
<Textarea v-model="value2"></Textarea>

Copy the code

Component event name normalization

Based on the above influence, all click events are renamed clickItems to avoid overwriting the native Click events.

Part of the input event is changed to the change event to make it easier to understand.

/ / 1.0<Menu :datas="data" @click="triggerClick" ></Menu>/ / 2.0<Menu :datas="data" @clickItem="triggerClick" ></Menu>
Copy the code

Confirm method change

In 1.0, referring to elementUI, the call was made in the Promise way, but if the cancellation was not handled, the catch was not handled, and the parameter definition of title was not clear, so the overall optimization was made. In the case of elementUI, there is an error if a catch is not handled.

/ / 1.0
this.$Confirm('Sure to delete? '.'Custom title').then(() = > {
  this.$Message.success('Delete sure! ');
}).catch(() = > {
  this.$Message.error('cancel');
});

/ / 2.0
import { confirm} from 'heyui';
confirm({
  title: 'title'.content: 'Sure to delete? '.onConfirm: () = > {
    message.success('Delete sure! ');
  },
  onCancel: () = > {
    message.error('cancel'); }});Copy the code

Modal componentization

In heyui1.0, the component library provides a way for methods to call vue components so that modal can be reused in js code. In heyui2.0, this method has been deprecated, and the modal method can still be used, but can only be called by simply passing content. For other complex scenarios, you are advised to use components.

/ / 1.0
this.$Modal({
  component: {
    vue: ModalComponent,
    datas: { fruit: this.value } // The subcomponent can be used directly with props
  },
  events: {
    success: (modal, data) = > {
      console.log(data)
    }
  }
});
Copy the code

<! -- -- -- > 2.0
<Modal v-model="openModal" title="Title">
  <ModalComponent
    :fruit="value"
    @close="openModal = false"
    @success="success"
  />
</Modal>
Copy the code

Table Style optimization

In 1.0, the table style was rudimentary, and in 2.0, it was completely optimized.

Version 1.0 style

Version 2.0 style

Of course, there are more details about component library upgrades that I won’t go into here.

Welcome to use

Our new version 2.0 website address: v2.heyui.top

And HeyUI Admin: admin.heyui.top for 2.0 update