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.
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!
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 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 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.
The following is sorted by popularity:
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
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 |
Minimum 30kb | |
General | |
72.4% of websites |
Lodash | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Type | Class Library | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Website | lodash.com/ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Knowledge Base | github.com/lodash/lodash/ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Current Version | 4.17.4 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Developer | John-David Dalton | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
April 2012 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Minimum 4kb – 24kb | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
General | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Low | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Class Library | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
underscorejs.org/ | ##Knowledge Base | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Current version | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Developer | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Release Date | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Size | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Usage | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
##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:
:
AngularJS 1.x
Advantages:
Disadvantages:
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:
Steep learning curve
Advantages: Small, efficient, fast and flexible
Need to learn new concepts and syntax
|
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:
Disadvantages:
Backbone.js
Advantages:
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:
Disadvantages:
Knockout.js
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:
Disadvantages:
More frameworks and librariesThe following projects, although not particularly popular, are worth considering:
Tools: Perform common tasksBuild 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
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
ESLint is a pluggable code analysis tool. Each rule is a plugin and therefore can be configured to personal preference. JSHint
Jasmine
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 SuggestionsThe 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.
|
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!