Page 5 - Design Patterns

Pinia is not just Vuex 5 under a different name, it is a fundamentally different approach that consistently embraces the Composition API. Anyone who uses Pinia as a mere data store is leaving the potential of store composition, type safe actions and reactive getters on the table. This article shows how to build state management with Pinia in Vue 3 correctly from the ground up.

Cancellable async operations do not emerge from simply attaching an AbortController to a fetch call, they come from a deliberate architecture decision: every function that runs for a while accepts a cancellation signal from the start, guarantees cleanup, and passes the signal consistently through every layer.

An audit trail answers the question of who changed which value in which row and when, and application logs alone can rarely answer that question reliably. This post shows three established patterns for change history tables in SQL, from shadow tables with triggers through a central audit table to native system versioned tables, including performance cost and retention strategies.

Anyone who keeps writing Alpine.js components as inline x-data objects in HTML attributes ends up duplicating logic across dozens of templates. Alpine.data() separates state and behavior from the markup layer, making components named, testable and reusable across as many instances of a page as needed.

Turning a grown React codebase away from class components takes more than a find and replace pass. Ordering, lifecycle pitfalls, this.setState batching and tests decide whether the migration goes smoothly or introduces production bugs.

React's useOptimistic hook elegantly solves a single, local use case, but falls short on nested lists, parallel mutations and race conditions across multiple components. This article shows how Optimistic Updates become robust in real applications with TanStack Query mutations, snapshot based rollback and explicit query cancellation.

The shared kernel pattern solves a problem that appears in almost every Symfony microservice landscape: several services need the same value objects, error codes or event contracts. This article shows how a shared kernel is built as its own versioned Composer package, what belongs inside, what has to stay out, and how contract tests prevent creeping coupling.

Exceptions in TypeScript are invisible to the compiler: a function that throws looks exactly the same in its signature as one that never fails. The Result type pattern makes failure paths explicit by returning success and failure as a typed value that the caller must actively handle.

A loop registers five buttons, every click logs the same number instead of the expected sequence. This pattern is called a stale closure, and it hits not just classic var loops but also modern event handlers and asynchronous code. This article shows where stale closures come from, why let often fixes the problem, and how to systematically debug the remaining cases.

Without governance, every Tailwind design system eventually collapses into exceptions, duplicate components and conflicting tokens. A governance model with clear roles, a lightweight RFC process and defined approval paths keeps the system consistent even when ten developers work on it at the same time.