Hall of Composition

Continue toGallery of Methods

/**
 * Adapter — a thin object presenting one interface in the vocabulary of
 * another.
 */

// What the rest of the museum's code has agreed to talk to.
interface Clock {
	now(): string;
}

// What it actually has: something older, with its own manners, which cannot
// be changed because it is not ours.
class LegacyTimer {
	getEpochMillis(): number {
		return 1_700_000_000_000;
	}
}

class LegacyTimerAdapter implements Clock {
	constructor(private readonly timer: LegacyTimer) {}

Adapter

TypeScript · 1994

/**
 * Proxy — an object standing where another would, deciding what to pass on.
 */
const engine = {
	start(): string {
		return "running";
	},
	secretKey: "hunter2",
};

// The language provides the pattern. This proxy was never told what shape
// `engine` is, and will not need telling when that shape changes.
const guarded = new Proxy(engine, {
	get(target, property, receiver) {
		if (property === "secretKey") {
			throw new Error("not yours");
		}
		return Reflect.get(target, property, receiver);
	},
});

Proxy

TypeScript · 1994

/**
 * Chain of Responsibility — each handler decides whether to answer, or to
 * pass the request along and do something with what comes back.
 */
type Request = { path: string; user?: string };
type Next = () => string;
type Middleware = (request: Request, next: Next) => string;

const logging: Middleware = (request, next) => {
	console.log("-> " + request.path);
	return next();
};

const auth: Middleware = (request, next) =>
	request.user ? next() : "401 unauthorised";

const route: Middleware = (request) => "200 " + request.path;

function chain(middlewares: Middleware[]): (request: Request) => string {
	return (request) => {

Chain of Responsibility

TypeScript · 1994

/**
 * Facade — one small surface in front of several larger ones.
 */
class Oven {
	heatTo(celsius: number): void {
		console.log("oven at " + celsius + "C");
	}
}

class Mixer {
	mix(what: string): void {
		console.log("mixing " + what);
	}
}

class Timer {
	ring(minutes: number): void {
		console.log("ring in " + minutes + " min");
	}
}

Facade

TypeScript · 1994

/**
 * Composite — a leaf and a branch answering the same question, so that
 * callers stop having to ask which one they are holding.
 */
type Node = File | Folder;

class File {
	constructor(
		readonly name: string,
		private readonly bytes: number,
	) {}

	size(): number {
		return this.bytes;
	}
}

class Folder {
	private readonly children: Node[] = [];

Composite

TypeScript · 1994

/**
 * Builder — construction spread across named steps, ending in one finished
 * object.
 */
class QueryBuilder {
	private readonly columns: string[] = [];
	private readonly conditions: string[] = [];
	private max?: number;

	constructor(private readonly table: string) {}

	// Each step returns `this`, which is the whole of the fluent interface.
	select(...columns: string[]): this {
		this.columns.push(...columns);
		return this;
	}

	where(condition: string): this {
		this.conditions.push(condition);
		return this;

Builder

TypeScript · 1994

Hall of Composition

6 works

Move to the edges to look · W A S D to walk · R to recentre

Hall of Composition

Shown as a list, because your system asks for reduced motion.

Continue to Gallery of Methods →