📘 Abstract Factory: Family of Objects

🎯 Introduction

Welcome to this exciting tutorial on the Abstract Factory pattern! 🎉 In this guide, we’ll explore how to create families of related objects without specifying their concrete classes.

You’ll discover how Abstract Factory can transform your TypeScript development by organizing complex object creation. Whether you’re building UI components 🎨, game systems 🎮, or cross-platform applications 📱, understanding Abstract Factory is essential for writing flexible, maintainable code.

By the end of this tutorial, you’ll feel confident using Abstract Factory patterns in your own projects! Let’s dive in! 🏊‍♂️

📚 Understanding Abstract Factory

🤔 What is Abstract Factory?

Abstract Factory is like a restaurant chain with multiple locations 🍽️. Each restaurant (factory) creates the same types of dishes (objects), but with local flavors. You order “pizza” and get Italian-style in Rome, New York-style in NYC, but it’s still pizza!

In TypeScript terms, Abstract Factory provides an interface for creating families of related objects without specifying their concrete classes. This means you can:

• ✨ Create related objects that work together
• 🚀 Switch entire product families easily
• 🛡️ Ensure compatibility between objects

💡 Why Use Abstract Factory?

Here’s why developers love Abstract Factory:

1. Consistency 🔒: Ensures objects from the same family work together
2. Flexibility 💻: Easy to switch between product families
3. Extensibility 📖: Add new product families without changing existing code
4. Type Safety 🔧: TypeScript ensures compile-time correctness

Real-world example: Imagine building a game with different themes 🎮. With Abstract Factory, you can switch between fantasy, sci-fi, or modern themes seamlessly!

🔧 Basic Syntax and Usage

📝 Simple Example

Let’s start with a friendly example:

// 🎨 Abstract products
interface Button {
  render(): string;
  click(): void;
}

interface Checkbox {
  render(): string;
  check(): void;
}

// 🏭 Abstract factory
interface UIFactory {
  createButton(): Button;
  createCheckbox(): Checkbox;
}

// 🌈 Concrete products - Light theme
class LightButton implements Button {
  render(): string {
    return "☀️ Light Button";
  }
  
  click(): void {
    console.log("✨ Light button clicked!");
  }
}

class LightCheckbox implements Checkbox {
  render(): string {
    return "⬜ Light Checkbox";
  }
  
  check(): void {
    console.log("✅ Light checkbox checked!");
  }
}

💡 Explanation: We define abstract interfaces for products (Button, Checkbox) and a factory interface that creates them!

🎯 Common Patterns

Here are patterns you’ll use daily:

// 🌙 Dark theme implementation
class DarkButton implements Button {
  render(): string {
    return "🌙 Dark Button";
  }
  
  click(): void {
    console.log("💫 Dark button clicked!");
  }
}

class DarkCheckbox implements Checkbox {
  render(): string {
    return "⬛ Dark Checkbox";
  }
  
  check(): void {
    console.log("✅ Dark checkbox checked!");
  }
}

// 🏭 Concrete factories
class LightThemeFactory implements UIFactory {
  createButton(): Button {
    return new LightButton();
  }
  
  createCheckbox(): Checkbox {
    return new LightCheckbox();
  }
}

class DarkThemeFactory implements UIFactory {
  createButton(): Button {
    return new DarkButton();
  }
  
  createCheckbox(): Checkbox {
    return new DarkCheckbox();
  }
}

💡 Practical Examples

🛒 Example 1: E-commerce Platform Themes

Let’s build something real:

// 🛍️ Product interfaces
interface ProductCard {
  display(name: string, price: number): string;
}

interface ShoppingCart {
  addItem(item: string): void;
  getIcon(): string;
}

interface PaymentButton {
  process(amount: number): string;
}

// 🏪 Store theme factory
interface StoreThemeFactory {
  createProductCard(): ProductCard;
  createShoppingCart(): ShoppingCart;
  createPaymentButton(): PaymentButton;
}

// 🎄 Holiday theme implementation
class HolidayProductCard implements ProductCard {
  display(name: string, price: number): string {
    return `🎁 ${name} - $${price} (Holiday Special!)`;
  }
}

class HolidayShoppingCart implements ShoppingCart {
  private items: string[] = [];
  
  addItem(item: string): void {
    this.items.push(item);
    console.log(`🎅 Added ${item} to holiday cart!`);
  }
  
  getIcon(): string {
    return "🛷";
  }
}

class HolidayPaymentButton implements PaymentButton {
  process(amount: number): string {
    return `🎄 Processing holiday payment: $${amount} 🎁`;
  }
}

// 🏭 Holiday factory
class HolidayThemeFactory implements StoreThemeFactory {
  createProductCard(): ProductCard {
    return new HolidayProductCard();
  }
  
  createShoppingCart(): ShoppingCart {
    return new HolidayShoppingCart();
  }
  
  createPaymentButton(): PaymentButton {
    return new HolidayPaymentButton();
  }
}

// 🎮 Using the factory
class OnlineStore {
  private factory: StoreThemeFactory;
  
  constructor(factory: StoreThemeFactory) {
    this.factory = factory;
  }
  
  renderProduct(name: string, price: number): void {
    const card = this.factory.createProductCard();
    console.log(card.display(name, price));
  }
  
  checkout(items: string[], total: number): void {
    const cart = this.factory.createShoppingCart();
    const payButton = this.factory.createPaymentButton();
    
    items.forEach(item => cart.addItem(item));
    console.log(`Cart icon: ${cart.getIcon()}`);
    console.log(payButton.process(total));
  }
}

// 🎊 Let's shop!
const holidayStore = new OnlineStore(new HolidayThemeFactory());
holidayStore.renderProduct("TypeScript Book", 29.99);
holidayStore.checkout(["Book", "Course"], 59.98);

🎯 Try it yourself: Add a SummerThemeFactory with beach-themed emojis! 🏖️

🎮 Example 2: Cross-Platform Game UI

Let’s make it fun:

// 🎮 Game UI elements
interface HealthBar {
  display(health: number, maxHealth: number): string;
}

interface ScoreDisplay {
  show(score: number): string;
}

interface PowerUpIndicator {
  activate(powerUp: string): string;
}

// 🏭 Platform factory
interface GameUIFactory {
  createHealthBar(): HealthBar;
  createScoreDisplay(): ScoreDisplay;
  createPowerUpIndicator(): PowerUpIndicator;
}

// 📱 Mobile implementation
class MobileHealthBar implements HealthBar {
  display(health: number, maxHealth: number): string {
    const hearts = "❤️".repeat(Math.ceil(health / 20));
    return `📱 Health: ${hearts} (${health}/${maxHealth})`;
  }
}

class MobileScoreDisplay implements ScoreDisplay {
  show(score: number): string {
    return `📱 Score: ${score} 🏆`;
  }
}

class MobilePowerUpIndicator implements PowerUpIndicator {
  activate(powerUp: string): string {
    const powerUpEmojis: Record<string, string> = {
      speed: "⚡",
      shield: "🛡️",
      damage: "💥"
    };
    return `📱 Power-Up: ${powerUpEmojis[powerUp] || "✨"} ${powerUp}!`;
  }
}

// 🖥️ Desktop implementation
class DesktopHealthBar implements HealthBar {
  display(health: number, maxHealth: number): string {
    const percentage = (health / maxHealth) * 100;
    const bar = "█".repeat(Math.ceil(percentage / 10));
    return `🖥️ Health: [${bar.padEnd(10, "░")}] ${percentage}%`;
  }
}

// 🎮 Game manager using factory
class GameManager {
  private uiFactory: GameUIFactory;
  private health = 100;
  private score = 0;
  
  constructor(platform: "mobile" | "desktop") {
    this.uiFactory = platform === "mobile" 
      ? new MobileUIFactory() 
      : new DesktopUIFactory();
  }
  
  takeDamage(damage: number): void {
    this.health -= damage;
    const healthBar = this.uiFactory.createHealthBar();
    console.log(healthBar.display(this.health, 100));
  }
  
  addScore(points: number): void {
    this.score += points;
    const scoreDisplay = this.uiFactory.createScoreDisplay();
    console.log(scoreDisplay.show(this.score));
  }
}

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Generic Abstract Factory

When you’re ready to level up, try this advanced pattern:

// 🎯 Generic factory with type constraints
interface Theme {
  primary: string;
  secondary: string;
  emoji: string;
}

interface UIComponent<T extends Theme> {
  theme: T;
  render(): string;
}

abstract class AbstractUIFactory<T extends Theme> {
  constructor(protected theme: T) {}
  
  abstract createButton(): UIComponent<T>;
  abstract createInput(): UIComponent<T>;
  
  // 🪄 Shared logic
  getThemeInfo(): string {
    return `${this.theme.emoji} Theme: ${this.theme.primary}/${this.theme.secondary}`;
  }
}

// 🌟 Type-safe theme implementation
interface SpaceTheme extends Theme {
  primary: "cosmic-blue";
  secondary: "star-white";
  emoji: "🚀";
  special: "nebula-effect";
}

class SpaceButton implements UIComponent<SpaceTheme> {
  constructor(public theme: SpaceTheme) {}
  
  render(): string {
    return `${this.theme.emoji} Space Button with ${this.theme.special}`;
  }
}

🏗️ Advanced Topic 2: Factory Registry Pattern

For the brave developers:

// 🚀 Dynamic factory registration
class FactoryRegistry {
  private factories = new Map<string, UIFactory>();
  
  register(name: string, factory: UIFactory): void {
    this.factories.set(name, factory);
    console.log(`✨ Registered ${name} factory`);
  }
  
  getFactory(name: string): UIFactory {
    const factory = this.factories.get(name);
    if (!factory) {
      throw new Error(`🚫 Factory '${name}' not found!`);
    }
    return factory;
  }
  
  listFactories(): string[] {
    return Array.from(this.factories.keys());
  }
}

// 🎨 Usage
const registry = new FactoryRegistry();
registry.register("light", new LightThemeFactory());
registry.register("dark", new DarkThemeFactory());
registry.register("holiday", new HolidayThemeFactory());

const selectedFactory = registry.getFactory("holiday");

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Inconsistent Product Families

// ❌ Wrong way - mixing themes!
class BadFactory implements UIFactory {
  createButton(): Button {
    return new LightButton(); // 😰 Light theme
  }
  
  createCheckbox(): Checkbox {
    return new DarkCheckbox(); // 😱 Dark theme - mismatch!
  }
}

// ✅ Correct way - consistent families!
class GoodFactory implements UIFactory {
  createButton(): Button {
    return new LightButton(); // ☀️ Light theme
  }
  
  createCheckbox(): Checkbox {
    return new LightCheckbox(); // ☀️ Light theme - matches!
  }
}

🤯 Pitfall 2: Forgetting to Implement All Products

// ❌ Dangerous - incomplete factory!
class IncompleteFactory implements UIFactory {
  createButton(): Button {
    return new LightButton();
  }
  
  createCheckbox(): Checkbox {
    throw new Error("Not implemented"); // 💥 Runtime error!
  }
}

// ✅ Safe - complete implementation!
class CompleteFactory implements UIFactory {
  createButton(): Button {
    return new LightButton();
  }
  
  createCheckbox(): Checkbox {
    return new LightCheckbox(); // ✅ All products implemented!
  }
}

🛠️ Best Practices

1. 🎯 Keep Families Cohesive: All products from a factory should work together
2. 📝 Use Clear Naming: LightThemeFactory not Factory1
3. 🛡️ Leverage TypeScript: Let interfaces enforce completeness
4. 🎨 One Factory Per Theme: Don’t mix concerns
5. ✨ Consider Factory Methods: For simpler cases, factory methods might suffice

🧪 Hands-On Exercise

🎯 Challenge: Build a Restaurant Chain System

Create a type-safe restaurant system with different cuisine factories:

📋 Requirements:

• ✅ Different cuisine types (Italian, Japanese, Mexican)
• 🍕 Each cuisine has: appetizer, main course, dessert
• 👨‍🍳 Each dish has name, price, and preparation time
• 📋 Menu display functionality
• 🎨 Each cuisine needs themed emojis!

🚀 Bonus Points:

• Add dietary restrictions (vegetarian, gluten-free)
• Implement combo meal creation
• Add restaurant rating system

💡 Solution

// 🍽️ Restaurant system interfaces
interface Appetizer {
  name: string;
  price: number;
  prepTime: number;
  serve(): string;
}

interface MainCourse {
  name: string;
  price: number;
  prepTime: number;
  serve(): string;
}

interface Dessert {
  name: string;
  price: number;
  prepTime: number;
  serve(): string;
}

// 🏭 Cuisine factory
interface CuisineFactory {
  createAppetizer(): Appetizer;
  createMainCourse(): MainCourse;
  createDessert(): Dessert;
  getCuisineType(): string;
}

// 🍕 Italian implementation
class ItalianAppetizer implements Appetizer {
  name = "Bruschetta";
  price = 8.99;
  prepTime = 10;
  
  serve(): string {
    return `🍅 ${this.name} - Fresh tomatoes on toasted bread`;
  }
}

class ItalianMainCourse implements MainCourse {
  name = "Margherita Pizza";
  price = 15.99;
  prepTime = 20;
  
  serve(): string {
    return `🍕 ${this.name} - Classic pizza with mozzarella`;
  }
}

class ItalianDessert implements Dessert {
  name = "Tiramisu";
  price = 7.99;
  prepTime = 5;
  
  serve(): string {
    return `☕ ${this.name} - Coffee-flavored Italian dessert`;
  }
}

// 🇮🇹 Italian factory
class ItalianCuisineFactory implements CuisineFactory {
  createAppetizer(): Appetizer {
    return new ItalianAppetizer();
  }
  
  createMainCourse(): MainCourse {
    return new ItalianMainCourse();
  }
  
  createDessert(): Dessert {
    return new ItalianDessert();
  }
  
  getCuisineType(): string {
    return "🇮🇹 Italian Cuisine";
  }
}

// 🍱 Japanese implementation
class JapaneseAppetizer implements Appetizer {
  name = "Edamame";
  price = 5.99;
  prepTime = 5;
  
  serve(): string {
    return `🌱 ${this.name} - Steamed soybeans with sea salt`;
  }
}

class JapaneseMainCourse implements MainCourse {
  name = "Salmon Sushi Platter";
  price = 24.99;
  prepTime = 15;
  
  serve(): string {
    return `🍣 ${this.name} - Fresh salmon sushi selection`;
  }
}

// 🍽️ Restaurant using factories
class Restaurant {
  private factory: CuisineFactory;
  
  constructor(cuisineType: "italian" | "japanese" | "mexican") {
    switch(cuisineType) {
      case "italian":
        this.factory = new ItalianCuisineFactory();
        break;
      case "japanese":
        this.factory = new JapaneseCuisineFactory();
        break;
      case "mexican":
        this.factory = new MexicanCuisineFactory();
        break;
    }
  }
  
  displayMenu(): void {
    console.log(`\n📋 Menu - ${this.factory.getCuisineType()}`);
    console.log("=".repeat(40));
    
    const appetizer = this.factory.createAppetizer();
    const main = this.factory.createMainCourse();
    const dessert = this.factory.createDessert();
    
    console.log("\n🥗 Appetizers:");
    console.log(`  ${appetizer.serve()} - $${appetizer.price}`);
    
    console.log("\n🍽️ Main Courses:");
    console.log(`  ${main.serve()} - $${main.price}`);
    
    console.log("\n🍰 Desserts:");
    console.log(`  ${dessert.serve()} - $${dessert.price}`);
  }
  
  orderComboMeal(): void {
    const appetizer = this.factory.createAppetizer();
    const main = this.factory.createMainCourse();
    const dessert = this.factory.createDessert();
    
    const total = appetizer.price + main.price + dessert.price;
    const comboPrice = total * 0.9; // 10% discount
    
    console.log(`\n🎊 Combo Meal Special!`);
    console.log(`Original: $${total.toFixed(2)}`);
    console.log(`Combo Price: $${comboPrice.toFixed(2)} 💰`);
  }
}

// 🎮 Test it out!
const italianRestaurant = new Restaurant("italian");
italianRestaurant.displayMenu();
italianRestaurant.orderComboMeal();

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

• ✅ Create Abstract Factories for related object families 💪
• ✅ Ensure consistency between related objects 🛡️
• ✅ Switch implementations easily and safely 🎯
• ✅ Build flexible systems that adapt to changes 🐛
• ✅ Apply the pattern in real-world scenarios! 🚀

Remember: Abstract Factory helps you manage complexity when dealing with families of related objects! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered the Abstract Factory pattern!

Here’s what to do next:

1. 💻 Practice with the restaurant exercise above
2. 🏗️ Apply Abstract Factory to your current project
3. 📚 Move on to our next tutorial: Builder Pattern
4. 🌟 Share your implementations with the community!

Remember: Every design pattern master started by understanding one pattern at a time. Keep coding, keep learning, and most importantly, have fun! 🚀

Happy coding! 🎉🚀✨