1. Front-end framework
1.VueJS
Vue.js is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue
adopts a bottom-up incremental development design.
It is not compatible with IE8 and can only support the IE9
official website at least: https://cn.vuejs.org/
2. ReactJS
ReactJS is indeed a great thing. At its core, it is a jsx format that can be mixed with HTML, and a well-ordered state mechanism (when loading and updating) that is tied to HTML rendering in real time. To learn and use ReactJS, you don't need to make too many adjustments to your existing code structure. You only need to introduce two files, react.js and react-dom.js, and you are good to go.
Official website: https://react.docschina.org/
3. React Native (RN): mobile application.
Use React to create native apps for Android and iOS React Native combines the best parts of native development with React and strives to become the top JavaScript framework for building user interfaces.
Official website: https://www.reactnative.cn/
4. AngularJS
4.1 Angular 1
Compatible with IE8, AngularJS was the source of inspiration for Vue’s early development.
AngularJS was born in 2009, created by Misko Hevery and others, and later acquired by Google. It is an excellent front-end JS framework that has been used in many Google products.
Official website: https://www.angularjs.net.cn/
4.2 Angular 2
It must be developed in TypeScript, and almost all documentation and learning resources are TS-oriented; its design goal is only for large and complex applications. Build the web development framework of the future Works at any size Angular lets you start small and supports you as your team and applications grow.
Official website: https://angular.cn/
5. Ractive
Ractive is a JavaScript library for building reactive user interfaces in a way that doesn't force users into a framework-specific mindset. It takes a completely different approach to DOM manipulation - saving the user and browser unnecessary work.
Official website: https://ractive.js.org/
6. Flutter
Flutter is Google's mobile UI framework that can quickly build high-quality native user interfaces on iOS and Android. Flutter can work with existing code. Flutter is being used by more and more developers and organizations around the world, and Flutter is completely free and open source.
Official website: https://flutter.cn/
7. Knockout
Knockout is an excellent JavaScript library that helps you create a user interface with rich text and good display and editing functions using only a clear and tidy underlying data model. Knockout's core class library is implemented in pure JavaScript code and does not rely on any other class libraries. A pioneer in the field of MVVM, and tracking dependencies, it can support at least IE6.
Official website: https://knockoutjs.com/Chinese
tutorial website: http://www.aizhengli.com/knockoutjs
8. Avalon
avalon is a powerful and compact MVVM framework. It follows the concept of "operating data means operating DOM", so you can basically see no DOM operation code in the code. All DOM operations are handed over to the framework after binding. It is just like having an ORM on the backend, no need You write SQL by hand and improve productivity!
Compared with other js frameworks, it also implements the famous todos function ( see todomvc official website ). Among all MVVM implementations, avalon allows users to write the least code.
Compared with other MVVMs, it not only It is lightweight, supports at least IE6, and has the best performance.
Official website: https://github.com/RubyLouvre/avalon
9. Ember
All-purpose framework. Ember.js is an efficient and tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that run on any device. It provides a large number of conventions, and once you are familiar with them, development will become very efficient.
Official website: https://emberjs.com/
10. Weex
Weex is a framework that can use modern Web technology to develop high-performance native applications. It is a cross-platform user interface development framework initiated by Alibaba.
Official website: https://weexapp.com/zh/
11. No
Yox achieves extreme simplicity while maintaining complete functions. It can be said to be the simplest MVVM framework on the market and is compatible with IE8.
Official website documentation: https://yoxjs.github.io/yox/#/
2. UI component library
1. Bootstrap
Bootstrap is an open source toolkit launched by Twitter for front-end development. It was developed by Twitter designers Mark Otto and Jacob Thornton and is a CSS/HTML framework.
Chinese official website: https://www.bootcss.com/
2. Bootstrap Vue
Use BootstrapVue to build responsive, mobile-first, ARIA projects (Accessible Rich Internet Application, accessible rich media applications, accessibility-friendly applications), based on Vue.js and the world's most popular CSS front-end framework - Bootstrap v4.
Official website: https://bootstrap-vue.org/Chinese
official website: https://code.z01.com/bootstrap-vue/index.html
3. Vant UI (mobile version)
Vant is an open source mobile vue component library developed by Youzan’s front-end team, which is suitable for mobile h5 pages.
Official website: https://youzan.github.io/vant-weapp
4. Elment UI（PC端）
Element UI is a desktop component library based on Vue 2.0 for developers, designers and product managers. It was launched by the Ele.me front-end team. It does not depend on Vue, but it is a framework that is very suitable for Vue projects. Web pages can be easily created using Element UI, greatly reducing the coding burden for front-end developers.
Creator: Ali
Official website: https://element.eleme.io/#/zh-CN
5. Ant Design Vue (Web backend)
An enterprise-level UI design language and React component library with rich components and templates, suitable for the rapid development of middle and back-end management systems. Ant-Design-Vue is the Vue implementation of Ant Design. The style of the component is synchronized with Ant Design. The html structure and css style of the component are also consistent. It truly achieves zero modification of style, and the component API is also as consistent as possible.
Through community cooperation, Antd has also launched a Vue version and an Angular version. It is also one of the few Angular component libraries in China except Huawei.
The design style of Antd maintains a simple and fresh style. After version 5.0, it has gained more flexible customization capabilities, and the API design is also simpler. In short, it is a component library that is very worth using.
Creator: Ali
Official website: https://www.antdv.com/components/overview
6. LayUI (web end)
layui is a set of open source Web UI solutions. It adopts its own classic modular specifications internally and follows the native HTML/CSS/JS development method. It is very easy to get started and can be used out of the box.
Official website: https://layui.dev/
7. Vuetify (PC and mobile)
Vuetify is a hand-crafted Material style Vue UI component library. No design skills required — everything you need to create stunning apps is at your fingertips.
Official website: https://vuetifyjs.com/zh-Hans/
8. iView (web side)
iView, namely View UI, is a set of open source UI component libraries based on Vue.js, mainly serving the middle and background products of the PC interface. This project is the original iView, which was officially renamed View UI from October 2019.
Official website: https://www.iviewui.com/
9. EasyUI
easyui is a collection of user interface plugins based on jQuery, Angular, Vue and React.
easyui provides the necessary functionality for creating modern, interactive, JavaScript applications.
Chinese official website: https://www.jeasyui.net/
English official website: http://www.jeasyui.com/
10. Vuesax
Vuesax is a component framework based on Vue.js, designed from scratch and can be adopted gradually.
Vuesax strives to facilitate the development of applications, improving their design without removing necessary functionality.
Official website: https://vuesax.com/
11. Finding (Website)
Bulma is a simple and easy-to-customize CSS UI framework. It provides many predefined styles. Developers can directly call the class name to use them, and through standardized combinations, they can quickly build web interfaces.
Official website: https://bulma.io/
Chinese website: https://bulma.zcopy.site/brand/
12. Buefy
Buefy is a lightweight UI component based on Bulma and Vue.js, which provides ready-to-use lightweight components. Features make it simple to support Material Design Icons and FontAwesome with your current Bulma theme/variable without any internal dependencies other than Vue & Bulma.
Official website: https://buefy.org/
13. Tailwind
Tailwind is a practical toolset CSS framework for rapid UI development. The design concept is practical first. It provides highly composable application classes to help developers easily build complex user interfaces. It also provides a tool to extract components from utility patterns, and the responsive style can meet the development on different devices.
English official website: https://tailwindcss.com/Chinese
official website: https://www.tailwindcss.cn/
14. Tachyons
Tachyons, quickly build and design new UI without writing CSS. Principles 100% responsive Readable on any device Fast as possible Designed to be simple in the browser Interfaces or parts of interfaces can be easily changed without breaking any existing interfaces Try to ensure reusability and reduce duplication of work Documentation helps improve reusability and shared knowledge. CSS should not hinder HTML accessibility or default functionality with as little code as possible.
Official website: https://tachyons.io/
15. Frame fork
Framevuerk, is a responsive, multi-language, orientation-supported and configurable UI framework based on Vue.js with an awesome name.
Official website: https://framevuerk.com/
16. Frozen UI
Frozen UI is an open source, easy-to-use, lightweight and fast mobile UI framework. Based on the Mobile QQ style specifications, the most commonly used components are selected and made into a public offline package for Mobile QQ to reduce requests. The upgrade method is friendly and the documentation is complete. It is currently fully used in Tencent Mobile QQ value-added services.
Official website: http://frozenui.github.io/
17. Semantic UI
A front-end framework with a friendly vocabulary, a fully semantic front-end interface development framework equipped with specifications for sharing UI elements among a group of developers. The vocabulary used (classes and IDs) is simpler than other alternatives, thus reducing the learning curve.
Official website: https://semantic-ui.com/
18. Foundation
A responsive front-end framework that provides a wealth of components and tools for quickly building modern websites and applications. Foundation is a free front-end responsive layout framework for rapid development. Foundation includes HTML and CSS design templates and provides a variety of UI components on the Web, such as forms, buttons, Tabs, and so on.
Official website: https://get.foundation/
19. Pure CSS (mobile)
Based on Normalize.css, Pure provides HTML element layout, style and the most commonly used UI components with almost no redundant code. Pure is born for mobile Pure natively supports responsiveness, and the display effect is excellent in all screen sizes!
Official website: http://www.purecss.cn/
20. Topcoat
Design of the top coat even if the top coat is designed by code. A PSD with all components is included in the code base.
Official website: http://topcoat.io/
22. UIkit
A lightweight, modular front-end framework that provides easy-to-use and extensible components and styles, suitable for quickly building responsive websites. UIkit is a lightweight, modular front-end framework developed by the YOOtheme team, which can quickly build a powerful front-end web interface. The variables used by UIKit are based on LESS, which has small size, modularity, easy customization of themes and responsive design. /
Official website: http://uikitcss.com/
23. Material UI
A React component library based on Google Material Design, providing a rich set of components and themes suitable for web applications, mobile applications and desktop applications. Mainstream front-end responsive framework based on Material Design.
English official website: https://materializecss.com/Chinese
official website: https://www.materializecss.cn/
24. Framework7
Framework7 or F7 is a full-featured HTML framework for binding iOS 7 applications. Framework7 is a free and open source HTML mobile framework, used to develop hybrid mobile applications or iOS 7 web applications, with the native look and feel of iOS 7. Framework7 is also an independent prototyping application tool. Framework7 uses Javascript, CSS and HTML to create iOS 7 applications and supports migration to multiple platforms (PhoneGap), but it does not support all platforms and is mainly targeted at iOS 7.
Official website: https://framework7.io/
25. MUI
MUI is based on the iOS platform UI and supplements some UI controls unique to the Android platform.
Official website: https://dev.dcloud.net.cn/mui/Mini
program official website: http://activity.msmartlife.cn/activity/sit/m-ui-doc/
26. ionic framework
Ionic is a powerful HTML5 application development framework.
Official website: https://ionicframework.com/
27. Fries
Fries is an excellent mobile UI framework for developing Android Apps using only HTML, CSS and JavaScript.
Official website: https://github.com/jaunesarmiento/fries
28. jQuery Mobile
JQuery Mobile is an excellent responsive design framework for creating web applications on different devices.
Official website: https://jquerymobile.com/
29. Keen UI
Keen UI is a lightweight Vue.js UI library with a simple API. The design is inspired by Google's Material Design. However, Keen UI does not fully implement the Material Design specification. Keen UI is not a CSS framework. Therefore, it does not include grid systems, font styles, etc. Instead, the focus is on interactive components that require Javascript.
Official website: https://josephuspaye.github.io/Keen-UI/
30. Onsen UI (Mobile)
A mobile component library based on Web Components, providing a rich set of components and themes, suitable for building hybrid applications and PWA. Onsen UI is an open source framework focused on creating mobile applications. Apps can be developed by combining native-style components. It is very simple to use and can be developed with or without AngularJS. It has complete documentation, including a large number of examples and layouts, covering the most common app types.
Official website: https://onsen.io/
31. AT UI (web side)
AT-UI is a front-end UI component library based on Vue 2.x, mainly used for rapid development of PC website products.
Official website: https://at-ui.github.io/at-ui/#/zh
32. Mint UI (mobile)
A mobile component library based on Vue.js that provides easy-to-use and extensible components and themes, suitable for building hybrid applications and PWAs. Mint UI contains rich CSS and JS components, which can meet daily mobile development needs. Through it, you can quickly build a page with a unified style and improve development efficiency.
Official website: https://mint-ui.github.io/#!/zh-cn
33. Cube UI (mobile)
Generally, apps will have animations, and if it is some complex animation, not only will the implementation cost be relatively high, but the implementation effect may not achieve the desired effect of the UI. cube-ui is a mobile component library based on Vue.js open sourced by Didi. The functional features are of reliable quality and are streamlined and refined from Didi’s internal component library. They have been tested by the business for more than a year, and each component has been fully unit tested to provide guarantee for subsequent integration.
Official website: https://didi.github.io/cube-ui/#/zh-CN
34. N3-components UI
The N3 component library is built based on Vue.js, allowing front-end engineers and full-stack engineers to quickly build pages and applications.
Official website: https://n3-components.github.io/N3-components/
35. Mand Mobile (mobile version)
Mand Mobile is a Vue mobile UI component library for financial scenarios. It is rich, flexible and practical. It can quickly build high-quality financial products and make complex financial scenarios simple.
Official website: https://didi.github.io/mand-mobile/#/zh-CN/home
36. Style components
Official website: https://cui.antfact.com/guide/ed/installation/dev
37. Semi Design (Web version)
Coming from the Bytedance Douyin front-end and UED teams, it is an out-of-the-box mid- and back-end solution that includes design language, React components, themes, etc., and can be used to quickly build beautiful React applications.
Creator: Douyin front-end team
Official website: https://semi.design/zh-CN
38.Taro UI
Comes from JD.com's AoU Lab, a multi-terminal UI component library based on Taro, which provides a friendly API and can flexibly use components. A set of components can be adapted and run on multiple terminals such as WeChat mini-programs, H5, ReactNative, etc.
Creator: JD Taro Team
Official website: https://taro-ui.jd.com/#/
39. Color UI
CoreUI is a Vue component library. It is a high-looking and highly customized CSS component library adapted to H5, WeChat applets, Android, ios, and Alipay. It is an epic level that is at its peak since its debut. A masterpiece. As we all know, everything can be done with Color UI. Many people have used Color UI to make many beautiful projects, and I am the same. I would like to thank the author again.
Official website: http://docs.xzeu.com/#/
40. NutUI (JD.com, very complete)
Jingdong style lightweight mobile component library, Vue, react, uniapp...all available.
Official website: https://nutui.jd.com/#/
41. uView UI（uni-app）
uView UI is the best UI framework in the uni-app ecosystem. Comprehensive components and convenient tools will make you feel at ease.
Official website: https://www.uviewui.com/
42. Tailwind CSS
A powerful CSS framework that provides a large number of practical styles and tool classes, supports custom themes and components, and is suitable for quickly building customized websites and applications.
Official website: https://tailwindcss.com/
43.PrimeNG
An Angular-based UI component library that provides a rich set of components and themes, suitable for building enterprise-level applications.
Official website: https://primeng.org/
44. Carbon Design System
A component library based on IBM's design language that provides easy-to-use and extensible components and styles suitable for building enterprise-level applications.
Official website: https://carbondesignsystem.com/
45. Shards
A modern UI framework that provides easy-to-use and extensible components and styles for building responsive websites and applications.
Official website: https://designrevision.com/
46. Quasar Framework
A comprehensive development framework based on Vue.js that provides rich components and tools for building web applications, mobile applications and desktop applications.
Official website: https://quasar.dev/
47. Elemental UI
A lightweight front-end framework that provides easy-to-use and extensible components and styles, suitable for quickly building responsive websites and applications.
Official website: http://elemental-ui.com/
48. React Toolbox
A React-based UI component library that provides easy-to-use and extensible components and themes, suitable for building web applications and desktop applications.
Official website: http://react-toolbox.io/#/
49. MiniUI
jQuery MiniUI - Professional WebUI control library.
It can shorten development time, reduce the amount of code, enable developers to focus more on business and server-side, easily implement interface development, and bring excellent user experience.
Official website: http://www.miniui.com/
50. Arco Design Vue
Intelligent design system, connected light experience, enterprise-level design system
produced by Bytedance Creator: Bytedance
Official website: https://arco.design/
51. Varlet
Varlet is a Material-style mobile component library developed based on Vue3. It fully embraces the Vue3 ecosystem and is maintained by the community team. It supports Typescript, on-demand introduction, dark mode, theme customization, internationalization, and provides VSCode plug-in to ensure a good development experience.
Creator: Open Source Community
Official Website: https://varlet.gitee.io/varlet-ui/#/zh-CN/index
52. Naive UI
A Vue 3 component library, relatively complete, with adjustable themes, using TypeScript, fast, and a bit interesting.
Creator: TuSimple
Official website: https://www.naiveui.com/zh-CN/light
53. Vue DevUI
A Vue3 component library based on DevUI Design
Creator: Huawei
Official website: https://vue-devui.github.io/
54. Opentiny TinyVue
Opentiny TinyVue is a Vue-based UI component library that supports both Vue 2.0 and Vue 3.0.
You can see that opentiny provides two UI component libraries, TinyVue and TinyNG, which correspond to the two technology stacks of Vue and Angular respectively. They are enterprise-level design systems produced by Huawei Cloud. Friends who have used Huawei Cloud should be familiar with them. The console page is built using the component library of this design system.
Creator: Huawei Cloud
Official website: https://opentiny.design/
55. View UI Plus
View UI Plus is a set of UI component libraries based on Vue.js 3 in the View Design design system. It is mainly used for enterprise-level middle and back-end systems.
Creator: Changsha Developer Technology Co., Ltd.
Official website: https://www.iviewui.com/
56. Wave UI
A Vue.js UI framework with only the bright side.
Creator: Open Source Community
Official website: https://antoniandre.github.io/wave-ui/
57. PrimeVue
PrimeVue is a rich set of open source native components for Vue.
Creator: Open Source Community
Official website: https://primevue.org/
58. React Vant
A mobile component library based on React developed by Vant.
Creator: Open source community
Official website: https://react-vant-gitee.3lang.dev/
59. Quark
Quark is a cross-framework UI component library based on Web Components. It can be used in any frame or no frame at the same time.
Creator: Open source community
Official website: https://vue-quarkd.hellobike.com/#/
60. DevUI (web backend)
DevUI is a series of component libraries produced by the Huawei Cloud DevUI team. It is one of the earliest open source component libraries. It focuses on the UI component library of the Angular technology stack. Through open source construction, component libraries of the Vue and React technology stacks have also been formed.
DevUI is suitable for enterprise-level mid- and back-end projects. The design style is similar to OpenTiny and should come from the same set of specifications.
Technology stack: Angular (also provides corresponding versions of Vue and React)
Official website: https://devui.design/home
61. TDesign (PC, Mobile, applet)
TDesign is an enterprise-level design system produced by Tencent. It supports Vue and React technology stacks. It also supports WeChat mini programs and QQ mini programs, which is also a major feature of Tencent.
Technology stack: Vue, React
Creator: Tencent
Official website: https://tdesign.tencent.com/
At present, the component libraries of major manufacturers are becoming more and more complete. Commonly used components, internationalization, icons, theme configuration and other capabilities are basically available. More differences lie in the combination of their respective component libraries and their own businesses, such as Huawei Cloud's component library. More emphasis is placed on the Angular technology stack, because many of its internal cloud service pages are developed using the Angular technology stack, and Tencent’s component library provides versions of the WeChat applet and QQ applet, and Alibaba and ByteDance are constantly improving in technology. It is deeply explored and has its own distinctive characteristics. Understanding and using the component libraries of major manufacturers can simplify our development work on the one hand, and on the other hand we can also learn the API design ideas of components, thereby cultivating a better design thinking in future business code opening.
If there are any omissions, please add them in the comment area.
3. Summary of JavaScript frameworks
1. JavaScript framework
1.1 Vue
Vue: https://v3.cn.vuejs.org/guide/introduction.html
Vue Router: https://router.vuejs.org/zh/guide/
Vuex: https://vuex.vuejs.org/zh /index.html
Vue-Cli: https://cli.vuejs.org/zh/guide/
Sass: https://www.sass.hk/docs/
1.2 react
English official website: https://react.dev/Chinese
official website: https://zh-hans.react.dev/
1.3 Angular
Official website: https://angular.cn/
1.4 jQuery
Official website: https://jquery.com/Two
CDNs:
jsDelivr CDN
CDNJS CDN
1.5 Backbone.js
Official website: http://backbonejs.org/
1.6 Ractive.js
Official website: https://ractive.js.org/
1.7 Zepto.js
Official website: https://zeptojs.com/
1.8 Vanilla JS
Official website: http://vanilla-js.com/
1.9 Avalon
Official website: https://www.bootcdn.cn/avalon.js/
2. Lightweight JavaScript framework
2.1 Min.js
Super minimal selector and event library
官网：http://www.minjs.com/
2.2 glasses.js
A lightweight responsive framework
官网：https://sagapixel.com/download/
3. JavaScript tool library
3.1 underscore.js
Official website: https://underscorejs.net/
3.2 Way.js – two-way data binding library
Official website: http://gwendall.github.io/way/
3.3 Keys.js – App Shortcuts
Official website: https://bitwalker.org/keys.js/
4. JS unit testing framework:
1. Jasmine
Official website: https://jasmine.github.io/
2. Mocha
Official website: https://mochajs.org/
3. AVA
Official website: https://github.com/avajs/ava
4. Tape
Official website: https://github.com/Hyperledger-TWGC/tape
5. It is
Official website: https://jestjs.io/docs/getting-started
5. Custom server framework
1. AdonisJs(WIP)
Official website: https://adonisjs.com/
2. Express
Official website: https://www.expressjs.com.cn/
3. So
Official website: http://www.koajs.com.cn/
4. Egg
Official website: https://www.eggjs.org/
5. Fastify
Official website: https://www.fastify.cn/
6. Feathers
Official website: https://feathersjs.com/
7. Step
Official website: https://hapi.dev/
8. Micro
Official website: https://github.com/micro/micro
6. Front-end game framework
1. cocos2d-html5
2. Egret Engine
3. LimeJS
4. EaselJS
5. three.js
6. AlloyStick
7.The-Best-JS-Game-Framework
8. CanvasEngine
9. Quintus
7. Basic template
1. HTML5 Boilerplate
HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or websites. This small source code package brings together the experience of 100 developers, and you can apply this experience to your projects.
Official website: https://html5boilerplate.com/
2. Modernizr
Modernizr is a JavaScript library for detecting the HTML5 and CSS3 features of the user's browser. Why it's fun to use cool new web technologies with Modernizr.
English official website: https://modernizr.com/
Chinese official website: http://modernizr.cn/
3. Normalize.css
Normalize.css is just a small CSS file, but it provides a high degree of cross-browser consistency in the styling of default HTML elements. Compared to traditional CSS reset, Normalize.css is a modern, high-quality alternative prepared for HTML5. Normalize.css is now used in Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks and many other frameworks, tools and websites.
Official website: http://necolas.github.io/normalize.css/
4. Responsive – Responsive layout
Responsive is a powerful, accessible, developer-friendly framework for building responsive websites.
Official website: https://responsivebp.com/
9. Typesetting
1. yue.css
yue.css is not a style reset (reset) and will not affect the styles of other tags. All you need is to add the .yue class to the content area. It is simple and practical. It is currently used on my blog, Yuehu, and of course other friends are using it.
Official website: https://github.com/lepture/yue.css
2. typo.css
Goal: Unify browser layout effects and build a web page layout that is most suitable for Chinese reading. Includes desktop and mobile platforms.
Official website: https://github.com/sofish/typo.css
3. chinese-copywriting-guidelines – Chinese copywriting guidelines
https://gitee.com/haowt/chinese-copywriting-guidelines/
10. Grid system
1. grid
Official website: https://www.npmjs.com/package/gridjs
2. Flexbox Grid
Official website: http://flexboxgrid.com/
11. HTML5 API application
1. History.js
gracefully supports the HTML5 History/State APIs
官网：https://www.npmjs.com/package/historyjs
2. jquery-pjax
pushState+ajax
official website: https://www.npmjs.com/package/jquery-pjax
3. jquery-address
Deep Linking
official website: https://www.npmjs.com/package/jquery-address
4. Notify.js(Web Notifications API)
Official website: https://www.npmjs.com/package/notify.js
12. UA identification
detector
Official website: https://www.npmjs.com/package/detector
13. Form processing
1. Form Validator
1.1 Validator
1.2 Parsley
1.3 jquery.form.js
jQuery Form Plugin
1.4 Validform
1.5 validator.js
1.6 formvalidator.js
1.7 Fort.js
Form filling progress prompt
2. < select > related
2.1Chosen
2.2 Select2
2.3 bootstrap-select
3. Radio button/check box related
iCheck – Enhanced checkboxes and radio buttons
4. Upload components
4.1 jQuery File Upload Plugin
4.2 Baidu Web Uploader
4.3Uploadify
4.4Plupload
4.5arale-upload
Lightweight iframe and html5 file uploader
4.6Dropzone.js
drag'n'drop librarydrag upload
4.7flow.js
5. Date selection
5.1 Both Date and Time picker widget based on twitter bootstrap
5.2 GMU calendar component
5.3 Mobiscroll
6. Pick colors
Colorpicker plugin for Twitter Bootstrap
7. Tag plug-in (Tag)
TaggingJS
Flexibly customizable jQuery tag system plug-in
8. Autocomplete plug-in
8.1 At.js
A Twitter/Weibo style @ autocomplete plug-in
8.2 jquery-textcomplete
Smart search prompt box/auto-complete
9. Style correction
autosize
Make the text box automatically adapt to the entered content
14. Chart drawing
1. Highcharts
2. Chart.js
Simple HTML5 Charts using Canvas
3. Baidu ECharts
4. Chartist.js
5. D3.js
A JavaScript visualization library for HTML and SVG.
6. intro-to-d3
a D3.js tutorial
15. Date formatting
1. Moment.js
2. Smart Time Ago
Show relative time
16. Page interaction
1. Slider
1.1 slick
the last carousel you’ll ever need
1.2 Swipe
the most accurate touch slider
1.3 Swiper
Most modern mobile touch slider
1.4 scroll
Smooth scrolling for the web
1.5 OwlCarousel
create beautiful responsive carousel slider
1.6 jquery-mousewheel
jQuery mouse wheel scroll detection plug-in
2. Waterfall
2.1 Masonry
2.2 Isotope
Filter & sort magical layouts
3. Image lazy loading/loading monitoring
3.1 imagesLoaded
3.2 Echo.js
3.3 lazySizes
3.4 jquery_lazyload
3.5 lazyload.js
3.6 waitForImages
Image loading monitoring library
4. Image carousel/display
4.1 FlexSlider
4.2 unslider
Small but beautiful carousel library
4.3 prettyPhoto
5. Image cropping/processing
5.1 croppic
an image cropping jquery plugin
5.2 jQuery.eraser
Image Erase Plugin
6. Progress bar
6.1 NProgress.js
6.2progress.js
6.3Pace
Automatic page load progress bar
6.4jquery-ajax-progress
7. Side sliding plug-in (offcancas)
pushy
a responsive off-canvas navigation menu
8. Menu
8.1 SuperFish
Cascading drop-down menu based on jQuery
8.2 Responsive Nav
Responsive navigation
9. Scroll detection (ScrollSpy)
9.1 jquery-scrollspy(1)
9.2 jquery-scrollspy(2)
9.3 Waypoints
10. Scroll to load more
jScroll
11. Smooth Scroll plug-in
11.1 jquery-smooth-scroll
11.2 jquery.scrollTo
Smoothly scroll to the specified position on the page
12. Full screen scrolling
pagePiling.js
Full screen scrolling effect
13. Split screen scrolling
multiscroll.js
Split screen scrolling effect
14. Transition effects
Animsition
Transition effect when switching pages
15. Fixed elements (Sticky)
15.1 sticky
jQuery Plugin for Sticky Objects
15.2 jquery.pin
Fixed page elements
16. Touch events
16.1 Hammer.js
16.2 jquery.event.move.js
17. Drag and drop components
Draggabilly
JS library focusing on drag and drop functionality
18. Hide or show page elements
18.1 Headroom.js
Hide page header when it's not needed
18.2 Readmore.js
Content display and hiding plug-in
19. Scroll bar
jScrollPane
20. Parallax Scrolling
20.1 parallax.js
20.2 jparallax
17. Code highlighting plug-in/code editor
1. google-code-prettify
2.highlight.js
3.Rainbow
4.ACE
5.CodeMirror
6.Crayon Syntax Highlighter
7.prism
Lightweight, robust, elegant syntax highlighting.
18. UI Icon component
1. Font Awesome
2. Glyphter
The SVG Font Machine
3. Perfect Icons
4. iconizr
5. Cicons
Responsive Icon implemented by pure CSS
6. Simple Icons
19. Animation
1. animate.css
A cross-browser library of CSS animations.
2. Transit
CSS transitions and transformations for jQuery
3. Move.js
JS library to simplify CSS3 animations
4. ScrollMe
Add various scrolling animation effects to web pages
5. Effeckt.css
A Performant Transitions and Animations Library
6. NEC animation library
7. csshake
CSS classes to move your DOM
8. magic
CSS3 Animations with special effects
9. Hover.css
10. css-loaders
11. SpinKit
20. Local storage
1. cross-storage
Cross domain local storage
2. localForage
3. pouchdb
4. basil.js
21. Template engine
1. mustache.js
2. Handlebars.js
3. artTemplate
4. baiduTemplate
5. JSRender
6. EJS
JavaScript Templates
7. Juicer
A Light Javascript Templete Engine.
8. Tempo
9. json2html
22. Notification component/pop-up component
1. alertify.js
2. AlertifyJS
3. SweetAlert
4. Messenger
Very cool popup component
5. PNotify
6. Notify.js
A simple, versatile notification library
23. Tooltips
1.qTip2
Pretty powerful tooltips
2. tooltip
CSS Tooltips
3. tooltipster
A jQuery tooltip plugin
4. grumble.js
Bubble-shaped Tooltip control
5. Ouibounce
Departure prompt control
24. Dialog/pop-up layer (lightbox)
1. fancyBox
Fancy jQuery lightbox
2. jquery-lightbox
The popular lightbox script, ported to jQuery
3. Colorbox
a jQuery lightbox
4. artDialog
Classic web dialog component
5. DialogEffects
25. Documents/forms
1. handsontable
Online editable excel table
2. jQuery Bootgrid
Use ajax to generate dynamic tables
3. DataTables
Table plug-in for jQuery
26. Directory tree plug-in
1. zTree_v3
jQuery Tree Plugin
2. jstree
jQuery Tree Plugin
3. fancytree
Tree plugin for jQuery
27. Ajax module
1. fetch
A window.fetch JavaScript polyfill
2. reqwest
browser asynchronous http requests
3. minAjax.js
28. Audio/Video
1. jPlayer
HTML5 Audio & Video for jQuery
2. video.js
HTML5 & Flash video player
3. Accessible HTML5 Video Player
PayPal open source HTML5 video player
4. Clappr
Open source web video player
5. Plyr
A simple HTML5 media player
6. FitVids.js
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
7. BigVideo.js
The jQuery Plugin for Big Background Video
8. BigScreen
A simple library for using the JavaScript Full Screen API
9. Vide – Video background
10. winamp2-js
Twenty-nine, button
1. Buttons
A CSS button library
2. ButtonComponentMorph
3. ProgressButtonStyles
4. CreativeButtons
5. CSS3 buttons
6. jquery.onoff
Interactive, accessible toggle switches for the web.
30. Rich text editor/Markdown editor/Markdown parser
1. Simditor
Simple and fast rich text editor
2. BachEditor
A passionate editor
3. bootstrap-markdown
4. marked
markdown parser
31. Content Extraction (Readability)
1. Readability
2. json.human.js
Json Formatting for Human Beings
31. Colors (CSS Colors)/SVG
1. CSS Colours
2. SVGeneration
32. Utility tools/other plug-ins
1. jquery-cookie
2. FastClick
300 millisecond delay in handling mobile click events
3. screenfull.js
full screen toggle
4. Async.js
Asynchronous operations
5. html2canvas
Implement pure JS web page screenshots
6. jquery.qrcode.js
jQuery plug-in for generating QR codes
7. FocusPoint.js
Implement responsive cropping of images
8. DD_belatedPNG.js
Let IE6 support transparent PNG images
9. nakedpassword
Use strippers to help detect password strength
10. PDF.js
A PDF reader written in JavaScript
Thirty-two, front-end reference set
1. frontend-guidelines
Some HTML, CSS and JS best practices.
2. Codrops
Useful resources