New ideas for building front-end UI components

Front-End UI components, most popular implementations are derived from the traditional client UI design system. Both the early bindows and the thriving ExtJS in recent years, their UI components mimic client software, and code implementations are built on complex inheritance systems. The advantage is that you can build a whole set of UI components that are consistent with the client experience, but the drawbacks are obvious: the components are all the same, the code is too deep, and three hang four, not light enough.

How can you make the front-end UI components lightweight and flexible? First of all realize that Web UI design has its own uniqueness. Web pages can be divided into two types: one is to display the information as the main Web page (Web pages), and the other is the Web application (Web App) that operates on the information. For complex Web applications, you can use class libraries such as ExtJS to build a class client experience. However, more and more Web applications have been phased out of the process of imitating clients, starting with the unique features of the web and incorporating the functionality of traditional UI components into Web pages.

To cite an example: the domestic Web mailbox, whether 163 or QQ mailbox, will let people associate Outlook or Foxmail and other client software. This imitation cost is very high, but the effect of the individual feel is not very good. Back to Gmail, the overall UI design, concise and brisk, but the function is not inferior. In Gmail, you don't see the tree, you don't see the DataGrid, you get out of the box of these traditional UI components, you incorporate functionality into the web element, and it makes the user more natural and efficient.

The web features of the front-end UI components require us to break the traditional mindset and rethink the basic elements of the UI component in a different way. What angle do you think? What is the right angle? This is inseparable from the concrete scene. Here is an example to illustrate.

In the Taobao page, here are a few common UI components: