The front end is a term that has evolved over time, from the first slash-and-burn pages to the Renaissance front-end engineering to the new era’s big front end, where it seems to do whatever it wants to do. But this time we’re talking about one part of the front-end technology — component libraries.
What is a component? Why a component library?
Components are the most basic elements that make up a page. Buttons, input fields, and drop-down selections are all components, and components and component combinations become more complex components. As to why use component library I think should be the experience, user experience and the developer’s development experience, is through the interaction of the user on the page component, a high level of appearance component can attract users to click on first sight, this is the user experience, development experience, not to mention different interactive encapsulation component is the same type, Using component libraries allows us to focus more on business development and product interaction.
Here are five common and popular enterprise component libraries culled from HelloGitHub’s recent issue (100+JS project).
Ant-Design
Type: Based on the React component library
Liverpoolfc.tv: ant. The design/index – cn
GitHub storage address: github.com/ant-design/…
Maintenance team: Ant Financial Experience Technology Department
Ant-design is one of the component libraries I often use. Ant is open source and maintained by great talent. With more than 4W Star, this component library has become the most widely used React component library in China. However, the soul of this component library is that the maintenance team put forward the concept of a design language, that is, all the interaction styles of the component library are implemented in accordance with this design language. The 14px main font, the alignment of categories, and the simple and direct design style all determine the bright eye of the user experience of this component library.
At the code level, the component library is implemented by TS+React. As you can see from the code, the maintenance team was already maintaining the RC-Components repository before the development of Ant-Design. It can be said that Ant-Design is a further packaging of RC-Components. From a learning perspective, you need to be familiar with React advanced features and TypeScript syntax.
Ecology: Ant-Design’s ecology periphery is better, and the maintainer provides an out-of-the-box mid-platform front-end/design solution based on Ant-Design, which includes a set of business logic required by mid-platform. The framework also provides a set of Sketch components so that both design and drawing are consistent
iView
Type: Based on the Vue component library
Website: www.iviewui.com/
GitHub repository address: github.com/iview/iview
Maintenance team: Aresn (Talking Data)
IView is the component library that I used when WRITING Vue. It can be said that AFTER reading the source code of iView, I have some understanding of the component development of Vue. IView is the Vue component library project initiated by Aresn personally. Mobile and out-of-the-box seed projects have a range of ecosystems.
Code level: the overall file structure is clear, component implementation is also very clear, template, Script standard Vue structure. Suitable for those who want to further learn after understanding Vue.
Ecology: iView-admin (out-of-the-box SOLUTIONS), iView-Regenerative P (app Library), iView Run(online editor)
MATERIAL-UI
Type: Based on the React component library
Liverpoolfc.tv: material-ui.com/
GitHub storage address: github.com/mui-org/mat…
Maintenance team: Material – UI
Material-ui is a React UI component library based on the Google Material Design language. It seems that domestic companies are less likely to use this set of component libraries, feeling that the flat style after looking at the Material style has a bright feeling.
The Material – UI team is very frequently maintained. Below is the Github homepage of the major developers of Material – UI
There are almost daily submissions, and up to 36 submissions a day.
Code level: Detailed documentation, tests, and examples are included in the project, but I need to dig into the code details 🤣
Ecology: Material-UI Pickers(date, time picker)
ElementUI
Type: VUe-based component library
Liverpoolfc.tv: element. The eleme. Cn / # / useful – cn
GitHub storage address: github.com/ElemeFE/ele…
Maintenance team: Ele. me FE
ElementUI is a desktop component library developed by Ele. me based on Vue. Currently, the latest version on the official website is 2.9. I was using version 2.5. ElementUI also provides design principles, a flat overall component library design, and the ability to customize your own theme colors. The number of components basically covers the daily use of components in the center
Code level: the file structure is clear, the definition of components is concise, easy to learn
Mint-ui (Mobile UI elements for Vue. Js) Element-Angular (Element Angular version) Element-react (React version)
Taro
Type: Multiterminal development framework
Liverpoolfc.tv: taro. Aotu. IO /
GitHub repository address: github.com/NervJS/taro
Maintenance team: O2 JDC
Taro is a span application framework that uses the React development approach. Write a multi – terminal run, providing H5, small program, RN component library. The latest version is also very good in applets and H5 RN development experience.
Ecology: the official website provides the material market, component library, if you write small procedures can be recommended to try
The last
Welcome to follow the HelloGitHub official account for more information and content of open source projects.
HelloGitHub has been running for three years and has received more than 10,000 ⭐
Background reply “add group”, together discuss technology interesting things. Share this article with your friends at 🤗