7 tools that are transforming JavaScript development

0


It seems like every year is a bumper year for JavaScript, and 2021 is no exception. In particular, a new generation of bundlers and construction tools is challenging the inertia of “good enough” tools. Improved speed, better development experience, and better production builds are all focus areas for the new breed.

Read on for a preview of the new stable version of JavaScript tools. ESM, esbuild, Parcel, pnpm, Rollup, Snowpack and Vite are the new stars that make JS development easier.

ECMAScript Modules (ESM)

ECMAScript modules, also known as ES or ESM modules, are the official syntax for the JavaScript module. As such, it’s not technically a tool, but it has broad implications for JS development and tools. We’ve seen a lot of chaos and uncertainty for a while in the use of the JavaScript module (with Node.js landing on CommonJS syntax). But with the recent approval of ESM and its general implementation in browsers, new possibilities are opening up.

The general form of the ESM syntax is shown in Listing 1. The first line is the syntax for importing a default export. The second uses destructuring to specify the members inside the module.

Listing 1. ESM syntax

import aModule from 'module-name';
import { moduleMember, anotherMember } from 'module-name';

Even Microsoft Edge now supports ESM, so all major browsers now support it.

The browser uses modules in two ways: either in the JavaScript scripts it includes, or directly in the "module" script tag, shown in Listing 2.

Listing 2. Importing via the script module



In Listing 2, the first two script tags show how to target an absolute URL. Notice at first that you are using the src attribute, and in the second, you run the JavaScript import. The third script tag shows a relative import broadcast from the same domain. Note that when you insert a script from another domain, CORS restrictions apply.

For many years, various bundlers (most commonly Webpack nowadays) have been used to bundle scripts in order to bypass browser limitations with add-ons. Extensive browser support for ESM changes, and the next generation of tools has been developed to take advantage of this support.

However, you’ll see that bundling still has a role to play, as allowing the browser to naively request all of an app’s add-ons would result in poor performance from a multitude of requests. Grouping, minification, smart code sharing / CSS, etc. are always important for good performance.

You can see browser support for ESM here.

esbuild

esbuild is a relatively new entry in the bundler field. Like others, his fame is speed. It is written in Go as opposed to JavaScript and benefits from the built-in parallelism of Go. It also relies on intelligent use of shared memory during analysis and code generation.

You can get an idea of ​​the speed of esbuild by checking project benchmarks. The benchmarks show performance increases of 100 times and more compared to other bundlers.

By default esbuild bundles for the browser but it is also capable of bundle for Node.js. It works the same as other build tools by connecting to NPM through package.json and node_modules. It also offers a JavaScript API that you can use to bundle build commands if your needs become too complex and heavy for command line use. Listing 3 shows an example of using this API.

esbuild focuses on bundling and does not include a server in development mode. Some features, like code / CSS split, are still in progress. Other tools can use esbuild for its production bundling capabilities – see Quickly below.

As of May 2021, esbuild had ~ 25K GitHub stars and ~ 570K weekly downloads from NPM. This makes esbuild the smallest of the projects described here, but its usage is growing rapidly and its performance promises make it a tempting option.

Listing 3. Using the esbuild JavaScript API

require('esbuild').build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
}).catch(() => process.exit(1))

esbuild generates a fully self-contained bundle that incorporates your application code and all dependencies. A lot plug-ins are available to handle a variety of use cases, from Svelte to PostCSS to YAML. Out of the box, esbuild supports common types such as TypeScript, JSX, and JSON.

Parcel

I would be remiss if I didn’t mention Parcel, which is a tool similar in spirit to Webpack and Rollup (see below). In addition to lowering setup costs, Parcel claims to improve performance, although it cannot match esbuild’s claims in this regard.

Package includes No Configuration Code Splitting and Hot Module Replacement (HMR) out of the box. It also integrates many file types (like images) by default, and it can handle them without additional configuration.

Parcel has around 38,000 stars on GitHub and around 64,000 weekly downloads from NPM (weekly downloads appear to be leveling off). These stats make it a viable mid-size option.

pnpm

pnpm is not a bundler or a build tool. Instead, it is an instant replacement for the NPM dependency tool. This makes it similar to Wire for the purpose, but pnpm takes a different approach: it uses hard links to flatten the node_modules tree, thus simplifying dependency management and avoiding duplicate dependencies. You can read more about this engineering trick here.

In addition to saving disk space, this structure opens up some performance improvements, as seen in these benchmarks, which shows that pnpm outperforms other package managers in most tasks.

pnpm also includes pnpx, a tool similar to npx, for running packages.

pnpm has ~ 11K GitHub stars and ~ 191K weekly downloads from NPM. This is the default package manager for SvelteKit and is seeing strong growth in its use. pnpm appears to be a prime candidate for the next de facto standard dependency manager.

Rollup

Rollup is a bundler that allows you to use ESM syntax everywhere. It softens the various syntaxes seen in the wild (CJS, AMD, UMD, EMS, etc.) and bundles your code into a syntax that just works. Additionally, Rollup offers “tree shake,” which is the ability to analyze your code base and eliminate unused imports. This has obvious performance advantages.

Like esbuild and other bundlers, Rollup is linked to package.json and node_modules through NPM.

When using Rollup, you can basically forget about the module syntax and just use ESM. In general, Rollup aims to give you the experience of future JS development, where everything is now unified on ESM.

Rollup is quite similar to Webpack in operation, but unlike Webpack, it supports Node.js output. In addition, some developers report a simpler and smoother experience with Rollup.

Rollup does not support hot module replacement by default.

Rollup has an active community and a plug-in ecosystem. As of May 2021, it had ~ 20K GitHub stars and ~ 4.8 million weekly downloads from NPM.

Quickly

Quickly was originally a build tool specifically for Vue, but now supports general use. It became the official build solution for SvelteKit it is the same for an increasingly wide use.

Vite focuses on managing two requirements for JS development: running the development mode and building for production. Vite is not a bundler and instead entrusts the production consolidation tasks to Rollup.

Designed to be fast (quickly means fast in French), Vite boasts its fast-start development server and hot module replacement. Experience backs up Vite’s claims – these features work quite quickly compared to something like Webpack.

Vite’s speed improvements are based on exploiting ESM and using esbuild for pre-grouping. Using ESM means that Vite can offload grouping work to the browser during development and gain more granularity when determining which files will be served during edits.

Vite currently uses Rollup for production builds (to get features like CSS splitting) but may upgrade to esbuild in the future.

Vite’s development experience is its strongest selling point – its hot-swap module is really fast. It currently has ~ 27K GitHub stars and ~ 124K weekly NPM downloads, with a sharp increase in downloads seen over the past two months.

Snow coat

Snow coat is another speed driven bundler and development server. It offers fast server startup, ESM support with smart caching, fast hot-swapping of modules, and low-configuration support for various file types. Snowpack is similar in spirit to Rollup and Parcel.

Snowpack supports targeted hot module replacement for JavaScript, CSS and CSS modules out of the box. It also has a strong community of plug-ins.

Snowpack has ~ 18K GitHub stars and ~ 55K weekly downloads from NPM.

The future of JS tools

Webpack has been a wonderful de facto standard, but it’s starting to show its age. The new tools, with the new landscape in mind, are sure to deliver better performance and an improved developer experience in the future.

JavaScript remains an exciting and rapidly changing world in which to thrive. Life just keeps getting better for JavaScript developers.

Copyright © 2021 IDG Communications, Inc.



Source link

Leave A Reply

Your email address will not be published.