Web Fundamentals
Web Scripting

JavaScript, the programming language

JavaScript has good and bad parts

In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders.

Douglas Crockford (2008). “JavaScript: The Good Parts: The Good Parts”, p.2, "O'Reilly Media, Inc."

Effectively using JavaScript

• Focus on how JavaScript works
  • Understand what (not) to use when
• We assume basic knowledge of JavaScript
  • Syntax, functions, classes, error handling, …
• WebAssembly enables alternative languages to be executed in Web pages
  • Not in scope for this lecture

Objects represent things

• Objects have properties

  • dog.name = "Samson";

• Object have methods
  • Methods are object properties with function values

  • dog.bark = () => console.log("Woof!");
    dog.bark();

• Object instantiation
  • {} or new Object()

Objects have properties and internal slots

• Properties
  • Accessible key-value mappings
• Internal slots
  • Inaccessible object properties defined by ECMAScript
  • ECMAScripts denotes them with [[SlotName]]
  • Examples:
    • [[Prototype]]: Prototype of object
    • [[Extensible]]: If properties can be added to object
    • [[PrivateFieldValues]]: List of private class fields

Property descriptors encode attributes of properties

• Object properties can be added or modified with Object.defineProperty()
  • Uses the ECMAScript internal method [[DefineOwnProperty]]
  • Can be read with Object.getOwnPropertyDescriptor()
• Two disjoint types of property descriptors
  • Data descriptor: property with value
  • Accessor descriptor: property with getter-setter functions

Data descriptors encode attributes of value-based properties

• Value
  • The value of this property
  • Default: value: undefined
• Writability
  • If this property can be changed through assignment
  • Default: writable: false

Object.defineProperty(dog, "name", { value: "Laika" });

Accessor descriptors encode attributes of getter-setter-based properties

• Getter
  • Function that returns the value of a property
  • Default: get: undefined
• Setter
  • Function that is invoked with an assigned property value
  • Default: set: undefined

Object.defineProperty(dog, "name", { get: () => "Laika" });

Common attributes for data and accessor descriptors

• Configurability
  • If attributes of this property can be changed
  • Default: configurable: false
• Enumerability
  • If this property is included when enumerating properties
  • E.g.: for…in, Object.keys
  • Default: enumerable: false

Property descriptors allow fine-grained control

• Normal assignment is less verbose

  • dog.name = "Samson";

  • Property descriptors are defined implicitly
  • write, configurable, and enumerable default to true

Prototype-based inheritance

• Before ECMAScript had classes, inheritance was done using prototypes
  • Classes are syntactical sugar on prototypes (since ES2015)
  • Prototypes may be used directly, but are less convenient
• [[Prototype]] points to object parent
  • Property access propagates through prototype chain.
  • Manipulate with Object.getPrototypeOf() and Object.setPrototypeOf()

Creating prototypes manually

• Prototypes are plain objects

  • const Animal = {
      live: function() {
        // 'this' refers to object instance
        console.log('I am ' + this.name);
      },
    };
    const Mammal = {
      walk: function() {
        console.log('I am walking');
      }
    };
    const Dog = {
      bark: function() {
        console.log('I am barking');
      }
    };

Defining prototype chain manually

• All Mammals are Animals

  • Object.setPrototypeOf(Mammal, Animal);

• All Dogs are Mammals

  • Object.setPrototypeOf(Dog, Mammal);

Instantiating a prototype

• Create a new Dog instance

  • const dog = Object.create(Dog);
    dog.name = 'Samson';

• Properties and methods from the whole prototype chain can be used

  • dog.live(); // Prints 'I am Samson'

Avoid defining prototypes manually!

• class-based syntax is less verbose

  • class Dog extends Mammal {
      constructor(name) {
        this.name = name;
      }
    }
    const dog = new Dog('samson');

• Object.setPrototypeOf is slow
  • JavaScript engines do not optimize for it

Type Coercion implicitly converts values to the expected type

• Initially, JavaScript had no exceptions support
  • Function input: coerced to expected type (string → number)
  • Function output: error value if something fails (NaN)
  • Applies to older JavaScript features: ==, +
• Modern JavaScript features do not coerce
  • They can throw exceptions instead
  • E.g., in, ===

Internal ToPrimitive() function is used for many coercion algorithms

• Accepts values of any type, and a hint
  • Hint indicates the preferred type: string, number, or default
• Features that prefer numbers
  • <, >, -, BigInt, …
• Features that prefer strings
  • toString, [], …
• Features that are neutral
  • ==, +, , new Date(), …

ToPrimitive() uses a fall-through approach

• Five checks
  1. Return if a primitive
  2. Invoke optional Symbol.toPrimitive method
  3. Invoke toString or valueOf if string hint
  4. Invoke valueOf or toString otherwise
  5. Throw TypeError

Example: Applying +

• ToPrimitive() is applied on both arguments of +

  • const obj = { valueOf: () => 1 }
    
    console.log("a" + obj);

Example: Applying +

• ToPrimitive("a")
  1. Already is a primitive, return as-is

Example: Applying +

• ToPrimitive({ valueOf: () => 1 })
  1. Not a primitive
  2. No Symbol.toPrimitive method
  3. No string hint
  4. Invoke valueOf → 1

Example: Applying +

• + operation can be applied

  • "a" + 1 = "a1";

Avoid Type Coercion when possible

• Use features that don't apply Type Coercion
  • == → ===
• Explicitly cast values to types
  • "25" + 1
  • Number("25") + 1
• Explicitly check types in your own functions
  • Throw TypeError

Event-based runtime model

• Designed for handling events
  • User interactions
  • Network requests
  • …
• JavaScript is single-threaded
  • Events are handled in sequence via the event loop
  • Callbacks for asynchronous operations (I/O, timers, …)

Callback functions for (a)synchronous completion

• Two types
  • Synchronous: array.forEach(element => …)
  • Asynchronous: setTimeout(() => …, 10)
• Asynchronous callbacks are invoked later
  • Added as tasks on a queue

Engines process the macrotask queue

• Macrotask queue contains tasks
  • Registered 'click' handler after user clicks
  • Callback after scheduled setTimeout is due
  • Executing a loaded <script src="...">
  • The next file chunk was read
  • …
• Engine processes tasks in the macrotask queue
  • In FIFO order

Promises hold results of async operations

• Datastructure with resolve and reject callbacks

  • const p = new Promise((resolve, reject) => {
      slowAsyncOperation(resolve);
      setTimeout(() => reject(…), 1000);
    });
    
    p.then(v => console.log(v))
     .catch(e => console.error(e));

async/await: syntactic sugar for promises

• Without async/await

  • function handle() {
      p1.then(v1 => p2.then(v2 => console.log(v1 + v2))
               .catch(e => console.error(e));)
       .catch(e => console.error(e));
    }

• With async/await

  • async function handle() {
      try {
        console.log(await p1 + await p2);
      } catch (e) {
        console.error(e);
      }
    }

Promises always handled asynchronously

• Callbacks are added to a separate microtask queue
  • .then(), .catch(), .finally()
• Enables prioritization of tasks
  • Macrotasks are less urgent
  • Microtasks are more urgent

Microtasks run before macrotasks

• Microtask queue contains tasks
  • Handling of Promises and await
  • Scheduled via queueMicrotask
• Engine processes tasks in the microtask queue
  • Fully processed after each macrotask
  • In FIFO order

Task scheduling impacts performance

• Run-to-completion
  • Tasks are processed completely before going to next
  • Makes reasoning about program easier
  • Long-running tasks block later tasks (avoid them!)
• Rendering pipeline invoked in-between macrotasks
  • Not in-between microtasks
• Tasks block interaction
  • setTimeout, setInterval, requestAnimationFrame
  • Web Workers run in separate thread (no DOM access)

Iterables and iterators

• Objects can be made iterable
  • Implementing the [Symbol.iterator] method
  • Invoked by for…of, spread operator, …
• [Symbol.iterator] returns an iterator
  • next(): returns { value } or { done: true }

Generators provide syntactic sugar to create iterators

• Generator functions produce generator objects
  • Stateful: Generator objects can be suspended and resumed

  • function* myGenerator() {
     yield 1;
     yield 2;
     yield 3;
    }

• Generator objects are iterable
  • They implement [Symbol.iterator]

Async iterators are iterators returning promises

• Objects can be made async iterable
  • Implementing the [Symbol.asyncIterator] method
  • Invoked by for await…of
  • Useful when iterating over async elements
  • E.g., ReadableStream contains chunks of HTTP body
• [Symbol.asyncIterator] returns an async iterator
  • next(): returns promise to { value } or { done: true }

Async generators provide syntactic sugar to create async iterators

• Generator functions produce generator objects
  • Stateful: Generator objects can be suspended and resumed

  • async function* myGenerator() {
     yield await promise1;
     yield await promise2;
     yield await promise3;
    }

• Async generator objects are async iterable
  • They implement [Symbol.asyncIterator]

Metaprogramming: writing a program that can process itself

• Types of metaprogramming
  1. Introspection: Read-access to program structure
     • E.g. Object.keys()
  2. Self-modification: Changing the program structure
     • Dynamically modifying object fields and methods
  3. Intercession: Redefine semantics of language operations
     • Proxies

Proxies can intercept and modify object operations

• Wrapper over a target object

  • const proxy = new Proxy(target, handler);

• Handler provides traps for operations
  • Trap: overrides the behaviour of an operation
  • Getters, setters, delete, …

Building blocks for parallelism

• Safe communication beyond a single event loop
  • Web Workers, Worker Threads, WebAssembly, WebGL, …
• Atomics: Utilities for thread-safe atomic operations
  • Add, exchange, lock, …
• SharedArrayBuffer: Binary data buffer
  • Can be safely shared and sliced across threads
• Transferable objects
  • Transfer objects to other contexts, no sharing

Typed Arrays: Low-level binary arrays

• Regular arrays can contain all value types
  • Different than array types of languages like C and Java
• Typed arrays can only contain specific values
  • Int8Array: Signed bytes
  • UInt8Array: Unsigned bytes
  • Int16Array: Signed 16-bit short integers
  • …
• Useful when low-level access is required
  • WebAssembly, WebGL, …

Typed Arrays require specific memory allocation

• Size must be specified through constructor
  • Number of elements or copy of another typed array
• All Typed Arrays operate on an ArrayBuffer
  • Created internally or passed through constructor
  • ArrayBuffers are transferable

Run JavaScript Everywhere

The Node.js principles

Node.js is based on the V8 engine

Reactor pattern for handling I/O

Node.js implements the event loop as multiple sequential phases

Node.js is the most popular environment, but alternatives exist

Splitting up code into modules

Node.js supports two types of modules

CommonJS: Node.js's original modules

Module resolution in CommonJS

Examples of module resolution in CommonJS

require('url')

Node.js URL core module

require('./file')

./file.js

require('pad')

./node_modules/pad/index.js

ECMAScript modules: Native JavaScript modules

Differences between CJS and ESM

CJS and ESM in practise

A package managers helps managing collections of JavaScript modules

A package manager for Node.js

Node.js was created before npm

npm is the most popular package managers, but alternatives exist

npm packages follow Semantic Versioning (SemVer)

SemVer is useful for man and machine

Dependencies can be defined using SemVer ranges

Installing dependencies with a package manager

A naive dependency resolution algorithm: nested node_modules/

Dependency resolution with deduping

Dependencies that are incompatible with the SemVer range are not hoisted

The order in which dependencies are installed determines matters

From callbacks to EventEmitters

Conventions for asynchronous error handling in Node.js

Errors can not be handled in callbacks and EventEmitters using try-catch.

Streams are EventEmitters for processing asynchronous data streams

Reading files using streams

• Using the fs API from Node.js

  • import * as fs from 'node:fs';
    
    
    
    const readStream = fs.createReadStream('foo.txt');
    
    readStream.on('data', (chunk) => console.log(chunk));
    
    readStream.on('error', (err) => console.error(err));
    
    readStream.on('end', () => console.log('Done!'));

Node.js Streams preceded the Web Streams API (for browsers)

• Web Streams API was inspired by Node.js Streams
  • Improvements based on lessons learned
  • Strictly different API
  • Streams can be converted to each other
  • Node.js support since 16.x
• Many projects still work with Node.js Streams
  • Even when used in browsers
• Web Streams will replace Node.js Streams

Concepts in Node.js and Web Streams

• Piping
  • Chaining streams to each other
• Backpressure
  • Stream in pipeline notify others to pause sending chunks
  • Avoids buildup of large buffers within pipelines
  • High water mark: maximum desired buffer size
• Teeing
  • Splitting a stream into two identical copies

JS engines use just-in-time (JIT) compilation

• A good basic understanding of them is important
  • Can help optimizing your JavaScript code
• We will look at the V8 engine
  • Most modern engines work similarly

V8 has multiple types of compilers

• Ignition is a JIT compiler
  • Compiles JavaScript to bytecode
  • Interpreted execution of bytecode
• Turbofan is an optimizing compiler
  • Runs in the background during execution
  • Identifies and optimizes hot code
  • Preceded by:
    • Sparkplug: No optimizations (short-lived)
    • Maglev: Few optimizations (after Sparkplug)
  • → Execution becomes gradually faster at runtime

Optimizing compilers learn shape and structure of running code

• JavaScript numbers are 64-bit floating point values
  • V8 identifies Small Integers (SMI)
  • SMIs can be stored in 32 bits (e.g. array indices)
  • Saves memory and improves performance
• JavaScript can have dynamic structures
  • V8 identifies common structures among objects
  • Creates hidden classes in C structs
  • Not for objects in dictionary mode: many properties, dynamically changing properties

Optimizers are speculative

• Optimizers first try the fast path
  • If it fails, fallback to unoptimized code
  • Fail-path has penalty of being extra slow
• Optimizers work well if your code is C-like
  • Datatypes for specific fields are constant
  • Objects have no dynamically changing properties

Development in JavaScript differs from other languages

• Different possible target environments
  • Web browsers
  • Server-side runtime environments (Node.js, Deno, …)
• Fast evolution of new language features
  • But not all environments immediately support new features
• Dynamic nature of JS is useful for fast prototyping
  • Can cause difficulties for larger projects

Most JavaScript projects incorporate multiple development processes

• Steps to be run by the developer or a Continuous Integration (CI) service:
  • Linting: Static analysis of code
  • Testing: Automated checking of code to validate behaviour
  • Transpiling: Converting between languages or versions
  • Bundling: Combining and preparing code for the browser
• Package managers (e.g. npm) provide tools to simplify running these steps
  • Running "scripts" in package.json using npm run
  • npm run test, npm run build

Linters analyze code to find and fix potential problems

• Static analysis
  • No execution of the code
  • Analysis on the abstract syntax tree (AST) after parsing
• Configurable through rules
  • Each rule defines a potential problem or style preference
• Some rules can be automatically fixed
  • Transforming the AST and writing back to the original file

Examples of rules for ESLint

• ESLint
  • Popular open-source linter for JavaScript
• no-unused-vars
  • Reports variables that are defined but are not used
• no-undefs
  • Reports code that uses undeclared variables

Categories of linter rules

• Code quality
  • Unused variables
  • Usage of undeclared variables
• Formatting
  • Tabs or spaces
  • Keyword spacing
  • Dedicated formatters exist, such as Prettier

Increasing confidence in code through automated testing

• Fully automated
  • Implemented as code or configuration
  • Executed at some frequency or on every change/version
• Different target levels of testing
  • Unit: Small and isolated pieces of code
  • Integration: Multiple components that are wired together
  • System: The full system

Measuring tested domain as code coverage

• Metric that indicates how much of the code is tested
  • Full coverage does not imply correctness
• Different types of coverage criteria:
  • Function: considers executed functions
  • Line: considers passed lines
  • Branch: considers all possible control branches (e.g. if-else)
• Projects can configure coverage thresholds
  • All thresholds except for 100% or 0% are arbitrary

Jest is a popular testing framework for JavaScript

• Zero configuration
  • Requires minimal configuration
  • Very configurable and extensible when needed
• Supports many different types of projects
  • Node.js, TypeScript, React, …

Transpilers make code compatible with different JavaScript versions

• JavaScript-to-JavaScript transpilers
  • Converts across different ECMAScript versions
  • E.g. Babel
• Something-to-JavaScript transpilers
  • Converts another high-level language into JavaScript
  • E.g. TypeScript

Babel makes modern JavaScript backwards-compatible

• Older browsers or runtime environments may not support all modern ECMAScript features
  • Code conversion pipeline
• Code transformation
  • Modern syntax to old syntax (e.g. await → promises)
• Polyfills
  • Defines missing classes and APIs if they are missing

TypeScript is a superset of JavaScript with type definitions

• JavaScript is not strictly typed
  • Developers to consult documentation when using a library
  • Can cause difficulties for larger projects
• TypeScript adds typings syntax
  • Add types for variables, class, parameters, …
• Highly popular
  • Recently became more popular than JavaScript

tsc is the TypeScript compiler

• tsc transpiles TypeScript into JavaScript
  • Includes type-checking
  • Output JavaScript on specific ECMAScript version (like Babel)
• Highly configurable in strictness
  • Require types for all function arguments?
  • Require strict null checks?
• Runtime environments natively support TypeScript
  • Deno and Bun
  • Node.js experimentally since version 22

Towards cross-platform JavaScript

• Different APIs in browser and server
  • Browser-specific: DOM, …
  • Server runtime environment: fs in Node.js for file I/O, …
• Different approaches to modules
  • Runtime environments support CJS and ESM
  • Modern browsers only support ESM
  • Older browsers don't support modules
• Differences in optimization concerns
  • Split code across many (server) or few (browser) modules

Bundlers enable cross-platform JavaScript

• Different APIs in browser and server
  • Transpilers such as Babel, polyfills
• Different approaches to modules
  • Creating browser-ready bundles of projects
• Differences in optimization concerns
  • Reducing the number of files within bundles
  • Optional optimization steps: minification

Bundlers work in two steps

• Dependency resolution
  • Create a dependency graph of all modules
  • Tree-shaking removes unused modules
    • Does not work for dynamic imports
• Packing
  • Convert dependency graph into browser-executable bundle
  • Other assets can be includes: HTML, CSS, …

Making smaller bundles for production

• Minification
  • Removing unnecessary whitespaces and comments
  • Convention to use .min.js as extension
• Uglification
  • Minification + Shortening variable and function names
• Source maps link minified to original code
  • Modern browsers understand sourcemaps
  • Convention to use .min.js.map as extension