1. Build & Automate
Webpack statically analyzes all modules that JavaScript applications depend on, generates a dependency graph, and packages them into several static files.
Grunt to automate repetitive and time-consuming tasks. The Grunt ecosystem is very large with over 6010 plugins.
After the release of Grunt, Gulp took a completely different approach, using JavaScript functions to define tasks. It has over 2770 plugins and provides better control.
Browserify enables developers to use CommonJS modules in the browser. Like in the node environment, developers use require('modules') to organize references and dependencies between modules, and Browserify packages these dependencies into JS files that browsers can directly reference.
Brunch is very simple and fast. Brunch's configuration file is very simple, and the getting started documentation is very detailed. Brunch will automatically generate a Source Map, which is convenient for developers to debug.
Yeoman can be used in any programming language (JavaScript, Python, C#, Java, etc.). It is a scaffold for front-end development with 6213 plugins.
2. IDE & Editor
WebStorm is a powerful JavaScript IDE. It supports multiple frameworks and CSS languages, including front-end, back-end, mobile and desktop applications. WebStorm can seamlessly integrate third-party tools such as syntax checking, building linters, and more. It provides code completion, real-time error monitoring, navigation, built-in console, various plug-ins and other system functions.
Atom is developed by the GitHub team. Developers can easily customize Atom. Atom comes with a package management tool, code completion, filesystem browser, support for multiple platforms, and other useful features.
Visual Studio Code is an IDE developed by Microsoft that supports TypeScript. It provides code completion, syntax highlighting, support for Git commands, and more. In addition, it has a lot of plugins.
Brackets is a lightweight open source editor. It focuses on visualization tools that can help developers develop web applications. Brackets supports live preview as well as inline editing.
3. Documentation
Swagger provides a set of rules for describing APIs. Using Swagger, you can create clear documentation and automate API-related operations (such as functional testing).
JSDoc can generate API documentation of JavaScript applications, libraries, and modules according to the annotation information in JavaScript files. JSDoc can be used to manage large projects.
jGrouseDoc is an open source tool that generates Jaavdoc-like source documentation from JavaScript comments. It can generate documentation not only for variables and functions, but also for other elements such as modules.
YUIDoc is based on Nodejs and can generate API documentation from comments in the documentation. It uses a syntax similar to Javadoc and Doxygen, supports live preview, supports various languages, and supports markup languages.
Docco is a free documentation tool written in Literate CoffeeScript. It generates HTML documentation from comments in the code. Docco is not limited to JavaScript, but also supports Python, Ruby, Clojure and other languages.
4. Test
Jasmine is a Behavior Driven Development (BDD) framework for testing JavaScript code. It doesn't depend on any 3rd party modules and doesn't require DOM. Its syntax is very simple and easy to understand, making it easy to write tests. In addition, it can also be used to test Node.js, Python and Ruby.
Mocha is a functional testing framework for testing Node.js as well as browser-side JavaScript. As the preferred testing framework for developers, it can freely write test groups, provide detailed test reports, and make asynchronous testing very simple. Mocha is often used with the assertion library Chai to verify test results.
PhantomJS is used for front-end unit testing. Since PhantomJS is a no-interface Webkit browser engine, using PhantomJS scripts can run faster compared to using browser tests directly. It supports various web standards such as JSON, Canvas, DOM manipulation, SVG and CSS selectors.
Protractor is an end-to-end testing framework for testing Angular applications. It is built on WebDriverJS, which can simulate real users through browser events or native events to test applications.
5. Debug
The JavaScript Debugger was developed by the Mozilla Developer Network (MDN) and can be used independently to debug Node.js code, or for other browsers. Firefox provides local and remote debugging capabilities, and Firefox for Android is also used to debug applications running on Android.
Chrome Dev Tools provides a range of tools for debugging JavaScript code, editing CSS, and testing application performance.
ng-inspector is a browser plugin for Firefox, Chrome and Safari that helps developers develop, understand and debug AngularJS applications. It provides real-time updates, DOM highlighting and more.
Augury is a Chrome plugin that can be used to debug Angular 2 applications. It allows developers to directly view the application structure, operational characteristics and state changes.
6. Safety
Snyk is a paid service for discovering, fixing and preventing known vulnerabilities in JavaScript, Node.js and Ruby applications. Snyk has its own vulnerability library, as well as vulnerability data from NSP and NIST NVD. It allows developers to fix these security holes with their patches and updates.
The Node Security Project provides tools for scanning dependencies to detect vulnerabilities. NSP uses its own vulnerability data, as well as vulnerability data from NIST NVD. NSP supports integration with GitHub and CI software, real-time monitoring and alerting, and can provide advice on how to fix Node.js application vulnerabilities.
RetireJS is an open source dependency monitoring tool. It contains several components including command line tools, Grunt plugins, Firefox and Chrome plugins, Burp and OWASP ZAP plugins. Retirejs collects mobile vulnerability data from NIST NVD, bug tracking systems, blogs and mailing lists.
Gemnasium is a paid tool, but there are free plans. It supports various technologies such as Ruby, PHP, Bower, Python and npm. Gemnasium provides many very useful features, such as automatic updates, real-time alerts, and Slack integration.
OSSIndex supports multiple ecosystems (Java, JavaScript and .NET/C#), as well as multiple platforms such as NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal and MSI. It collects vulnerability data from NVD as well as other sources.
7. Code optimization & analysis
JSLint is a web service for verifying the code quality of JavaScript. When it diagnoses a problem, it returns the approximate location of the problem and an error message. JSLint can analyze some coding conventions and syntax errors.
JSHint can find bugs in JavaScript as well as some potential problems. JSHint is a static code analysis tool designed to help developers write large programs. It can diagnose syntax errors, implicit type conversions, etc., but it can't tell if your app is correct, performs well enough, or leaks memory. JSHint is a fork of JSLint.
ESLint is an open source diagnostic tool for JSX and JavaScript applications. It can help developers find suspicious or code that does not conform to specific programming norms. It helps developers find problems in JS code before executing the code, saving a lot of time. ESLint is written in Node.js and can be installed using NPM.
Flow is a static type checker for JavaScript code, developed by Facebook. Flow can detect type errors while coding and give them a hint.
8. Package management
Bower is a package manager for managing front-end dependencies, created by Twitter. It provides a large number of available dependency packages to help JavaScript developers manage front-end dependent JS libraries more easily.
NPM is the abbreviation of node package manager, in fact NPM packages can be used for front-end and back-end. It is a JavaScript package management system and the largest dependency library in the world with over 475,000 modules.
Yarn is a new JavaScript package management tool developed by Facebook, Google, Exponent and Tilde. Compared to NPM, it addresses security, performance, and consistency issues.
Duo draws on the experience of Component, Browserify and Go to simplify the process of building large-scale web applications.
Source: Qianfeng HTML5