Front-end sharing UI

pan front end

The development history of "front-end development" seems to have been looking for its own position;

From the "Stone Age" of cutting pictures and writing HTML templates, to the "Industrial Age" of separation of front and rear ends and large front-end, to the "Electrical Age" of cross-end technology and low-code.

The responsibilities of front-end research and development have been changing, and the technologies that front-end research and development need to master are also iteratively updated.

New front-end standard

On October 28, 2014, W3C officially released the HTML5.0 recommended standard to allow front-end technology to flourish. Although HTML6.0 is currently in the proposal stage, the community has started to have some sporadic discussions, so maybe it is not too far away. In 2022, HTML6 may not be launched, but there may be more proposals that are conducive to user experience. 

frame

Front-end framework In StackOverflow's "Most Popular Web Framework" survey, excluding SSR rendering framework and jQuery, there are 5 front-end frameworks on the list:

It can be seen that React, Vue, and Angular are still a strong iron triangle moving forward. In 2022, Vue3 will become the default version of Vue, and React 18 will also release an official version. Judging from the current community attention, Vue3 source code Github star 27k+, React 18 WG Github star 3.9k+, and in terms of npm downloads, the new The number of version downloads is relatively considerable, so it is likely that more people will try and use it this year.

UI framework

Due to the popularity of modular CSS, tree shaking, and MVVM, there are more and more UI frameworks to choose from. Just choose a UI that fits the project style for the chosen framework. 

Now the three front-end frameworks Vue, React, and Angular seem to be very good, but I don’t know what to choose. 

Principles for choosing a UI framework

  • There are many stars on Github, and the data will not tell lies. 
  • Choose domestic ones over foreign ones. Personally, I feel that foreign ones are more geeks, at least the appearance does not conform to my aesthetics.
  • In continuous maintenance, continuous output allows us to use it without any worries in the short term.

Recommended UI Framework

UI Framework Github Star Environment Team

  1. The documentation is clear, with detailed examples for each point of each component.
  2. The components are extremely perfect, only you can't think of it, and no one else can't do it.
  3. The component design is simple and easy to use, and you can get started quickly.

Element https://element.eleme.cn/#/zh-CN   domestic view 

ruoyi https://ruoyi.vip/

vue domestic

iViewhttps://www.iviewui.com/view-ui-plus/guide/introduce  vue 国内 

Ant Designhttps://ant.design/components/overview-cn react 国内 

NG-ZORRO https://link.zhihu.com/?target=https%3A//ng.ant.design/%23/docs/angular/introduce   angular Home 

 other frameworks

Vant

Vant is a lightweight and reliable mobile component library that provides  Vue 2 version , Vue 3 version and WeChat applet version . Compared with AUI/weUI, Vant has more components and basically covers all functional requirements of mobile web pages. Compared with weui, Vant is more convenient to use. The dynamic effects from html to js have been encapsulated, and you can directly call components and configure them. The function is extremely powerful, and it is a good helper in our work and study.

WebUI 

WeUI is a UI library specially designed for WeChat mobile web applications by the WeChat official design team.

WeUI is a set of basic style libraries that are consistent with WeChat's native visual experience. It is tailored for WeChat Web development and can make users feel more unified. Contains  button, cell, dialog, toast, article, icon and other elements.

AUI

aui is a mobile UI component library developed based on native javascript, including common js methods, character verification, dialog prompt pop-up windows, numeric keyboards, side-sliding menus, time selectors, multi-level linkage, chat UI, and common project templates . feature is:

标准化,产品化 
更多复用,更快效率 
多人协作,更加统一 
维护方便 
易于使用 
减少UI设计时间

Compared with weui, AUI goes a step further. It not only provides styles, but also uses its method to directly render components. The development of mobile applications can be used as a reference, and the common components are basically covered in place.

Lay UI   

Layui is a set of open source and free Web UI component library. It adopts its own lightweight modular specification and follows the original HTML/CSS/JavaScript development model. It is very easy to use and ready to use. Its style is simple and light, but its interior is elegant and rich. Even every detail including documents has been carefully crafted, which is very suitable for the rapid construction of web interface. Layui is different from the mainstream front-end frameworks, but it does not go against the road, but believes in the way of returning to nature. To be precise, it is more for pragmatists who pursue simplicity. They don't need to get involved in various construction tools, but only need to face the browser itself, so that they can easily grasp the elements and interactions required by the page, and then come to them at their fingertips.

interesting data

  • The number of Stars on Github among all the UI frameworks listed above: React: 97.6K > Vue 42.9K > Angular 27.4K 
  • Among all the UI frameworks listed above, the number of Stars on Github is developed by the domestic team: Vue: 42.9K > React 26K > Angular 2.6K.
  • Among all the UI frameworks listed above, the number of stars on Github includes domestic and foreign shares: domestic: 71.5K, foreign: 96.4K.
  • Among all the UI frameworks listed above, Vue is a domestic team

Guess you like

Origin blog.csdn.net/snow_living/article/details/130740927