Page 15 - Design Patterns

Price calculation, shipping costs, taxes, payment methods: Magento uses the Strategy Pattern everywhere. How it is implemented, how di.xml swaps algorithms, and how you integrate your own strategies.

Before, After, Around: extend Magento methods without a core override. Plugin chains, sortOrder, limitations and the most important pitfalls fully explained.

The Composite Pattern makes single objects and entire tree structures usable through the same interface. In Magento 2 this shows up especially in price rules, Sales Rule Conditions, layout containers and configuration trees.

ITCSS orders a stylesheet not by file type or component, but by the specificity and reach of every rule. This CSS architecture makes conflicts between global base rules and specific overrides predictable, instead of leaving them to the chance of import order, and stays maintainable across dozens of developers over years.

Most explanations of SOLID principles work with shapes, ducks, or animals, and leave open what that looks like in real application code. This article instead uses a single, connected order-processing pipeline in PHP 8.4, in which each of the five principles solves a concrete, traceable maintainability problem: an Order class that does too much, discount rules that grow into an if/else cascade, a payment gateway that breaks its own contract, an overly fat repository interface, and a notification service too tightly coupled to a concrete mailer.

Once multiple teams work on the same Vue application, a monolithic frontend becomes a bottleneck. Micro frontends split a Vue application along domain boundaries, so each team can develop, test and deploy independently without waiting for a shared release train.

Developers coming from Magento or Symfony already know Dependency Injection from di.xml and the service container. This article shows how to apply the same principle in TypeScript projects, with constructor injection as the default pattern, interfaces as contracts for testable code, and a clear rule for when a DI container like InversifyJS actually earns its keep.

A single fallback position rarely covers every case in CSS Anchor Positioning once an anchor sits close to a screen edge. With position-try-fallbacks you can define a whole chain of alternative positions the browser tries in order until one fits, with no JavaScript and no resize or scroll listener at all.

A separate Tailwind build for every white-label customer scales poorly once a hundred tenants want to use the same application with their own color scheme. With a single CSS bundle and server side injected CSS variables based on the hostname, white-label theming without a rebuild per brand becomes possible, directly on top of Tailwind CSS v4 design tokens.