Abstract Factory

Widgets built by hand, families mixed by accident

The client calls new on concrete widgets directly. Nothing stops it from mixing a light button with a dark checkbox.

function renderForm(theme) {
  // scattered if/else, easy to mismatch:
  const btn = theme === 'dark'
    ? new DarkButton() : new LightButton();
  const chk = new LightCheckbox();  // ← oops, forgot theme!
}

One factory interface, one matching family per theme

A UIFactory declares createButton() and createCheckbox(). Each concrete factory returns parts from the same family.

class UIFactory {
  createButton()    { /* abstract */ }
  createCheckbox()  { /* abstract */ }
}

class LightFactory extends UIFactory {
  createButton()   { return new LightButton(); }
  createCheckbox() { return new LightCheckbox(); }
}
class DarkFactory extends UIFactory {
  createButton()   { return new DarkButton(); }
  createCheckbox() { return new DarkCheckbox(); }
}

Pick a theme — get a matching family

The client asks one factory for a button and a checkbox. Switch theme and the whole family swaps together — never a mismatched pair.

Guaranteed-matching families

• Abstract Factory creates a whole family of related objects that are guaranteed to match.
• Contrast with Factory Method: one product per call. Abstract Factory bundles several products into one coherent family.
• Caution: adding a new product type (e.g. createSlider()) means editing every concrete factory.