Skip to main content

5 JavaScript Tools to Look Out For in 2021

By Craig Buckler
JavaScript
Share:

The JavaScript ecosystem evolves at a rapid pace, and you know your toolset will be superseded the moment you choose it!

It’s impossible to keep up with all libraries, frameworks, and techniques, but you can observe trends and directions of movement within the industry. React.js, Vue.js, Svelte, Node.js, and Express.js will remain popular during 2021, but some interesting helper tools are bubbling to the surface.

Here are my top picks for 2021. But please don’t rely on my opinion. Evaluate them for yourself.

Rollup.js

Rollup.js is a next-generation JavaScript module bundler from Rich Harris, the author of Svelte. It compiles small chunks of code into larger single files and includes:

  • a plugin architecture

    The core system can be extended with plugins such as Babel ES5 transpiling, TypeScript integration, ESLinting, Terser minification, and even CSS processing.

  • module compatibility

    Rollup.js supports standard ES6 modules but Node-based CommonJS require() modules can be parsed with a plugin.

  • tree-shaking

    Code is statically analyzed to exclude variables, functions, and methods which aren’t used. You can therefore import a large library, but only the features you’re using will be included in the final bundle.

  • code splitting

    Rollup can split code into chunks for dynamic (on-demand) loading or multiple entry points.

Rollup.js can be executed from the command line, an npm script, and general task runners such as Gulp with or without watch options.

A rollup.config.js file can be defined for more complex configurations. For Example:

// rollup.config.js

// CommonJS plugin
import commonjs from '@rollup/plugin-commonjs';

export default {

  // primary source entry script
  input: './src/main.js',

  // output script and format
  output: {
    file: './build/main.js',
    format: 'iife'
  },

  // plugins
  plugins: [
    commonjs()
  ]

};

Rollup.js first appeared in 2018 but has been gaining momentum thanks to its speed and simplicity. You may have used it without realizing in Snowpack.

Snowpack

Snowpack is a fast front-end build tool and a direct competitor to heavyweight options such as webpack and Parcel. The benefits include:

  • instant startup
  • single build with caching
  • hot module reloading
  • dozens of plugins
  • built-in support for ES6 modules, CommonJS modules, TypeScript, Svelte, React, JSX, CSS modules, and more

Snowpack builds assets automagically. You can install it into any project as a development dependency:

npm install --save-dev snowpack

Then launch a development server:

npx snowpack dev

This opens the default index.html file in your browser. All pages are scanned for JavaScript and CSS files, which are bundled into single assets.

A final production site can be created in a build directory with:

npx snowpack build

A snowpack.config.js configuration file can define plugins and further options.

Development has been rapid, and Snowpack version 3.0 launched in January 2021. According to the website, “once you try it, it’s impossible to go back to anything else.”

Rome

Modern development requires you to install, configure, and learn a range of tools with different methods and techniques. Rome aims to unify the front-end development toolchain by providing a linter, compiler, bundler, document generator, formatter, test runner, and minifier for HTML content, CSS, and JavaScript. In essence, it’s a zero-dependency package which replaces webpack, Babel, ESLint, Prettier, Jest, and others.

Rome has been in active development throughout 2020 and, at the time of writing, only linting is supported. However, the project has gained considerable attention and the recent call for funding has exceeded more than a quarter of its $100,000 goal.

If Rome can successfully achieve its aims, it may become the only tool you need.

esbuild

Unsurprisingly, most JavaScript build tools are written in JavaScript. Speed is usually acceptable, but a compiled application will always be faster. esbuild is another JavaScript module bundler, but it’s written in Go. It claims to be:

  • 100x faster than Rollup.js
  • 173x faster than Webpack 5
  • 294x faster than Parcel 2

The timings for creating a production bundle of ten copies of three.js using default settings, minification, and source maps:

esbuild build time comparisons

esbuild achieves this speed without a cache and it still supports ES6 modules, CommonJS modules, TypeScript, JSX, tree-shaking, source maps, minification, plugins, Node.js bundling, a full API, and more.

Evan Wallace is esbuild’s single primary developer and version 1.0 is yet to be released. This may cause alarm for teams working on mission-critical applications, but updates have been arriving rapidly. Keep an eye on the project.

Waypoint

Releasing your production site to a host remains a challenge. Some offer Git-based build systems. Others use containerization processes. Many have their own weird and wonderful terminology and techniques. Presuming you successfully negotiate the complexities of an AWS build process, would you be able to switch to Azure on the whim of your boss or client?

Waypoint abstracts the release process to provide a consistent workflow to build, deploy, and release across any platform. Deployment requires a single command:

waypoint up

Waypoint is an open-source project that currently supports JavaScript, Ruby, Python, Go, and .NET projects on Kubernetes, Amazon ECS, Google Cloud Run, Azure Container Instances, Docker, Buildpacks, and more. It’s extensible and a plugin system allows it to work with any tool or platform. Following a successful deployment, Waypoint provides full access to logs, monitors, and other processes to manage your application.

Waypoint was released in mid-2020, but usage looks set to explode in 2021. The website is great and shows terminal commands being typed as you scroll. It’s worth a look even if deployment is of no interest to you!

Bonus Tools

Here are a couple of further tools which are likely to achieve critical mass in 2021 …

Eleventy

Eleventy is a Node.js static-site generator developed by Netlify’s Zach Leatherman. It’s simple, fast, and has been adopted by many movers and shakers in the web industry. And it’s still not reached version 1.0. Watch commercial usage grow substantially when that milestone is released.

For more information, see Getting Started with Eleventy.

Deno

Deno is a JavaScript runtime which uses Chrome’s V8 engine. It was developed by Ryan Dahl — the creator of Node.js — and released in May 2020. In essence, it’s Node with the benefit of a decade’s worth of hindsight.

Deno is new, and it smooths some of the wrinkles you may have encountered when developing server-side JavaScript. Primarily, it adds security and opts for browser-like ES6 modules imported from a URL rather than CommonJS modules managed by npm. Module versions are stored just once on your system, so it’s not necessary to have a multi-megabyte node_modules folder in each project.

Deno also provides a number of built-in tools so there’s less need for third-party options. It includes an upgrader, help system, Read-Eval-Print Loop (REPL), dependency inspector, linter, code formatter, test runner, documentation generator, debugger, script bundler, and platform installer.

Finally, Deno supports some of the APIs you’ll find in browsers. Most notably, fetch, window, URL, File, FileReader, and events such as load and unload.

Node.js is not dead and Deno is yet to take the world by storm, but 2021 will be an interesting year for the runtime.

Happy New Year!

2020 may have been an unusual year, but JavaScript continued to grow exponentially. Let me know if I missed your prediction for 2021.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Integromat Tower Ad