Compared to the number of JavaScript developers, the number of JavaScript frameworks, libraries and tools currently seems to be larger. As of May 2017, a quick search on GitHub shows that there are over 1.1 million JavaScript projects. npmjs.org has 500,000 available packages and nearly 10 billion downloads per month.

This article will discuss the most popular client-side JavaScript frameworks, libraries and tools and the basic differences between them. Maybe this article can't tell you which one is the best, but the one that suits your project best is the best.

Class library

A class library is an organized collection of functions. Typical class libraries include string processing, dates, HTML DOM elements, events, cookies, animations, network requests and other functions. You can implement a function yourself to choose whether the function needs to return a value when called.

Class libraries usually provide a high-level abstraction method that can help smoothly implement the details of the project. For example, Ajax usually relies on the XMLHttpRequest API, which requires only a few lines of code to implement the function, but there are subtle differences between browsers. The class library provides simpler ajax() functions so developers can focus on higher-level business logic.

Class library can shorten development time by 20%, and developers do not have to worry about implementation details.

But there are also disadvantages:

Errors in the class library are difficult to locate and fix
The development team cannot guarantee the rapid release of patches
The patch may change the API, resulting in a large amount of code having to be changed
If you encounter any problems during the learning process or want to obtain learning resources, Welcome to join the learning exchange group
343599877, let’s learn front-end together!

Framework

The framework is the skeleton of the application. It requires software design in a specific way and to implement its own logic on certain nodes. Frameworks usually provide functions such as events, storage, and data binding.

Frameworks usually provide a higher level of abstraction than class libraries, helping to quickly build the first 80% of the project.

Disadvantages of frameworks:

If your application exceeds the scope of the framework, the last 20% can be difficult
Framework updates are difficult
Core framework code and concepts are rarely updated

Tools

Tools will help development work , but is not part of the project. Tools include build systems, compilers, transpilers, code splitters, image compressors, deployment mechanisms, and more.

Tools help achieve an easier development process. For example, many coders prefer Sass to CSS because it offers code separation, nesting, render-time variables, loops, and functions. Browsers do not understand Sass/SCSS syntax, so the code must be compiled to CSS using appropriate tools before testing and deployment.

The difference between class libraries, frameworks and tools

The difference between class libraries, frameworks and tools is very small. A framework can include a class library, and the class library can implement methods similar to the framework. Any tool in the project is essential. So there is no need to clearly distinguish between libraries, frameworks and tools.

JavaScript Frameworks and Class Libraries

The following is sorted by popularity:

jQuery

With the release of WordPress, ASP.NET and some other frameworks, jQuery is still the most commonly used JavaScript library. It revolutionized client-side development by introducing CSS selectors to DOM node retrieval and chaining to apply event handlers, animations, and Ajax calls.

jQuery has gained popularity in recent years and is still a good choice for projects that require a small amount of JavaScript functionality.

Advantages:

Small distribution scale
Slow learning curve, rich online help
Concise syntax
Easy to expand

Disadvantages:

Increased speed overhead of native API
Browser compatibility is not good, but has been improved
Usage Flat
Some industries object to the use of

Lodash and Underscore

##Size Minimum 30kb ##Use Usage

jQuery
Type	Class Library
Website	jquery.com
Knowledge Base	github.com/jquery/jquery
Current version	3.2.1
Developer	jQuery Team
Release Date	2006 August

General
72.4% of websites

##Release Date April 2012 Size Minimum 4kb – 24kb Use General ##Usage Underscore Type Website ##Knowledge Base github.com/jashkenas/underscore Current version 1.8.3 Developer Jeremy Ashkenas Release Date October 2009 Size Minimum 6kb Usage General Low

Lodash

Type

Class Library

Website

lodash.com/

Knowledge Base

github.com/lodash/lodash/

Current Version

4.17.4

Developer

John-David Dalton

Low

Class Library

underscorejs.org/

##Usage

Lodash and Underscore are discussed together in this section. They provide hundreds of functional JavaScript utilities to complement native string, number, array, and other primitive object methods. Although there is some overlap between the two libraries, it is unlikely that both will be used in the same project.

Although the two class libraries have a low usage rate on the client side, they can be used in Node.js applications on the server side.

Advantages:

Small and simple
Good documentation easy to learn
Compatible with most libraries and frameworks
Does not extend built-in objects
Can be used on the client or server Disadvantages of using

Some methods are only available in ES2015 and later versions of JavaScript.

AngularJS 1.x

##AngularJS Type Framework Website angularjs.org Knowledge base github.com/angular/angular.js Current version 1.6.4 Developer Google Release Date October 2010 Size 144KB Usage Single Page Application Usage Low

Angular is the first in the list of framework (or MVC application framework) classes. The most popular Angular version currently is 1.x, which extends HTML with two-way data binding while decoupling DOM operations and application logic.

Although version 2 (and now version 4!) has been released, Angular 1.x is still in development.

Advantages:

Popular framework being used by some big companies
Develop modern web applications The program's solution
is part of the standard MEAN stack (MongoDB, Express.JS, AngularJS, NodeJS) and there are many articles and tutorials available

Disadvantages:

Steep learning curve
Large code base
Cannot upgrade to Angular 2.x

Angular 2.x (now Angular 4.x)

Angular 2.0 was released in September 2016. This is a complete rewrite that introduces a modular component-based model created using TypeScript. Angular 4.0 was released in March 2017.

Angular 2.x is completely different from v1 and is not compatible with other versions - maybe Google should give the project a different name!

Advantages:

The solution for developing modern web applications
is the standard MEAN stack For developers familiar with statically typed languages such as C# and Java, TypeScript offers several advantages.
Disadvantages:

Steep learning curve

Big code Library
cannot be upgraded from Angular 1.x
Angular 2.x is harder to understand than 1.x
If you encounter any problems during the learning process or want to obtain learning resources, welcome to join the learning exchange group
React

##React

Angular Type Frame Website angular.io Knowledge Base github.com/angular/angular.js ##Current version Developer Release Date Size ##Usage Single page application Usage Low





4.1
Google
9 2016 Month
Minimum 450kb

Type Framework Website facebook.github.io/react/ Knowledge Base github.com/facebook/react Current version 15.5.4 Developers Facebook and Contributors Published Date March 2013 Size 21kb minutes Usage Single Page Application Usage low Statistics show that the usage of React seems to be low because it is used in applications rather than websites.










	#React is a JavaScript library used to build user interfaces, and it was also the most popular class library last year. It focuses on the "View" part of Model-View-Controller (MVC) development, using it you can easily create state-preserving UI components. It is one of the preferred class libraries for implementing virtual DOM. Its memory structure can efficiently calculate differences and page updates are more efficient.

Advantages:

Small, efficient, fast and flexible

Simple component model
Good documentation and online resources
Server-side rendering possible
Currently popular, experienced Rapid growth
Disadvantages:

Need to learn new concepts and syntax

Building tools are very important
Need other class libraries or frameworks to provide model and Controller parts
With code that modifies DOM and others Library incompatibility
Learn more about React the ES6 Way
Vue.js

Vue.js

Type Framework Website vuejs.org Knowledge Base github.com/vuejs/vue Current version 2.0 Developer Evan You Release Date 2014 February Size Minimum 19kb

##Usage

Single page application

Usage

Low

Vue.js is a lightweight progressive framework for building user interfaces. It provides a React-like virtual DOM-driven view layer that can be integrated with other class libraries to build powerful single-page applications. The framework was created by Evan You, who had previously worked on AngularJS and extracted his favorite parts of AngularJS.

Vue.js uses HTML template syntax to bind the DOM to instance data. Models are pure JavaScript objects that update views when data changes.

Advantages:

Can be used quickly and is increasingly popular
It is easy to improve to a high level Developer satisfaction
Low dependencies, good performance

Disadvantages:

A newer project – risk may be greater
Partially dependent on developers for updates
Compared to others Framework, fewer resources

Backbone.js

##Backbone.js Type Framework Website backbonejs.org Knowledge Base github.com/jashkenas/backbone/ Current version 1.3.3 Developer Jeremy Ashkenas Published Date October 2010 Size Minimum 8kb Usage Single page application Usage Low

Backbone.js is one of the earliest client-side options to provide the MVC structure common in server-side frameworks. Its only dependency is Underscore.js.

Backbone.js claims to be a library because it can be integrated with other projects, but I think most developers think of it as a framework.

Advantages:

Disadvantages:

Ember.js is one of the frameworks based on the Model-View-ViewModel (MVVM) pattern. It implements templating, data binding and class libraries in a single package.

Advantages:

Provides a single solution for client applications
Developers Instantly improve development productivity – it uses jQuery
Good backward compatibility and upgrade options
Adopts modern web development standards

Disadvantages:

Large distributed type
Compared with other Compared with the framework for the development of widget structure, it is very huge
The learning curve is steep

Knockout.js

Ember.js Type Website Knowledge Base Current version Developer Release Date Size Usage Usage


Framework
emberjs.com
github.com/emberjs/ember.js
2.15.0
Ember team
December 2011
Minimum 95kb
Single page application
Low

Knockout.js
Type	Framework
Website	knockoutjs.com
Knowledge Base	github.com/knockout/knockout
Current version	3.4.2
Developer	Steve Sanderson
Release date	July 2010
Size	Minimum 59kb
Use	Single page application
Usage	Low

Knockout.js is the earliest MVVM A framework that ensures that the UI stays in sync with the underlying data, with templates and dependency tracking.

Advantages:

Small and lightweight, no dependencies
Excellent browser support, Can support IE6
Good documentation resources

Disadvantages:

Larger projects can become complex
Development has slowed
Usage appears to be waning

More frameworks and libraries

The following projects, although not particularly popular, are worth considering:

Polymer – cross-browser support for HTML5 Class library for web components
Meteor – A full-stack platform for web applications
Aurelia – A relatively new, A lightweight cross-platform framework
Svelte – a new project that converts the framework source code into clean JavaScript
Conditioner.js – a Class library that automatically loads and unloads modules based on state

Tools: Perform common tasks

Build tools to automatically perform various web development tasks, such as preprocessing, compilation, optimization Images, minified code, code analysis, running tests, and more. Tasks can be managed uniformly in an executable package.

The most popular tools currently are as follows:

Gulp.js

##Current version 3.9.1 Downloads per month 300 Wan

Gulp.js
Website	gulpjs.com
Knowledge Base	github. com/gulpjs/gulp

#Although Gulp was not the first task execution tool, it quickly became the most popular. Using easy-to-read JavaScript code, Gulp loads source files into streams and manages the data through various plugins before outputting it to the build folder. Checking Gulp.js before any other options is easy, fast and fun.

NPM

npm is a Node.js package manager, but its scripting tools can be used to run common tasks. This is a great choice for simple projects with a few dependencies. However, it may become less applicable to more complex tasks.

Grunt

##NPM Website Knowledge Base current Version Monthly downloads


npmjs.com
github.com/npm/npm
4.5.0
3 million

##Grunt Website gruntjs.com Knowledge Base github.com/gruntjs/grunt current Version 1.0.1 Monthly downloads 2 million

Grunt is One of the first JavaScript task execution tools to see mass adoption, but its speed and complex JSON configuration led to the rise of Gulp. Now that these issues have been resolved, Grunt remains a popular choice.

Tools: Module Binding

Managing multiple JavaScript files has become a cumbersome thing. By default, browser files are not compiled, so their dependencies must be loaded or connected in the appropriate order. While there are options like ES6 modules and CommonJS, browser support is limited, so module binding becomes important.

WebPack

WebPack Website webpack.js.org Knowledge Base github.com/webpack/webpack Current version 2.5.1 Downloads per month 6 million

Webpack supports all popular module options and has become synonymous with React development. Although Webpack claims to be a module bundler, it can already be used as a universal task runner.

Browserify

Browserify Website browserify.org Knowledge Base github.com/substack/node-browserify Current version 14.3.0 Monthly downloads 2.6 million

Browserify supports CommonJS modules that Node.js is using, and it compiles all modules into a single browser-compatible file.

RequireJS

RequireJS Website requirejs.org Knowledge Base github.com/jrburke/r.js Current version 2.3.3 Downloads per month Millions

RequireJS is an in-browser module loader that can also be used in Node.js.

Tools: Code Analysis

Code analysis tools are used to analyze code for potential errors or deviations from syntax standards. An unclosed parenthesis or undeclared variable will always be detected.

ESLint

ESLint is a pluggable code analysis tool. Each rule is a plugin and therefore can be configured to personal preference.

JSHint

##ESLint Website Knowledge Base current Version Monthly downloads


eslint.org
github.com/eslint/eslint
3.19.0
6 million

##JSHint Website jshint.com Knowledge Base github.com/jshint/jshint current Version 2.9.4 Monthly downloads 2 million

JSHint is A flexible JavaScript code analysis tool that balances real errors with old syntax.

JSLint

JSLint Website jslint.com Knowledge Base github.com/reid/node-jslint Current version 0.10.3 Monthly download 50000

JSLint One of the earliest code analysis tools, it implements a strict set of default rules.

Tools: Unit Testing

The task of test-driven development requires writing code to test your own code. There are many options out there, including Ava, Tape and Jest, but the three most popular tools currently are:

Mocha

##Mocha Website Knowledge Base Current version Monthly download Mocha is a JavaScript testing framework that can run tests in Node.js or the browser. It supports asynchronous testing and is often used with Chai, which allows test code to be expressed in a readable way.


mochajs.org
github.com/mochajs/mocha
3.3.0
5million

Jasmine

Jasmine Website Knowledge Base Current version Downloads per month Jasmine is a behavior-driven testing tool that can automatically test UI and interactions in the browser.


jasmine.github.io
github.com/jasmine/jasmine-npm
2.6.0
2 million

QUnit

QUnit is a unit testing framework that can check function results when specific parameters are entered. It also reports test results to ensure that no specific code branches are missed.

Summary and Suggestions

The most streamlined framework at present is React, and other frameworks are also developing towards popular trends.

If you need a secure, versatile web application, consider using Vue.js.

Monolithic frameworks are no longer popular. If you need strict structural management of a larger project, AngularJS is a good choice. Currently most people stick to Angular 1.0, but in the long run, if you are willing to learn TypeScript, Angular 4.x is a better choice.

Although jQuery is not very popular now and is rarely mentioned in technology news, there is no denying that it is actively developed and is a powerful tool for websites and applications. jQuery has a gentle learning curve and is well understood by many developers around the world.

If you want to be adventurous, try Svelte which is an interesting client/server framework that pre-renders JavaScript at build time and could change the way we develop.

Tool selection varies from project to project. Although most developers currently use Gulp, WebPack is becoming more and more popular. At the same time, you can’t miss testing tools such as ESLint and Mocha.

##QUnit Website Knowledge Base github.com/kof/node-qunit Current version 1.0.0 Monthly download 25000

The above is the detailed content of Comparison of the latest front-end frameworks, libraries, and tools. For more information, please follow other related articles on the PHP Chinese website!