Page 14 - Design Patterns

Anyone who creates several watch, watchEffect, and computed instances inside a composable has to stop each one individually when cleaning up. An Effect Scope groups all of these effects together and ends them with a single stop() call, whether inside or outside a component.

TypeScript turns time-tested GoF patterns from object-oriented software design into tools with real compile-time guarantees. Combining Factory, Strategy, Observer, and Builder with discriminated unions, generic types, and exhaustiveness checks prevents entire classes of bugs that only surface at runtime in plain JavaScript, while producing more maintainable, better-tested architectures for checkout and headless commerce systems.

Anyone who deep copies an entire object or array on every state update wastes memory and CPU time. Structural sharing solves this problem: on update, a persistent data structure rebuilds only the changed path and shares every unchanged subtree with the old version instead of duplicating it.

Anyone building inheritance hierarchies in PHP with factory methods or ActiveRecord patterns inevitably runs into the difference between self:: and static::. Late Static Binding solves exactly the problem that self:: always stays bound to the class where the method was defined, instead of the class it was actually called through.

Hanging punctuation places quotation marks and other punctuation visually outside the text block, so the left edge of the text appears straight across every line. With the CSS property hanging-punctuation, this centuries old trick from book printing typography can be implemented with a single line of CSS, with no negative margins or JavaScript hacks needed.

Real component isolation needs two separate guarantees: collision free class names and a predictable specificity order. CSS Modules deliver the first guarantee at build time, native Cascade Layers deliver the second at runtime, and together they create an isolation that requires neither Shadow DOM nor a UI framework.

When the write side of a system lives in an event store, the read side does not have to use the same data model. GraphQL and event sourcing fit together surprisingly well, because GraphQL queries deliver exactly what CQRS read models need, flexible, projection-based queries without ever touching the event stream itself.

A maintainable dark-light token system does not emerge from a single layer of custom properties, but from three cleanly separated tiers: primitive tokens, semantic tokens and component tokens. Together with the light-dark() function, this architecture can be implemented without a growing media query per component.

Beyond the built-in shorthands like flip-block, @position-try lets you define your own named fallback positions, complete with their own viewport safety margin. This article walks through ready-to-copy recipes for dropdown menus, nested submenus and tooltips that reliably stay inside the visible area.

An embedded payment widget or chat widget almost always ships its own CSS, which cannot be touched and still must not clash with your own design. Cascade layers solve this problem structurally: foreign CSS lands in its own cascade layer below your own layers, guaranteed to lose every specificity fight, without touching a single foreign rule.