Comparison of the latest front-end frameworks, libraries, and tools

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

##SizeMinimum 30kb##UseUsage

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

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 DateApril 2012SizeMinimum 4kb – 24kbUseGeneral##UsageUnderscoreTypeWebsite##Knowledge Base github.com/jashkenas/underscoreCurrent version1.8.3Developer Jeremy AshkenasRelease DateOctober 2009SizeMinimum 6kbUsageGeneralLow

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

##AngularJSTypeFrameworkWebsiteangularjs.org Knowledge basegithub.com/angular/angular.jsCurrent version1.6.4DeveloperGoogleRelease DateOctober 2010Size144KBUsageSingle Page ApplicationUsageLowAngular 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)

AngularTypeFrameWebsiteangular.ioKnowledge Basegithub.com/angular/angular.js##Current versionDeveloperRelease DateSize##UsageSingle page applicationUsageLow

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
343599877, let’s learn front-end together!

• 
  
  React

##React

4.1
Google
9 2016 Month
Minimum 450kb

TypeFrameworkWebsitefacebook.github.io/react/Knowledge Basegithub.com/facebook/reactCurrent version15.5.4DevelopersFacebook and ContributorsPublished DateMarch 2013Size21kb minutesUsageSingle Page ApplicationUsagelowStatistics 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

TypeFrameworkWebsitevuejs.orgKnowledge Basegithub.com/vuejs/vueCurrent version2.0DeveloperEvan YouRelease Date2014 February SizeMinimum 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.jsTypeFrameworkWebsitebackbonejs.orgKnowledge Basegithub.com/jashkenas/backbone/Current version1.3.3DeveloperJeremy AshkenasPublished DateOctober 2010SizeMinimum 8kbUsageSingle page applicationUsageLowBackbone.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:

##Small size, light weight, low complexity
No HTML added Logic
File Enrichment
Uses many apps including Trello, WordPress.com, LinkedIn, and Groupon

Disadvantages:

Compared with other frameworks such as AngularJS, the abstraction level is lower
Requires additional Components to implement data binding and other functions
The latest framework no longer uses the MVC architecture
Ember.js

Ember.jsTypeWebsiteKnowledge BaseCurrent versionDeveloperRelease DateSizeUsageUsage

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

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 version3.9.1Downloads per month300 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 WebsiteKnowledge Basecurrent Version Monthly downloads

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

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

##Grunt Websitegruntjs.comKnowledge Basegithub.com/gruntjs/gruntcurrent Version 1.0.1Monthly downloads2 millionGrunt 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 Websitewebpack.js.orgKnowledge Basegithub.com/webpack/webpackCurrent version2.5.1Downloads per month6 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 Websitebrowserify.orgKnowledge Basegithub.com/substack/node-browserifyCurrent version14.3.0Monthly downloads2.6 million Browserify supports CommonJS modules that Node.js is using, and it compiles all modules into a single browser-compatible file.

RequireJS

RequireJS Websiterequirejs.orgKnowledge Basegithub.com/jrburke/r.jsCurrent version2.3.3Downloads per monthMillions 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 WebsiteKnowledge Basecurrent Version Monthly downloads

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

JSHint

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

##JSHint Websitejshint.comKnowledge Basegithub.com/jshint/jshintcurrent Version 2.9.4Monthly downloads2 millionJSHint is A flexible JavaScript code analysis tool that balances real errors with old syntax.

JSLint

JSLint Websitejslint.comKnowledge Basegithub.com/reid/node-jslintCurrent version0.10.3Monthly download50000JSLint 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

##MochaWebsiteKnowledge BaseCurrent versionMonthly downloadMocha 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 WebsiteKnowledge BaseCurrent versionDownloads per monthJasmine 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 WebsiteKnowledge Basegithub.com/kof/node-qunitCurrent version1.0.0Monthly download25000

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.

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!