Frontend Glossary

A

Angular

Angular is a TypeScript-based free and open-source single-page web application framework. It is developed by Google.

Key features are:

• component-based architecture
• data binding
• dependency injection
• directives
• routing
• server-side rendering (SSR)

Angular supports two-way data binding which synchronizes data between the model and the view. This ensures that any changes in the view are automatically reflected in the model and vice versa.

Angular has a built-in dependency injection system that makes it easier to manage and inject dependencies into components and services.

Angular extends HTML with additional attributes called directives. Directives offer functionality to change the behavior or appearance of DOM elements.

Angular includes a router that allows developers to define and manage application states and navigation paths, making it easier to build single-page applications (SPA) with complex routing.

Server-side rendering enhances search engine optimization by making content more accessible to web crawlers

The Angular CLI (Command Line Interface) provides a set of tools for creating, building, testing, and deploying Angular applications. It enables rapid application setup and simplifies ongoing development tasks.

D

DOM

Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document in memory. Usually it refers to JavaScript and frameworks build on top of JavaScript and TypeScript.

A DOM tree is a tree structure whose nodes represent an HTML or XML document’s contents.

E

ECMAScript

ECMAScript (ES) is the standard for the JavaScript language, intended to ensure the interoperability of web pages across different web browsers. It is standardized by Ecma International’s TC39 technical committee in the document ECMA-262.

ECMAScript is commonly used for client-side scripting on the World Wide Web, and is increasingly being used for server-side scripting and services using runtime environments such as Node.js and Deno.

The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. The web browser (or other runtime system) provides JavaScript APIs for I/O.

J

JavaScript

JavaScript (JS) is a programming language. It is a core technology of the Web, alongside HTML and CSS.

It is maintained by Ecma International’s TC39 technical committee, with related Web APIs maintained by W3C and WHATWG.

N

Node.js

Node.js is a cross-platform, open-source JavaScript runtime environment. It runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser.

Node.js allows developers to use JavaScript for writing command line tools and server-side scripting.

Node.js represents a “JavaScript everywhere” paradigm, unifying web-application development around a single programming language.

Node.js has an event-driven architecture capable of asynchronous I/O.

npm

npm is a package manager for JavaScript. It is maintained by a subsidiary of GitHub.

npm is the default package manager for the JavaScript runtime environment Node.js and is included as a recommended feature in the Node.js installer.

It consists of a command line client, also called npm, and an online database of public (and paid-for private) packages, called npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website.

Although “npm” is commonly understood to be an abbreviation of “Node Package Manager”, it is officially a recursive backronymic abbreviation for “npm is not an acronym”.

npx

npm can manage packages that are local dependencies of a particular project, as well as globally-installed JavaScript tools.

When used as a dependency manager for a local project, npm can install all the dependencies of a project through the package.json file.

In the package.json file, each dependency can specify a range of valid versions using the semantic versioning scheme, allowing developers to auto-update their packages while at the same time avoiding unwanted breaking changes.

npm also provides:

• version-bumping tools for developers to tag their packages with a particular version.
• package-lock.json file which has the entry of the exact version used by the project after evaluating semantic versioning in package.json.

npx command, which is an acronym for Node Package eXecuter, executes packages without installing them.

P

package.json

package.json is a manifest file that describes the settings of a Node.js project.

package.json most important fields are:

• name
• version
• dependencies
• devDependencies
• peerDependencies
• overrides

The name and version together form an identifier that is assumed to be completely unique. Changes to the package should come along with changes to the version. If you don’t plan to publish your package, the name and version fields are optional.

Dependencies are specified in a simple object that maps a package name to a version range. See semver for more details about specifying version ranges.

You may wonder where you have to put a package you need for your project:

• dependencies: packages your app needs to run in production. They get installed wherever your package is used).
• devDependencies: packages only needed during development (testing, linting, building, type checking). Not installed when someone installs your package as a dependency.
• peerDependencies: packages your code requires the host project to provide, rather than bundling yourself. Common in plugins and libraries to avoid version conflicts.

A React component library doesn’t bundle its own React: it expects the consuming app to already have it. This prevents two copies of React from ending up in the same project.

R

React.js

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library that aims to make building user interfaces based on components more seamless. It is maintained by Meta.

The core concept of the unidirectional data flow leads to the need of an external state manager such as Redux.

T

TypeScript

TypeScript (TS) is a high-level programming language that adds static typing with optional type annotations to JavaScript. It transpiles to JavaScript. It is developed by Microsoft as free and open-source software released under an Apache License 2.0.

TypeScript may be used to develop JavaScript applications for both client-side and server-side execution.

V

Vite

Vite (French word for “quick”, pronounced “veet”) is a build tool that aims to provide a faster development experience for modern web projects.

It consists of two major parts:

1. development server that provides feature enhancements over native ES modules.
2. build command that bundles code with Rolldown, pre-configured to output static assets for production.

Vitest

Vite-native testing framework: vitest.dev/.

Aim to replace older Karma tool.

Vue.js

Vue (pronounced “view”) is an open-source model-view-viewmodel (MVVM pattern) front end JavaScript framework for building user interfaces and single-page applications.

It was created and maintained by Evan You and his team.

Y

Yarn

Yarn is one of the main JavaScript package managers for the Node.js JavaScript runtime environment. It is an alternative to the npm package manager.

Yarn was created as a collaboration of Meta, Google and many other companies to solve consistency, security, and performance problems with large codebases. Eventually, Yarn became fully autonomous in 2019.