And before we present the list, it is also worth distinguishing between terms ‘frameworks’, ‘libraries’ and ‘tools’ in the context of software development:
- Framework – an abstraction that provides a standard way to make applications, a large portion of functionality like events, data binding, storage. JS examples: Node, Electron, Angular, Backbone.
- Library – usually a collection of certain functionality, including events, cookies, network requests; in form of a file with functions that perform some tasks. JS examples: jQuery, React, Socket.io, Bootstrap.
- Tool – a smaller assistant to make the development process easier, in terms of issues like performance, maintenance, etc. Things like compilers, image compressors, task runners, some JS examples are Browserify, JSLint, Mocha.
What we are highlighting here, are tools and libraries every JS developer should master, or at least be aware of, to stay relevant.
React is a JS library introduced by Facebook engineers in 2011 and then released as an open-source. ReactJS offers new ways to render web pages, a dynamic UI, high performance and several other advantages. One of the key benefits is reusability of code components, which is especially useful and a time-saver when dealing with system upgrades. Components are isolated and do not cause changes in each other.
Data binding is one direction (down) to enable a stable code, virtual DOM to increase the speed and constant improvements by developer community bring React.js to the top. In addition, the same engineers crafted React Native – a mobile app development framework, serving Android and iOS platforms.
- High test coverage
- HTTP helpers (caching, redirection, etc.)
- View system supporting multiple engines
- Fast execution for general apps
Why use Express? It is great for single page applications, websites, HTTP APIs. One of the most helpful features to programmers is the ability to build APIs relatively easy.
Get Express.js framework on Github.
In simple terms, Angular is a popular and single solution to produce modern web apps, typically single-page apps. It is a part of the already standard MEAN stack and is being constantly updated – the current version is 4.4.6. Though, on the flip side, the older and newer version are incompatible, which is kind of strange.
Main benefits of Angular are:
- Automatic code-splitting
- Command line tools
- Ready for unit testing
- 2-way data binding
Get the latest version of Angular on Github.
When it comes to desktop apps, this framework has been gaining traction recently as a fine tool to build cross-platform applications and websites. Electron is based on Node.js and Chromium engine, and supports the whole HTML, JS, CSS pack. Nice examples of apps on Electron are Slack, Docker, Jibo and even GitHub desktop.
It is publicly available, as well as compatible with Windows, Mac and Linux systems. The framework includes pre-built demo apps APIs, debugging with Chromium tools, the ability for unit tests inside the environment and safe code distribution.
The drawback with this tool is the size of updates – due to bundling with Chromium, it is around 40Mb.
Get Electron framework on Github.
Get Gulp.js on Github.
NPM works with 2 types of tasks: default (for common issues, like tests) and arbitrary, i.e. your own tasks. Many developers prefer this tool over Gulp or Grunt, firstly because of the larger amount of packages/plugins, and fewer debugging or compatibility issues. NPM-run scripts are powerful, convention-based and work for cross-platform projects.
Download the latest NPM version on Github.
Webpack’s strong characteristics are:
- Code splitting – into several pieces to reduce loading time;
- Optimizations – reducing the size, controlling chunks loaded initially and at runtime, etc.
- Bundling – a single bundle or few parts to load asynchronously;
- Resolving dependencies while compiling;
- Modular plugin system – enabling any task possible;
- Possibility to use as a task runner.
It also has some cons, like the inability to load files found during runtime. Thus, among other module bundles, you may find Browserify, RequireJS, Rollup, JSPM.
Get Webpack tool on Github.
A tool for another important aspect of programming – code supervision to detect errors. We are all humans and will miss a closing bracket or a variable once a while. Analyzing the code for potential flaws is called ‘linting’, thus the name ESLint for one of the most widely used linting JS tools. In many ways similar to JSLint and JSHint.
Get the latest edition on Github.
Going back to JS frameworks, we’ll finish with a more progressive framework to develop user interfaces – Vue.js. It is an open source, lightweight (20 Kb zip), virtual DOM library/framework, created out of Angular. Vue utilizes an HTML syntax for data binding and provides tools for tasks like routing, scaffolding, animations etc.
Somewhat similar to React, Vue seems to be gaining adoption among developers recently because it is simple, it performs well and supports all the browsers. And though it also may bring risks as new and trendy project with fewer resources, it is worth following what updates Vue’s vast number of contributors may introduce tomorrow.
Download Vue.js on Github.
jQuery foundation also offers related and useful tools like jQuery UI, jQuery Mobile, a CSS selector engine called Sizzle. With jQuery UI, for instance, allows designing and tweaking your own user interface for web applications, reduction of code for interactive features, etc. jQuery suits perfectly to create dynamic web pages.
The trick with jQuery is that it also is perceived as outdated by many developers. How so? Many argue that it became inundated with mediocre developers that had actually turned it into a server-side library, and a DOM-centric paradigm could be a real headache. Even so, this JS giant cannot be abandoned yet.
Get the latest jQuery version from Github.