A brief discussion on UI component library

I wrote down some ideas the other day after trying out a few different component libraries

---

Mainstream and niche

Mainstream UI component library, with many users and stable maintenance and development. Such as Bootstrap, Element, Antd. Usually during the normal learning process, you can know that they exist. It’s not that there are no other component libraries, but let’s learn one of the most commonly used ones first.

In the future, I will refer to the UI component library as component library.

Be able to handle daily development before considering other personalizations.

Moreover, mainstream component libraries usually influence subsequent component libraries and become a popular template, with similar APIs.

In other words, this has almost become a universal template for UI component libraries

Personal component library, Naive UIe.g. When I was studying Vue3and choosing a suitable component library, I received a recommendation (especially a big one). The effect was indeed extraordinary. The official documentation was just like a joke site, which was very "indecent". But this kind of "irregular" official document is more popular. This is also a sign of free thinking.

However, this kind of component library is difficult to get attention from the beginning. Even after it is formed, many people will not know their existence if there is no recommendation from an expert, even if the component library has been formed and can handle all developments.

There is no favorite, it’s just that I haven’t met anyone better

In contrast, products incubated in large factories, such as those that have appeared recently Semi Design, will have much higher awareness in the community.

Flexibility and encapsulation

One day, I wanted to see the world outside Antd, so I saw Material-UI

Later referred to as MUI

However, that time gave me a very terrible experience and I felt terrible. There are so many things that feel like they are within reach, but they don’t exist in MUI.

For example <Form/>, it's hard to imagine that there isn't one in a component library. After learning more about it, I found that the verification required handwriting. Such an out-of-bounds experience made me retreat into the arms of Antd. At that time, I felt very confused. Why are so many people using such components?

---

Comparing the two drop-down box components, I have purified them and only show the basic usage.

// MUI
import React from "react"  
import Select from "@mui/material/Select"  
import MenuItem from "@mui/material/MenuItem"  
  
export default function BasicSelect() {  
  return (  
    <Select fullWidth defaultValue="Ten">  
      <MenuItem value="Ten">  
        Ten  
      </MenuItem>  
      <MenuItem value="Twenty">  
        Twenty  
      </MenuItem>  
      <MenuItem value="Thirty" disabled>  
        Thirty  
      </MenuItem>  
    </Select>  
  )  
}

// antd
import React from "react"
import { Select } from "antd" 

const { Option } = Select

export default function BasicSelect() { 
  return (
    <Select defaultValue="lucy"> 
      <Option value="jack">
        Jack
      </Option> 
      <Option value="lucy">
        Lucy
      </Option> 
      <Option value="disabled" disabled>
        Disabled
      </Option> 
    </Select>
  )
);

At present, there is not much difference. There is another parameter that seems to exist.options

// 必要字段
export interface Option {
    
      
  label: string  
  value: string  
}

Can be rendered dynamically by passing in parameters

import React from "react"
import { Select } from "antd" 

const { Option } = Select

export default function BasicSelect() { 
  return (
    <Select  
      defaultValue="lucy"  
      options={[  
        {  
          title: "Jack",  
          value: "jack"  
        },  
        {  
          title: "Lucy",  
          value: "lucy"  
        },  
        {  
          title: "Disabled",  
          value: "disabled",  
          disabled: true  
        }  
      ]}  
    />
  )
)

What is clear is that this is just the component helping to map()render using . (⊙﹏⊙)So, MUI does not provide this option

---

Is it really that MUI is difficult to use? Relatively speaking, it is too difficult. Many things that feel very common do not exist and require manual assembly by yourself. However, this is also the characteristic of MUI, a transcendent flexibility in it

When I try MUI from the perspective of a learner, I can understand how some commonly used components are encapsulated. Using widgets to encapsulate complex <Table/>and <From/>by oneself greatly improves personal component thinking.

---

Of course, there is another point that has not been mentioned, which is why we need to change the component library? Isn’t it enough to choose something that suits you and is familiar to you?

My own answers would be these

• I am tired of aesthetics and want to change my style.
• Try new things, you may have unexpected gains and surprises
• Too many people are using it, and I want to stand out a little bit, at least so that people don’t know what component library is being used just by looking at the interface.

Conclusion

It seems that I said a lot of bad things about MUI above, but it doesn’t work no matter how you look at it, because the usual positioning of component libraries is to pursue efficiency and beauty.

Both are excellent products, with enough variety that you won’t be left without a choice.

It doesn't exist. Just choose one of them to use, just like Vueand React. Can you say that you only learn the same thing? You need to get in touch with it. Maybe the other one is your little lover . Personal bias is inevitable, but don’t praise others and criticize others.