48 Next steps: overview of web development

You now know most of the JavaScript language. This chapter gives an overview of web development and describes next steps. It answers questions such as:

• What should I learn next for web development?
• What JavaScript-related tools should I know about?

48.1 Tips against feeling overwhelmed

Web development has become a vast field: Between JavaScript, web browsers, server-side JavaScript, JavaScript libraries, and JavaScript tools, there is a lot to know. Additionally, everything is always changing: some things go out of style, new things are invented, etc.

How can you avoid feeling overwhelmed when faced with this constantly changing vastness of knowledge?

• Focus on the web technologies that you work with most often and learn them well. If you do frontend development, that may be JavaScript, CSS, SVG, or something else.
• For JavaScript: Know the language, but also try out one tool in each of the following categories (which are covered in more detail later).
  • Compilers: compile future JavaScript or supersets of JavaScript to normal JavaScript.
  • Bundlers: combine all modules used by a web app into a single file (a script or a module). That makes loading faster and enables dead code elimination.
  • Static checkers. For example:
    • Linters: check for anti-patterns, style violations, and more.
    • Type checkers: type JavaScript statically and report errors.
  • Test libraries and tools
  • Version control (usually git)

48.2 Things worth learning for web development

These are a few things worth learning for web development:

• Browser APIs such as the Document Object Model (DOM), the browsers’ representation of HTML in memory. They are the foundations of any kind of frontend development.

• JavaScript-adjacent technologies such as HTML and CSS.

• Frontend frameworks: When you get started with web development, it can be instructive to write user interfaces without any libraries. Once you feel more confident, frontend frameworks make many things easier, especially for larger apps. Popular frameworks include: Alpine.js, Angular, Ember, Lit, Preact, Qwik, React, Solid, Stencil, Svelte, Vue.js.

• JavaScript runtimes: Some JavaScript platform are for running code on servers. But they are also used for running command-line tools. The most popular runtime is Node.js. Most JavaScript-related tools (even compilers!) are implemented in Node.js-based JavaScript and installed via npm. A good way to get started with Node.js, is to use it for shell scripting.

  • Other JavaScript runtimes include: Deno, Bun.
  • Important standards group in this area: WinterCG (Web-interoperable Runtimes Community Group). “This community group aims to provide a space for JavaScript runtimes to collaborate on API interoperability. We focus on documenting and improving interoperability of web platform APIs across runtimes (especially non-browser ones).”

• JavaScript tooling: Modern web development involves many tools. Later in this chapter, there is an overview of the current tooling ecosystem.

• Progressive web apps (PWAs): The driving idea behind progressive web apps is to give web apps features that, traditionally, only native apps had – for example: native installation on mobile and desktop operating systems; offline operation; showing notifications to users. Google has published a checklist detailing what makes a web app progressive. The minimum requirements are:

  • The app must be served over HTTPS (not the unsecure HTTP).
  • The app must have a Web App Manifest file, specifying metadata such as app name and icon (often in multiple resolutions). The file(s) of the icon must also be present.
  • The app must have a service worker: a base layer of the app that runs in the background, in a separate process (independently of web pages). One of its responsibilities is to keep the app functioning when there is no internet connection. Among others, two mechanisms help it do that: It is a local proxy that supervises all of the web resource requests of the app. And it has access to a browser’s cache. Therefore, it can use the cache to fulfill requests when the app is offline – after initially caching all critical resources. Other capabilities of service workers include synchronizing data in the background; receiving server-sent push messages; and the aforementioned showing notifications to users.

One good resource for learning web development – including JavaScript – is MDN web docs.

48.2.1 Keep an eye on WebAssembly (Wasm)!

WebAssembly is a universal virtual machine that is built into most JavaScript engines. We often get the following distribution of work:

• JavaScript is for dynamic, higher-level code.
• WebAssembly is for static, lower-level code.

For static code, WebAssembly is quite fast: C/C++ code, compiled to WebAssembly, is about 50% as fast as the same code, compiled to native (source). Use cases include support for new video formats, machine learning, gaming, etc. It helps that it is relatively easy to compile existing code bases (e.g. ones written in C) to WebAssembly.

WebAssembly works well as a compilation target for various languages. Does this mean JavaScript will be compiled to WebAssembly or replaced by another language?

48.2.1.1 Will JavaScript be compiled to WebAssembly?

JavaScript engines perform many optimizations for JavaScript’s highly dynamic features. If we wanted to compile JavaScript to WebAssembly, we’d have to implement these optimizations on top of WebAssembly. The result would be slower than current engines and have a similar code base. Therefore, we wouldn’t gain anything.

48.2.1.2 Will JavaScript be replaced by another language?

Does WebAssembly mean that JavaScript is about to be replaced by another language? WebAssembly does make it easier to support languages other than JavaScript in web browsers. But those languages face several challenges on that platform:

• All browser APIs are based on JavaScript.
• The runtimes (standard library, etc.) of other languages incur an additional memory overhead, whereas JavaScript’s runtime is already built into web browsers.
• JavaScript is well-known, has many libraries and tools, etc.

For dynamic code, JavaScript is comparatively fast. Therefore, for the foreseeable future, it will probably remain the most popular choice for high-level code. For low-level code, compiling more static languages (such as Rust) to WebAssembly is an intriguing option.

Given that it is just a virtual machine, there are not that many practically relevant things to learn about WebAssembly. But it is worth keeping an eye on its evolving role in web development. It is also becoming popular as a stand-alone virtual machine:

• Important standards group in this area: “The Bytecode Alliance is a nonprofit organization dedicated to creating secure new software foundations, building on standards such as WebAssembly and WebAssembly System Interface (WASI).”

• WebAssembly System Interface (WASI): “group of standard API specifications for software compiled to the W3C WebAssembly (Wasm) standard. WASI is designed to provide a secure standard interface for applications that can be compiled to Wasm from any language, and that may run anywhere – from browsers to clouds to embedded devices.”

• WebAssembly Component Model (WCM): “broad-reaching architecture for building interoperable Wasm libraries, applications, and environments.”

• warg – secure registry protocol for Wasm packages: An important foundation for WebAssembly package managers.

48.3 An overview of JavaScript tools

In this section, we take a look at:

• Categories of tools
• Names of specific tools in those categories

The former are much more important. The names change, as tools come into and out of style, but I wanted you to see at least some of them.

48.3.1 Building: getting from the JavaScript we write to the JavaScript we deploy

Building JavaScript means getting from the JavaScript we write to the JavaScript we deploy. The following tools are often involved in this process.

48.3.1.1 Transpilers

A transpiler is a compiler that compiles source code to source code. Two transpilers that are popular in the JavaScript community are:

• TypeScript is a superset of JavaScript. Roughly, it is the latest version of JavaScript plus static typing. The TypeScript compiler tsc performs two tasks:

  • It type-checks the JavaScript code.
  • It compiles TypeScript to JavaScript (which still looks much the same).

  One important trend is to use faster tools (such as bundlers, see below) for the relatively simply task of compiling TypeScript to JavaScript and to use the TypeScript compiler only for type-checking during development – which is a complicated task (so far no practical alternatives to tsc have emerged).

• Babel compiles upcoming and modern JavaScript features to older versions of the language. That means we can use new features in our code and still run it on older browsers.

  • Most browsers are now evergreen and frequently update themselves. Before that happened, Babel was essential. Now it’s being used less, also due to TypeScript having become popular.

48.3.1.2 Minification

Minification means compiling JavaScript to equivalent, smaller (as in fewer characters) JavaScript. It does so by renaming variables, removing comments, removing whitespace, etc.

For example, given the following input:

let numberOfOccurrences = 5;
if (Math.random()) {
  // Math.random() is not zero
  numberOfOccurrences++
}

A minifier might produce:

let a=5;Math.random()&&a++;

Bundlers (see below) usually support minification.

48.3.1.3 Bundlers

Bundlers compile and optimize the code of a JavaScript app. The input of a bundler is many files – all of the app’s code plus the libraries it uses. A bundler combines these input files to produce fewer output files (which tends to improve performance).

A bundler minimizes the size of its output via techniques such as tree-shaking. Tree-shaking is a form of dead code elimination: only those module exports are put in the output that are imported somewhere (across all code, while considering transitive imports).

It is also common to perform compilation steps such as transpiling and minification while bundling.

Popular bundlers include:

• More like a framework (the tool takes control):
  • Vite
• More like a library (we control the tool):
  • esbuild
  • Rollup
  • Rolldown
• Somewhere between:
  • Parcel
  • Rspack
  • TurboPack
  • webpack

48.3.1.4 Task runners

Sometimes there are build tasks that involve multiple tools or invoke tools with specific arguments. Task runners (in the tradition of Unix make) let us define simpler names for such tasks and often also help with connecting tools and processing files. There are:

• Dedicated task runners: grunt, gulp, broccoli, etc.
• Tools that can be used as simple task runners:
  • Most package managers can run tasks, e.g. via "scripts" in package.json.
  • Most runtimes also come with built-in support for running tasks.

48.3.2 Static checking

Static checking means analyzing source code statically (without running it). It can be used to detect a variety of problems. Tools include:

• Linters: check the source code for problematic patterns, unused variables, etc. Linters are especially useful if you are still learning the language because they point out if you are doing something wrong.
  • Popular linters include ESLint, Biome, oxlint, quick-lint-js
• Code style checkers: check if code is formatted properly. They consider indentation, spaces after brackets, spaces after commas, etc.
  • Example: JSCS (JavaScript Code Style checker)
• Code formatters: automatically format our code for us, according to rules that we can customize.
  • Examples: Prettier, Biome
• Type checkers: add static type checking to JavaScript.
  • Most popular type checker: TypeScript (which is also a transpiler)

48.3.3 Testing

JavaScript has many testing frameworks – for example:

• Unit testing: AVA, Jasmine, Jest, Mocha, QUnit, Vitest, etc.
  • The JavaScript runtimes Node.js, Deno and Bun all have built-in test runners.
• Integration testing: Jenkins, Cypress, etc.
• User interface testing: CasperJS, Nightwatch.js, TestCafé, Cypress, Playwright, Web Test Runner, etc.
• Automating browsers (e.g. for testing): Puppeteer, Selenium, etc.

48.3.4 Package managers

The most popular package manager for JavaScript is npm. It started as a package manager for Node.js but has since also become dominant for client-side web development and tools of any kind.

The following alternatives to npm use npm’s package registry (think online database):

• Yarn is a different take on npm; some of the features it pioneered are now also supported by npm.
• pnpm focuses on saving space when installing packages locally.

Additionally, there is JSR (JavaScript Registry):

• It focuses on TypeScript but also supports JavaScript.
• It can be used by all of the aforementioned package managers (including npm).
• Support for it is built into Deno. JSR was created by the team behind Deno and designed to be a good fit for it.

48.3.5 Libraries

• Various helpers: lodash (which was originally based on the Underscore.js library) is one of the most popular general helper libraries for JavaScript.
• Data structures: The following libraries are two examples among many.
  • Immutable.js provides immutable data structures for JavaScript.
  • Immer is an interesting lightweight alternative to Immutable.js. It also doesn’t mutate the data it operates on, but it works with normal objects, Arrays, Sets and Maps.
• Date libraries: JavaScript’s built-in support for dates is limited and full of pitfalls. The chapter on dates lists libraries that we can use instead.
• Internationalization: In this area, ECMAScript’s standard library is complemented by the ECMAScript Internationalization API (ECMA-402). It is accessed via the global variable Intl and available in most modern browsers.
• Implementing and accessing services: The following are two popular options that are supported by a variety of libraries and tools.
  • REST (Representative State Transfer) is one popular option for services and based on HTTP(S).
  • RPC (remote procedure calls) are another popular paradigm for communicating with servers. There are many standards and approaches for RPC – two examples:
    • The JSON-RPC standard: “A light weight remote procedure call protocol. It is designed to be simple!”
    • The gRPC framework: “gRPC is a modern open source high performance Remote Procedure Call (RPC) framework that can run in any environment. It can efficiently connect services in and across data centers with pluggable support for load balancing, tracing, health checking and authentication. It is also applicable in last mile of distributed computing to connect devices, mobile applications and browsers to backend services.”
  • GraphQL is more sophisticated (for example, it can combine multiple data sources) and supports a query language.

48.4 Tools not related to JavaScript

Given that JavaScript is just one of several kinds of artifacts involved in web development, more tools exist. These are but a few examples:

• CSS:
  • Minifiers: reduce the size of CSS by removing comments, etc.
  • Preprocessors: let us write compact CSS (sometimes augmented with control flow constructs, etc.) that is expanded into deployable, more verbose CSS.
  • Frameworks: provide help with layout, decent-looking user interface components, etc.
• Images: Automatically optimizing the size of bitmap images, etc.