Comparison of several popular HTML5 UI frameworks (summary)

Time:2021-10-9

Most mobile HTML5 development uses existing frameworks. Here are a few popular UI frameworks. The author compares several popular HTML5 frameworks, personal opinions, for reference only.

(1)MUI

website:http://dev.dcloud.net.cn/mui/

Advantages: Mui is a popular framework launched by digital dcland. Personally, it is the best H5 UI framework at present. It is simple to use and easy to operate.

Disadvantages: in order to achieve the original effect, Mui redefines all the styles of input, select and textarea in the form, which brings inconvenience to users’ custom styles.

For example, the figure on the left in the figure below is in Mui. There is no drop-down arrow when using the < Select > tag directly, which will confuse the user.

In the right figure, we can redefine select in HTML code to display it.


select {
    -webkit-appearance: menulist !important;
}

In fact, when I was using bootstrap, I remembered a remark made by the bootstrap developers when they defined the table. They said that they could rewrite the table through CSS. However, because some websites need the original table style, they changed the way to be compatible with the former

Change the default style of table through global CSS. If developers use the table style of bootstrap, they just need to add < Table >, which will not increase much workload and be compatible with past programs.

I think this is worth learning from Mui.

(2)WeUI

website:https://weui.io/

Advantages: weui is a set of basic style library consistent with the original visual experience of wechat. It is designed by the official wechat design team for wechat web pages and wechat applets, making users’ perception of use more unified. Therefore, its style is basically the same as that of “long” core wechat.

Disadvantages: sorry, I don’t think highly of weui, which is completely inconsistent with the name of Tencent. I had high expectations for weui, but the actual test was very disappointing. These disappointments are manifested in too much wechat, which limits the breadth of his use.

More importantly, its CSS name is completely different from other H5 frameworks. Taking a simple panel as an example, the recognized naming method is:

<div class="panel">
<div class="panel panel-header">
title
</div>
<div class="panel panel-body">
subject
</div>
</div>

But the name of weui is similar as follows: the header is abbreviated as HD, the body is written as BD, and the name of the class is called page__ There is no problem with title. The problem is that there are two underscores between page and title, while some class names use: the middle dash and the underscore are used together.

Such as weui cell__ hd。 When you write a lot of pages, your mind will keep switching and thinking about the name of the weui class.

<div class="page panel ">
    <div class="page__hd">
        <h1 class="page__title">Title</h1> 
    </div>
    <div class="page__bd"> 

      <div class="weui-cell">
        < div class = "weui cell__hd" > < label class = "weui label" > mobile phone < / label > < / div >
        <div class="weui-cell__bd">
          <span class="weui-input" id="mobile"  ></span>
        </div>
      </div>        
  </div>        
</div>

Weui also has a fatal disadvantage: one more span or div may invalidate your style completely. For example, as follows, it may only be between body and tab__ If a div is added between HD, your page will fail.

<body>
<div class=tab__hd>
</div>
</div>
</body>
and
<body>
<div>
<div class=tab__hd>
</div>
</div>
</div>
</body>

(3)Jquery Mobile

website:http://jquerymobile.com/

Advantage: this should be the earliest HTML5 framework,

Disadvantages: Although jQuery is very popular, I have to say that jQuery mobile is a failed work. Now it seems that all updates have stopped. The biggest disadvantage of JM is that it is too slow.

It’s no wonder that the browser supports CSS and JS, but JM rewrites the final rendering style by customizing many data – *,

For example, the data enhanced and data icon attributes of the following code, which cannot be recognized by the browser, need to be interpreted by JM’s JS engine and converted to CSS language,

When the page uses these data – * attributes heavily, its performance degrades greatly, and few people should use them now.


 <input type="button" data-enhanced="true" value="Enhanced - Left">
  <input type="button" data-icon="delete" value="Left (default)">

(4)Bootstrap

website:http://www.bootcss.com/

Advantages: compatible with PC and mobile phone, its concept and style have inspired many rising stars, such as dividing the page into 12 parts and automatically combining lights according to different resolutions. It plays an irreplaceable role in PC style.

Disadvantages: because it needs to be compatible with PC and mobile phone, although the PC style is excellent, the mobile phone effect can only be said to be “regular”. After all, it is unrealistic to “want the horse to run fast and want the horse not to eat grass”.

(5)Framework7

website:http://www.framework7.cn/

I haven’t used it, but it looks good and worth pushing.

(6)Amaze UI

website:http://amazeui.org

No, in fact, amaze has a mobile web component library based on react.jshttp://t.amazeui.orgBecause it is based on react.js, I feel that the entry threshold is very high

(7)Layui

websitehttp://www.layui.com

Layer is very popular at present, but she still focuses on PC

This is the end of this article about the comparison (summary) of several popular HTML5 UI frameworks. For more relevant HTML5 UI frameworks, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

New childhood fairy tale [139] little prince 32 — I planted this tree

Pain makes people sober. Everything in life originally depends on themselves. The mercy of others can’t win a better future. A petite thief said, “this time… I planted the tree and this time… I opened the road. If you want to buy the road money this time… ························································································· Another tall thief who blocked the way […]