Page maintainer: Ewan Cahen @ewan-escience
JavaScript (JS) is a programming language that is one of the three (together with HTML and CSS) core technologies of the web. It is essential if you want to write interactive webpages or web applications, because JavaScript is, apart from WebAssembly, the only programming language that runs in modern browsers. Furthermore, JS can also run outside of the browser, e.g. for running short scripts or full-blown servers.
A good introductory tutorial on JavaScript is this one from W3Schools.
Another source of information for JavaScript (and web development in general) is the MDN Web Docs.
Many people will jump straight to using a framework when building a web application. We, however, recommend that you learn the fundamentals first and get an impression of what problems frameworks are trying to solve for you. Read, for example, this article on how the web works a look at this introduction to the DOM.
A good video summary on the history of frameworks and the problems they try to solve can be found here.
Before you pick a framework, you should first consider what you are trying to build.
- If you're building a (more traditional) website with mostly static content, like an info page for an event or a blog, whose content doesn't adapt to the visitor, consider using a static site generator like Jekyll or Hugo or Docusaurus for writing documentation. An advantage of this is that static sites can be hosted on GitHub for free, which uses Jekyll by default (but you can use other static site generators as well).
- If you're building a website that is not very interactive, but that many people have to edit, and when a static site generator is too technical, consider using WordPress. Many hosting providers support WordPress out of the box.
- When you need light interactivity, the options above can be combined with libraries like jQuery, Alpine.js, htmx or you can write the JavaScript yourself.
- When you want to build a website that has high interactivity with its users, something you would call an "application" rather than a "website", consider using htmx or one of the JavaScript frameworks below.
Currently, the most popular frameworks are (ordered by popularity according to the StackOverflow 2024 Developer Survey)
React is a framework which can used to create interactive User Interfaces by combining components. It is developed by Facebook. It is by far the most popular framework, resulting in a huge choice of libraries and a lot of available documentation. Contrary to most other frameworks, React apps are typically written in JSX instead of plain HTML, CSS and JS.
Where other frameworks like Angular and Vue.js include rendering, routing and, state management functionality, React only does rendering, so other libraries must be used for routing and state management. Redux can be used to let state changes flow through React components. React Router can be used to navigate the application using URLs. Or you can use a so-called "meta-framework" like Next.js.
To create a React application, the official documentation recommends to start with a meta-framework. Alternatively, you can use the tool Create React App, optionally with TypeScript.
Angular is a application framework by Google written in TypeScript. It is a full-blown framework, with many features included. It is therefore more used in enterprises and probably overkill for your average scientific project. Read more about what Angular is in the documentation.
To create a Angular application see the installation docs.
Angular also has a meta-framework called Analog.
Vue.js is an open-source JavaScript framework for building user interfaces. Read about the use cases for Vue and reasons to use it in their introduction.
To create a Vue application, read the quick start. It also has info on using TypeScript with Vue.
A meta-framework for Vue is Nuxt.
Svelte is a UI framework, that differs with most other frameworks in that is uses a compiler before shipping JavaScript to the client. Svelte applications are written in HTML, CSS and JS. Read more about Svelte in their overview.
In their documentation, they recommend to use their meta-framework SvelteKit to create a Svelte application. It also supports TypeScript.
A UI framework that focuses on performance and being developer friendly. Like React, it uses JSX. Read more about Solid here.
To create a Solid application, check out the quick start. They also support TypeScript.
Solid has a meta-framework called SolidStart.
Most JavaScript is run in web browsers, but if you want to run it outside of a browser (e.g. as a server or to run a script locally), you'll need a JavaScript runtime. These are the main runtimes available:
- Node.js is the most used runtime, mainly for being the only available runtime for a long time. This gives the advantage that there is a lot of documentation available (official and unofficial, e.g. forums) and that many tools are available for Node.js. It comes with a package manager (npm) that allows you to install packages from a huge library. Its installation instructions can be found here.
- Deno can be seen as a successor to Node.js and tries to improve on it in a few ways, most notably:
- built-in support for TypeScript
- a better security model
- built-in tooling, like a linter and formatter
- compiling to standalone executables
Its installation instructions can be found here
- Bun, the youngest runtime of the three. Its focus is on speed, reduced complexity and enhanced developer productivity (read more here). Just like Deno, it comes with built-in TypeScript support, can compile to standalone executables and it aims to be fully compatible with Node.js. Its installation instructions can be found here.
A more comprehensive comparison can be found in this guide.
To answer this question, you should consider what is important for you and your project.
Choose Node.js if:
- you need a stable, mature and a well established runtime with a large community around it;
- you need to use dependencies that should most likely "just work";
- you cannot convince the people you work with to install something else;
- you don't need any particular feature of any of its competitors.
Choose Deno if:
- you want a relatively mature runtime with a lot of features built in;
- you want out-of-the-box TypeScript support;
- you like its security model;
- you want a complete package with a linter and formatter included;
- you don't mind spending some time if something does not work directly.
Choose Bun if:
- you are willing to take a risk using a relatively new runtime;
- you want out-of-the-box TypeScript support;
- you want to use one of Bun's particular features;
- you need maximum performance (though you should benchmark for your use case first and consider using a different programming language).
These are some good JavaScript editors:
- WebStorm by JetBrains. It is free (as in monetary cost) for non-commercial use; otherwise you have to buy a licence. Most of its features are also available in other IDEs of JetBrains, like IntelliJ IDEA ultimate, PyCharm professional and Rider. You can compare the products of JetBrains here. Note that the free version of WebStorm will collect data anonymously, without the option to disable it. WebStorm comes with a lot of functionality included, but also gives access to a Marketplace of plugins.
- Visual Studio Code, an open source and free (as in monetary cost) editor by Microsoft. By default, it collects telemetry data, but that can be disabled. VSCode has a limited feature set out of the box, which can be enhanced with extensions.
In web development, debugging is typically done in the browser. Read this article from W3Schools for more info.
There is documentation for each browser on their dev tools:
There are also debugging guides for the various JS runtimes:
When using a (meta-)framework, also have a look at its documentation.
Sometimes, the JavaScript code in the browser is not an exact copy of the code you see in your development environment, for example because the original source code is minified/uglified or transpiled before it's loaded in the browser. All major browsers can now deal with this through so-called source maps, which instruct the browser which symbol/line in a javascript file corresponds to which line in the human-readable source code. Look for the 'create sourcemaps' option when using minification/uglification/transpiling tools.
To display web pages (HTML files) with JavaScript, you can't use any file system URL due to safety restrictions. You should use a web server (which may still serve files that are local). A simple web server can be started from the directory you want to host files with:
python3 -m http.server 8000Then open the web browser to http://localhost:8000.
JSDoc (similar to JavaDoc), parses your JavaScript files and automatically generates HTML documentation, based on the JSDoc comments you put in the code.
The various runtimes have testing functionality included, so you don't have to install extra dependencies:
If these don't suffice, a nice overview of popular testing frameworks can be found here.
To interact with web browsers use Selenium.
A formatter is a tool to make your source code look consistent and easy to look at. In web development, the most used formatter is Prettier, which can integrate with many editors. You could set up a GitHub action that rejects pull requests that are not formatted properly.
When using Deno, you can also use its built-in formatter.
An alternative to Prettier is Biome, which also includes a linter.
In any case, remember to use tabs for indentation for the purpose of accessibility.
A linter is a tool to check your code quality, in order to prevent bugs. The most used linter is ESLint. It has many integrations
When using Deno, you can also use its built-in linter.
An alternative to ESLint is Biome, which also includes a formatter.
Also have a look at the Airbnb JavaScript Style Guide or the W3Schools page on JavaScript best practices.
For more in-depth analyses, you can use a code quality and analysis tool.
- SonarCloud is an open platform to manage code quality which can also show code coverage and count test results over time. It easily integrates with GitHub.
- Codacy can analyze many different languages using open source tools. It also offers GitHub integration.
- Code climate can analyze JavaScript (and Ruby, PHP). Can analyze Java (best supported), C, C++, Python, JavaScript and TypeScript.
You can use jsfiddle, which shows you a live preview of your web page while you fiddle with the underlying HTML, JavaScript and CSS code.
https://www.typescriptlang.org/
TypeScript is a typed superset of JavaScript which compiles to plain JavaScript. TypeScript adds static typing to JavaScript, which makes it easier to scale up in people and lines of code.
At the Netherlands eScience Center we prefer TypeScript to JavaScript as it will lead to more sustainable software.
This section highlights the differences with JavaScript. For topics without significant differences, like IDEs, code style etc., see the respective JavaScript section.
To learn about TypeScript, the following resources are available:
- Official TypeScript documentation and tutorial
- Single video tutorial and playlist tutorial
- Tutorials on debugging TypeScript in Chrome and Firefox. If you are using a framework, consult the documentation of that framework for additional ways of debugging
- The Definitive TypeScript 5.0 Guide
- The W3Schools TypeScript tutorial
To install TypeScript compiler run, check out the official documentation. Note that Deno and Bun support TypeScript out of the box.
In TypeScript, variables are typed and these types are checked.
This implies that when using libraries, the types of these libraries need to be installed.
More and more libraries ship with type declarations in them so they can be used directly. These libraries will have a "typings" key in their package.json.
When a library does not ship with type declarations then the libraries @types/<library-name> package must be installed using npm:
npm install --save-dev @types/<library-name>For example say we want to use the react package which we installed using npm:
npm install react --saveTo be able to use its functionality in TypeScript we need to install the typings.
Install it with:
npm install --save-dev @types/reactThe --save-dev flag saves this installation to the package.json file as a development dependency.
Do not use --save for types because a production build will have been transpiled to JavaScript and has no use for TypeScript types.
In web development, debugging is typically done in the browser. TypeScript cannot be run directly in the web browser, so it must be transpiled to JavaScript. To map a breakpoint in the browser to a line in the original TypeScript file source maps are required. Most frameworks have a project build system which generate source maps. For more info, see the Javascript section on debugging
Just like JSDoc for JavaScript, TypeDoc can automatically generate HTML documentation for your code.