Best JavaScript Frameworks, Libraries and Tools to Use in 2019
The number of JavaScript frameworks, libraries and tools seems to have exceeded the number of developers. At the end of 2018, a quick search on GitHub showed 2.3 million JavaScript projects. npm has become the world's largest module system, with 700,000 available software packages on npmjs.com and billions of downloads per month.
December 6, 2018: The article has been updated to reflect the current status of the JavaScript ecosystem. This year's update is sponsored by Sencha. Thank you for supporting the partners who made SitePoint possible!
This article aims to explain the basics and basic differences between the most popular client-side JavaScript frameworks, libraries and tools. Whether they are suitable for you is another question. Choose one and stick to it for a while. Note that whatever you choose, your favorite option will be replaced by something better!
li.toc-h3 { margin-left: 20px; } li.toc-h4 { margin-left: 40px; } Key Points
- React remains the first choice for building user interfaces, especially single-page applications, thanks to its efficient virtual DOM and component-based architecture.
- Vue.js has received praise for its simplicity and flexibility, making it an excellent choice for developers looking for progressive frameworks that are easy to integrate with other libraries.
- Angular provides a comprehensive framework solution, especially in its latest version (2), which is heavily backed by Google and focuses on TypeScript, which attracts developers familiar with statically typed languages.
- jQuery, despite the decline in hype, is still relevant and widely used in many projects because it is easy to use and has extensive compatibility across a variety of web platforms.
- Webpack and ESLint are emphasized as essential tools in modern JavaScript development, used for module bundling and code quality assurance, respectively.
- Sencha Ext JS is considered a powerful enterprise-level framework that provides a wide range of UI components and tools, with powerful commercial support and training options.
Catalog
- Catalog
- Tough Terms
- Library
- Frame
- Tools
- Don't label me!
- JavaScript frameworks and libraries
- jQuery
- React
- AngularJS 1.x
- Angular 2 (now 7.x)
- Vue.js
- Sencha Ext JS
- Lodash and Underscore
- Backbone.js
- Ember.js
- Knockout.js
- Projects worth paying attention to
- Tool: General Task Runner
- Webpack
- Gulp.js
- npm
- Grunt
- Tool: Module Bundler
- Browserify
- RequireJS
- Tool: Code Style Check
- ESLint
- JSHint
- JSLint
- Tool: Test Suite
- Jest
- Mocha
- Jasmine
- Tools: Other Tools
- Summary and Suggestions
- Comments
Please accept the following terms and conditions before reading this article! ...
- The JavaScript environment changes every day. This article will be outdated the moment it is published!
- By "best" I mean "the most popular/used/hyped general project". All projects have free/open source options, but the list may not contain your favorite projects.
- Stopped items (such as YUI) are not included, even though they are still very high on the network.
- Refer to client projects only. Some work on the server side, but the list does not include pure server-side frameworks such as Express.js or Hapi. The information on each project is intended to be brief in order to provide an overview of further research.
- Each project provides a usage popularity indicator, but the statistics are well known to be difficult to sort out and can be misleading.
- I am biased. You have bias, too. Others have biases too! I haven't tried every tool here and will declare my favorite tool, but you should make your own assessment based on your needs.
- SitePoint and I are neither responsible for any disastrous decisions you make!
The terms "framework", "library" and "tool" may have different meanings for different people at different times, depending on the context. Common definition used here:
Library
Library is an organized and useful collection of features. A typical library may include functions that handle strings, dates, HTML DOM elements, events, cookies, animations, network requests, and more. Each function returns values to the calling application, which you can implement according to your choice. Think of it as a series of automotive components: You can use any component at will to help build a car that can drive properly, but you have to build the engine yourself.
Libraries usually provide higher levels of abstraction, thus simplifying implementation details and inconsistencies. For example, you can implement Ajax using the XMLHttpRequest API, but this requires several lines of code and there are slight differences between browsers. The library can provide simpler ajax() functions, so you can focus on higher levels of business logic.
Library can reduce development time by 20% because you don't have to worry about finer details. Disadvantages:
- Errors in the library may be difficult to find and fix
- The development team cannot guarantee that the patch will be released quickly
- Patches may change the API and cause significant changes to the code.
Framework is the skeleton of the application. It requires you to handle the software design in a specific way and insert your own logic at certain points. You will usually provide functions such as events, storage and data binding. Using the car's analogy, the frame provides a working chassis, body and engine. You can add, remove, or adjust certain components, provided the vehicle is still running.
Frameworks usually provide higher levels of abstraction than libraries and can help you build the first 80% of your project quickly. Disadvantages:
- If your application is out of scope for the framework, the last 20% can be difficult--If not impossible
- Frame update or migration can be difficult
- The core framework code and concepts rarely adapt well to the times. Developers will always find a better way to do the same thing. Tools
Tools can assist in development, but are not an indispensable part of the project. Tools include build systems, compilers, translators, code compressors, image compressors, deployment mechanisms, etc.
Tools should provide a simpler development process. For example, many programmers prefer Sass over CSS because it provides code separation, nesting, rendering time variables, loops, and functions. The browser does not understand the Sass/SCSS syntax, so the code must be compiled into CSS using the appropriate tools before testing and deployment.
Don't label me!
The differences between libraries, frameworks, and tools are rarely clear. The framework may contain libraries. The library can implement framework-like methods. Tools can be crucial for both. I've tried marking each item, but the scope may vary.
If this sounds too complicated, you might consider writing native JavaScript. This is great, but you end up writing your own library and/or framework code that has to be maintained. JavaScript itself is an abstraction above the browser and operating system abstraction!
JavaScript frameworks and libraries
Items arranged in approximate order of use/popularity/hype...
jQuery
Pros:
Distribution size
- The learning curve is smooth, and there is a lot of online help
- Simple grammar
- Easy to expand
- Disadvantages:
- Add speed overhead for native API
- Now browser compatibility has improved, so it is not very important
- Usage rate tends to stabilize
- Some resistance of the industry to unnecessary use.
React
React usage seems to be low in statistics, probably because it is used for applications rather than websites. Nearly 70% of developers claim they have some experience using the library.
Pros:
- Small, efficient, fast and flexible
- Simple Component Model
- Good documentation and online resources
- Server-side rendering is possible
- Still very popular and develops rapidly
- Many of the work advertises React developers
Disadvantages:
- New concepts and grammar need to be learned
- Building tools are essential
- Other libraries or frameworks may be required to provide model and controller aspects
- May be incompatible with code and other libraries that modify DOM
AngularJS 1.x
Despite the release of version 2.0 (now version 4.0!), Angular 1.x is still under development. Puzzled? See below...
Pros:
- A popular framework adopted by several large companies
- Single solution for creating modern web applications
- is part of the "standard" MEAN stack (MongoDB, Express.JS, AngularJS, NodeJS), so there are many articles and tutorials available
Disadvantages:
- The learning curve is steeper than other alternatives
- The code base is huge
- Cannot upgrade to Angular 2.x
- Although it is a Google project, Google does not seem to use it?
Angular 2 (now 7.x)
Angular 2 is completely different from v1. Neither compatible— Maybe Google should give the project a different name? !
Pros:
- Single solution for creating modern web applications
- is still part of the MEAN stack, although fewer Angular 2 tutorials are available
- For those familiar with statically typed languages such as C# and Java, TypeScript offers some advantages.
Disadvantages:
- The learning curve is steeper than other alternatives
- The code base is huge
- Unable to upgrade from Angular 1.x
- Compared with 1.x, Angular 2.x adoption rate is relatively low
- Although it is a Google project, Google does not seem to use it?
Vue.js
Vue.js binds DOM to instance data using HTML template syntax. When the data changes, the model is a normal JavaScript object that updates the view. Other tools provide tools for scaffolding, routing, status management, animation, and more.
Pros:
- Fast adoption and increasing popularity
- Easy to get started, high developer satisfaction
- Lightweight, low dependency, good performance
Disadvantages:
- May be covered up by React
- Reliance on updates for individual developers
- Less resources than alternatives
Sencha Ext JS
Pros:
- Widely available components
- Contains everything you need to create a web and mobile application
- Script customization, design tools and rapid prototyping
- Providing tools for intuitively building and styling web applications
- Business support and excellent documentation
- 30-day free trial and community version for small applications (revenues less than $10,000 per year)
- As of now, integration with frameworks other than React and Angular may be impractical—see Ext JS 7's Roadmap Plan
- Deep custom UI changes can be difficult
Pros:
- Small and simple
- Easy to learn, good documentation
- Compatible with most libraries and frameworks
- Do not extend built-in objects
- Can be used on the client or server side
- Some methods are provided in ES2015 and later JavaScript.
Backbone.js
Backbone.js claims to be a library because it can be integrated with other projects. I suspect most developers think it is a framework, although it is not as arbitrary as some others.
Pros:
- Small, lightweight and not too complicated
- Do not add logic to HTML
- Excellent documentation
- has been adopted by many applications, including Trello, WordPress.com, LinkedIn and Groupon
Disadvantages:
- A lower level of abstraction than alternatives like AngularJS (but this can be considered an advantage)
- Other components are required to implement functions such as data binding
- Recent frameworks have been far away from MVC architecture
Ember.js
Pros:
- Providing a single solution for client applications
- Developers can increase productivity immediately - it uses jQuery
- Good backward compatibility and upgrade options
- Used modern web development standards
Disadvantages:
- Distribute large files
- It is considered monolithic compared to other frameworks that are moving to smaller component structures
- Steep learning curve - this is Ember's way, or there is no way at all
Knockout.js
Pros:
- Small and lightweight, no dependencies
- Excellent browser support, traceable to IE6
- Excellent documentation
Disadvantages:
- Large projects can become complicated
- Development speed slows down
- Usage seems to be declining
Projects worth paying attention to
Hope to learn more? The following items are not very popular, but worth considering:
- Polymer - A library that enables cross-browser support for HTML5 web components
- Meteor - A full stack platform for web applications.
- Aurelia - A lightweight, cross-platform framework
- Svelte - A fairly new project that converts framework source code to native JavaScript
- Conditioner.js - A new library that automatically loads and unloads modules based on their status.
Tool: General Task Runner
Building tools automate various web development tasks such as preprocessing, compilation, module bundling, image optimization, code compression, code style checking, and running tests. Tasks are usually managed together in an executable package. The most popular options:
Webpack
Gulp.js
npm
Grunt
Tool: Module Bundler
Managing multiple JavaScript files can become cumbersome. Unless you can natively adopt the relatively new ES6 module import syntax, you must load or connect JavaScript dependencies in the browser in the appropriate order. If you need to support older browsers (any browsers released before 2018), you can use the module bundler, but the demand for these tools will decrease over time.
Browserify
RequireJS
Tool: Code Style Check
Code Style CheckAnalyze your code for potential errors or deviations from the grammatical standards. You will never miss the close bracket or undeclared variable!
ESLint
JSHint
JSLint
Tool: Test Suite
Test-driven development requires you to write code to test your code before you start writing it. Welcome to write code to test your test code!
There are many options, including Ava, Tape and Jasmine, but the three most popular options are...
Jest
Mocha
Jasmine
Tools: Other Tools
Despite my best efforts, I admit that not everyone loves JavaScript! Compilers such as TypeScript, LiveScript and CoffeeScript can make your development life a little more enjoyable. Alternatively, consider using Babel to convert modern, concise ES2015 source code into cross-browser-compatible ES5 code.
There are many JavaScript-driven HTML template engines, including Mustache, Handlebars, Pug (Jade) and EJS. I prefer lightweight options that preserve JavaScript syntax, such as EJS and doT.
Lastly, why write your own documentation when you can automate it? ES2015-compatible document generators include ESDoc, JSDoc, YUIdoc, documentation.js and Transcription.
Summary and Suggestions
If you follow the wisdom of the masses, the current momentum is behind React, and other libraries are also moving towards similar technological directions. This is a safe career choice, but you should also consider Vue.js or React-compatible but smaller Preact.
Monographed frameworks are no longer popular, but AngularJS is still a popular choice if you need to provide a strict structure for large projects. Most developers stick with version 1.0, but this may be out of necessity and not choice. Version 2 may be a safer option in the long run, but you need to learn TypeScript.
Sencha's Ext JS is a great option for companies (small business to enterprise) who want to have both frameworks and pre-built integrated components and tools (including access to commercial support). Ext JS also easily integrates its powerful component library with React and Angular, which is a great choice for developers who want to implement pre-built components instead of building them yourself.
Don't ignore jQuery. It's not stylish and rarely mentioned in tech news, but it's under active development and is more than enough for websites and applications. jQuery's learning curve is smooth and is understood by many developers around the world.
New translator options like Svelte and Rawact will convert framework code to native JavaScript if you want to take risks. The framework dependencies have been removed, the code is smaller and it runs faster.
The choice of tools is less important and may vary by project. Most Webpack, Gulp or npm scripts. For testing you can use ESLint and Jest, but there are many other alternatives to try.
That is, each project, team, and skill set are different. You have limited time to evaluate, so it's tempting to use what you know. This post will receive comments, recommended FrameworkX, but when you have a hammer, everything looks like a nail.
Lastly, never forget that libraries, frameworks and tools are optional! JavaScript development has revolutionized over the past decade; we have evolved from several basic auxiliary libraries to incredible choices. It's easy to fall into the trap of increasing complexity or switch to the latest popular framework every few months. Always consider native JavaScript – especially in small and personal projects. The knowledge you gain will not be outdated and will become invaluable when evaluating frameworks for other projects.
Am I missing, dismissed, or failed to praise the advantages of your favorite JavaScript libraries, frameworks, and tools? Of course, I did it! Welcome to comment...
Frequently Asked Questions about Top JavaScript Frameworks, Library and Tools
What is the main difference between Angular and React?
Angular and React are both popular JavaScript frameworks, but they have some key differences. Angular, developed by Google, is a mature MVC framework that provides a powerful set of features to build complex applications. It uses two-way data binding and real DOM. React, developed by Facebook, on the other hand, is a library for building user interfaces. It uses one-way data binding and virtual DOM, which makes it faster and more efficient when rendering large lists and datasets.
How to choose the right JavaScript framework for my project?
Choose the right JavaScript framework depends on several factors. You should consider the size and complexity of the project, the learning curve of the framework, the size of the community and available resources, and the performance and scalability requirements of the application. It is also important to consider the long-term viability of the framework, as you want to choose a framework that will continue to be supported and updated in the future.
What are the advantages of using Vue.js compared to other JavaScript frameworks?
Vue.js is known for its simplicity and ease of use. It has a gentle learning curve, making it a good choice for beginners. It also has a flexible architecture that allows you to choose between lightweight, library-like settings or fully-featured framework settings. Vue.js also uses virtual DOM and provides efficient re-rendering and component-level caching for fast performance.
What is the role of Node.js in JavaScript development?
Node.js is a runtime environment that allows JavaScript to be run on the server side. This means you can use JavaScript to build the front-end and back-end of your application, which will improve development efficiency and simplify code maintenance. Node.js also has a huge ecosystem of libraries and tools and is known for its high performance and scalability.
How important is it to learn TypeScript when using JavaScript framework?
TypeScript is a superset of JavaScript that adds static types to the language. Learning TypeScript to use JavaScript frameworks is not necessary, but it may be beneficial. TypeScript can help catch errors at compile time rather than runtime, resulting in more robust code. It is especially useful when dealing with large code bases and teams.
What are the benefits of using JavaScript libraries like Lodash?
Lodash is a utility library that provides useful ways to manipulate arrays, objects, and other data types in JavaScript. It can help make your code more concise, readable and more efficient. The Lodash methods are also optimized for performance, so in some cases they may be faster than native JavaScript methods.
How does Ember.js compare to other JavaScript frameworks?
Ember.js is a fully functional framework that provides many built-in features such as routers and data layers. This can make building complex applications easier, but it also means more content needs to be learned. Ember.js follows the principle of conventions over configuration, which can speed up development, but may not be as flexible as other frameworks.
What are the key features of the Polymer library?
Polymer is a library developed by Google for building web components. It provides a set of features for creating custom HTML elements, encapsulating CSS and JavaScript in these elements, and using data binding and event processing. Polymer also supports one-way and two-way data binding.
How does jQuery work in a modern JavaScript environment?
jQuery is a library that simplifies HTML document traversal, event processing, and animation. While it's not as necessary as it used to be due to the improvements in native JavaScript and the rise of modern frameworks, jQuery is still widely used and is a good choice for simpler projects or maintaining legacy code.
What are some emerging JavaScript frameworks and libraries worth paying attention to?
Some emerging JavaScript frameworks and libraries include Svelte, a compiler-based framework designed to provide a simpler and faster development experience; Next.js, a framework for server-side rendering of React applications; And Gatsby, a static site generator based on React. These tools are becoming more popular and may become more important in the future.
The above is the detailed content of Best JavaScript Frameworks, Libraries and Tools to Use in 2019. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
