📘 Flyweight Pattern: Memory Optimization

🎯 Introduction

Welcome to this exciting tutorial on the Flyweight Pattern! 🎉 In this guide, we’ll explore how to optimize memory usage in TypeScript applications by sharing common data efficiently.

You’ll discover how the Flyweight Pattern can transform your TypeScript development experience when building applications that need to handle thousands of similar objects. Whether you’re creating games 🎮, rendering graphics 🎨, or managing large datasets 📊, understanding the Flyweight Pattern is essential for writing memory-efficient code.

By the end of this tutorial, you’ll feel confident using the Flyweight Pattern to optimize your own projects! Let’s dive in! 🏊‍♂️

📚 Understanding Flyweight Pattern

🤔 What is the Flyweight Pattern?

The Flyweight Pattern is like a car-sharing service 🚗. Think of it as sharing common resources among multiple users instead of everyone owning their own car. Just like how car-sharing reduces the total number of cars needed in a city, the Flyweight Pattern reduces memory usage by sharing common data!

In TypeScript terms, the Flyweight Pattern separates an object’s intrinsic state (shared data) from its extrinsic state (unique data). This means you can:

✨ Share common data across thousands of objects
🚀 Reduce memory footprint dramatically
🛡️ Maintain object-oriented design principles

💡 Why Use the Flyweight Pattern?

Here’s why developers love the Flyweight Pattern:

Memory Efficiency 🔒: Store shared data only once
Performance Boost 💻: Less memory allocation means faster operations
Scalability 📖: Handle millions of objects without memory issues
Clean Architecture 🔧: Separate concerns between shared and unique data

Real-world example: Imagine building a text editor 📝. With the Flyweight Pattern, you can share font and style information among thousands of characters instead of storing it for each one!

🔧 Basic Syntax and Usage

📝 Simple Example

Let’s start with a friendly example:

// 👋 Hello, Flyweight Pattern!
interface TreeType {
  name: string;     // 🌳 Tree species
  color: string;    // 🎨 Leaf color
  texture: string;  // 🖼️ Bark texture
  
  // 🎯 Draw method uses extrinsic state
  draw(x: number, y: number): void;
}

// 🏗️ Concrete flyweight
class ConcreteTreeType implements TreeType {
  constructor(
    public name: string,
    public color: string,
    public texture: string
  ) {}
  
  draw(x: number, y: number): void {
    console.log(`🌳 Drawing ${this.name} tree at (${x}, ${y})`);
  }
}

// 🏭 Flyweight factory
class TreeFactory {
  private static treeTypes: Map<string, TreeType> = new Map();
  
  // ✨ Get or create tree type
  static getTreeType(name: string, color: string, texture: string): TreeType {
    const key = `${name}_${color}_${texture}`;
    
    if (!this.treeTypes.has(key)) {
      console.log(`🆕 Creating new tree type: ${name}`);
      this.treeTypes.set(key, new ConcreteTreeType(name, color, texture));
    }
    
    return this.treeTypes.get(key)!;
  }
  
  // 📊 Show memory savings
  static getTreeTypeCount(): number {
    return this.treeTypes.size;
  }
}

💡 Explanation: Notice how we use a factory to manage shared tree types! The factory ensures we only create one instance of each unique tree type combination.

🎯 Common Patterns

Here are patterns you’ll use daily:

// 🌲 Individual tree with position (extrinsic state)
class Tree {
  constructor(
    private x: number,      // 📍 X position
    private y: number,      // 📍 Y position
    private type: TreeType  // 🌳 Shared tree type
  ) {}
  
  // 🎨 Draw this tree
  draw(): void {
    this.type.draw(this.x, this.y);
  }
}

// 🏞️ Forest manager
class Forest {
  private trees: Tree[] = [];
  
  // 🌱 Plant a tree
  plantTree(x: number, y: number, name: string, color: string, texture: string): void {
    const type = TreeFactory.getTreeType(name, color, texture);
    const tree = new Tree(x, y, type);
    this.trees.push(tree);
  }
  
  // 🎨 Draw all trees
  draw(): void {
    console.log(`🏞️ Drawing forest with ${this.trees.length} trees...`);
    this.trees.forEach(tree => tree.draw());
  }
  
  // 📊 Show memory savings
  showStats(): void {
    console.log(`📊 Forest Stats:`);
    console.log(`  🌳 Total trees: ${this.trees.length}`);
    console.log(`  💾 Unique tree types: ${TreeFactory.getTreeTypeCount()}`);
    console.log(`  🚀 Memory saved: ${((1 - TreeFactory.getTreeTypeCount() / this.trees.length) * 100).toFixed(1)}%`);
  }
}

💡 Practical Examples

🛒 Example 1: Text Editor Characters

Let’s build something real:

// 📝 Character formatting (intrinsic state)
interface CharacterFormat {
  font: string;      // 🔤 Font family
  size: number;      // 📏 Font size
  color: string;     // 🎨 Text color
  bold: boolean;     // 🅱️ Bold style
  italic: boolean;   // 🅸️ Italic style
}

// ✨ Flyweight character format
class SharedCharacterFormat implements CharacterFormat {
  constructor(
    public font: string,
    public size: number,
    public color: string,
    public bold: boolean,
    public italic: boolean
  ) {}
  
  // 🔑 Create unique key
  getKey(): string {
    return `${this.font}_${this.size}_${this.color}_${this.bold}_${this.italic}`;
  }
}

// 🏭 Format factory
class FormatFactory {
  private static formats: Map<string, SharedCharacterFormat> = new Map();
  
  // 🎨 Get or create format
  static getFormat(
    font: string,
    size: number,
    color: string,
    bold: boolean,
    italic: boolean
  ): SharedCharacterFormat {
    const format = new SharedCharacterFormat(font, size, color, bold, italic);
    const key = format.getKey();
    
    if (!this.formats.has(key)) {
      console.log(`🆕 Creating new format: ${key}`);
      this.formats.set(key, format);
    }
    
    return this.formats.get(key)!;
  }
  
  // 📊 Get statistics
  static getFormatCount(): number {
    return this.formats.size;
  }
}

// 📄 Individual character
class Character {
  constructor(
    private char: string,           // 🔤 The actual character
    private position: number,       // 📍 Position in document
    private format: SharedCharacterFormat  // 🎨 Shared formatting
  ) {}
  
  // 🖨️ Display character
  display(): string {
    const style = this.format.bold ? '**' : '';
    const italic = this.format.italic ? '_' : '';
    return `${style}${italic}${this.char}${italic}${style}`;
  }
}

// 📝 Text editor
class TextEditor {
  private characters: Character[] = [];
  
  // ✍️ Add text with formatting
  addText(text: string, font: string, size: number, color: string, bold: boolean, italic: boolean): void {
    const format = FormatFactory.getFormat(font, size, color, bold, italic);
    
    for (let i = 0; i < text.length; i++) {
      const char = new Character(text[i], this.characters.length, format);
      this.characters.push(char);
    }
    
    console.log(`✍️ Added "${text}" with format`);
  }
  
  // 📋 Display document
  display(): void {
    console.log("📄 Document content:");
    const content = this.characters.map(char => char.display()).join('');
    console.log(content);
  }
  
  // 📊 Show memory efficiency
  showStats(): void {
    console.log(`📊 Editor Stats:`);
    console.log(`  🔤 Total characters: ${this.characters.length}`);
    console.log(`  🎨 Unique formats: ${FormatFactory.getFormatCount()}`);
    console.log(`  💾 Memory efficiency: ${((1 - FormatFactory.getFormatCount() / this.characters.length) * 100).toFixed(1)}%`);
  }
}

// 🎮 Let's use it!
const editor = new TextEditor();
editor.addText("Hello ", "Arial", 12, "black", false, false);
editor.addText("TypeScript", "Arial", 12, "blue", true, false);
editor.addText("! 🚀", "Arial", 12, "black", false, false);
editor.display();
editor.showStats();

🎯 Try it yourself: Add a method to change formatting for a range of characters!

🎮 Example 2: Game Particle System

Let’s make it fun:

// 🎆 Particle type (intrinsic state)
interface ParticleType {
  texture: string;    // 🖼️ Particle texture
  color: string;      // 🎨 Base color
  size: number;       // 📏 Base size
  behavior: string;   // 🎭 Movement pattern
}

// ✨ Concrete particle type
class ConcreteParticleType implements ParticleType {
  constructor(
    public texture: string,
    public color: string,
    public size: number,
    public behavior: string
  ) {}
  
  // 🎯 Create unique identifier
  getId(): string {
    return `${this.texture}_${this.color}_${this.size}_${this.behavior}`;
  }
}

// 🏭 Particle factory
class ParticleFactory {
  private static types: Map<string, ParticleType> = new Map();
  
  // 🎆 Get or create particle type
  static getParticleType(
    texture: string,
    color: string,
    size: number,
    behavior: string
  ): ParticleType {
    const type = new ConcreteParticleType(texture, color, size, behavior);
    const id = type.getId();
    
    if (!this.types.has(id)) {
      console.log(`🆕 Creating particle type: ${texture}`);
      this.types.set(id, type);
    }
    
    return this.types.get(id)!;
  }
  
  // 📊 Get type count
  static getTypeCount(): number {
    return this.types.size;
  }
}

// 🎇 Individual particle (extrinsic state)
class Particle {
  constructor(
    public x: number,              // 📍 X position
    public y: number,              // 📍 Y position
    public velocity: number,       // 🚀 Speed
    public direction: number,      // 🧭 Direction in degrees
    public lifespan: number,       // ⏱️ Remaining life
    private type: ParticleType     // 🎆 Shared type
  ) {}
  
  // 🔄 Update particle
  update(deltaTime: number): void {
    const radians = this.direction * Math.PI / 180;
    this.x += Math.cos(radians) * this.velocity * deltaTime;
    this.y += Math.sin(radians) * this.velocity * deltaTime;
    this.lifespan -= deltaTime;
  }
  
  // 🎨 Render particle
  render(): void {
    if (this.lifespan > 0) {
      console.log(`✨ Particle at (${this.x.toFixed(1)}, ${this.y.toFixed(1)})`);
    }
  }
  
  // 💀 Check if dead
  isDead(): boolean {
    return this.lifespan <= 0;
  }
}

// 🎮 Particle system manager
class ParticleSystem {
  private particles: Particle[] = [];
  private maxParticles: number = 10000;
  
  // 🎆 Emit particles
  emit(
    count: number,
    x: number,
    y: number,
    texture: string,
    color: string,
    size: number,
    behavior: string
  ): void {
    const type = ParticleFactory.getParticleType(texture, color, size, behavior);
    
    for (let i = 0; i < count; i++) {
      if (this.particles.length >= this.maxParticles) break;
      
      const particle = new Particle(
        x,
        y,
        Math.random() * 100 + 50,      // 🎲 Random velocity
        Math.random() * 360,           // 🎲 Random direction
        Math.random() * 2 + 1,         // 🎲 Random lifespan
        type
      );
      
      this.particles.push(particle);
    }
    
    console.log(`🎆 Emitted ${count} particles!`);
  }
  
  // 🔄 Update all particles
  update(deltaTime: number): void {
    this.particles = this.particles.filter(particle => {
      particle.update(deltaTime);
      return !particle.isDead();
    });
  }
  
  // 📊 Show system stats
  showStats(): void {
    console.log(`🎮 Particle System Stats:`);
    console.log(`  ✨ Active particles: ${this.particles.length}`);
    console.log(`  🎨 Unique particle types: ${ParticleFactory.getTypeCount()}`);
    console.log(`  💾 Memory optimization: ${((1 - ParticleFactory.getTypeCount() / this.particles.length) * 100).toFixed(1)}%`);
  }
}

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Composite Flyweights

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

// 🎯 Complex flyweight with nested shared data
interface ComplexFlyweight {
  primaryData: SharedData;      // 🎨 Primary shared data
  secondaryData: SharedData;    // 🎭 Secondary shared data
  render(context: RenderContext): void;
}

// 🏗️ Shared data structure
class SharedData {
  constructor(
    public id: string,
    public properties: Map<string, any>
  ) {}
}

// 🎪 Render context (extrinsic)
interface RenderContext {
  x: number;
  y: number;
  scale: number;
  rotation: number;
  opacity: number;
}

// 🏭 Advanced factory with caching
class AdvancedFlyweightFactory {
  private static cache: Map<string, ComplexFlyweight> = new Map();
  private static sharedDataCache: Map<string, SharedData> = new Map();
  
  // 🪄 Create complex flyweight
  static createComplexFlyweight(
    primaryId: string,
    secondaryId: string,
    primaryProps: Map<string, any>,
    secondaryProps: Map<string, any>
  ): ComplexFlyweight {
    const key = `${primaryId}_${secondaryId}`;
    
    if (!this.cache.has(key)) {
      const primary = this.getOrCreateSharedData(primaryId, primaryProps);
      const secondary = this.getOrCreateSharedData(secondaryId, secondaryProps);
      
      const flyweight: ComplexFlyweight = {
        primaryData: primary,
        secondaryData: secondary,
        render(context: RenderContext): void {
          console.log(`✨ Rendering complex object at (${context.x}, ${context.y})`);
        }
      };
      
      this.cache.set(key, flyweight);
    }
    
    return this.cache.get(key)!;
  }
  
  // 💾 Get or create shared data
  private static getOrCreateSharedData(id: string, properties: Map<string, any>): SharedData {
    if (!this.sharedDataCache.has(id)) {
      this.sharedDataCache.set(id, new SharedData(id, properties));
    }
    return this.sharedDataCache.get(id)!;
  }
}

🏗️ Advanced Topic 2: Thread-Safe Flyweight

For the brave developers:

// 🚀 Thread-safe flyweight pool
class ThreadSafeFlyweightPool<T> {
  private pool: T[] = [];
  private inUse: Set<T> = new Set();
  private factory: () => T;
  private maxSize: number;
  
  constructor(factory: () => T, maxSize: number = 100) {
    this.factory = factory;
    this.maxSize = maxSize;
  }
  
  // 🎯 Acquire flyweight from pool
  acquire(): T | null {
    let flyweight: T | undefined;
    
    // 🔍 Try to find available flyweight
    for (const item of this.pool) {
      if (!this.inUse.has(item)) {
        flyweight = item;
        break;
      }
    }
    
    // 🆕 Create new if needed and pool not full
    if (!flyweight && this.pool.length < this.maxSize) {
      flyweight = this.factory();
      this.pool.push(flyweight);
    }
    
    // 📌 Mark as in use
    if (flyweight) {
      this.inUse.add(flyweight);
      console.log(`✅ Acquired flyweight (${this.inUse.size}/${this.pool.length} in use)`);
    }
    
    return flyweight || null;
  }
  
  // 🔄 Release flyweight back to pool
  release(flyweight: T): void {
    if (this.inUse.has(flyweight)) {
      this.inUse.delete(flyweight);
      console.log(`♻️ Released flyweight (${this.inUse.size}/${this.pool.length} in use)`);
    }
  }
  
  // 📊 Get pool statistics
  getStats(): { total: number; inUse: number; available: number } {
    return {
      total: this.pool.length,
      inUse: this.inUse.size,
      available: this.pool.length - this.inUse.size
    };
  }
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Modifying Shared State

// ❌ Wrong way - modifying shared state!
class BadFlyweight {
  public sharedData: string[] = [];
  
  addData(item: string): void {
    this.sharedData.push(item); // 💥 This affects all instances!
  }
}

// ✅ Correct way - keep shared state immutable!
class GoodFlyweight {
  constructor(
    private readonly sharedData: ReadonlyArray<string>
  ) {}
  
  // 🛡️ Return new array instead of modifying
  addData(item: string): ReadonlyArray<string> {
    return [...this.sharedData, item];
  }
}

🤯 Pitfall 2: Not Identifying Intrinsic vs Extrinsic

// ❌ Dangerous - everything is intrinsic!
class BadCharacter {
  constructor(
    public font: string,
    public size: number,
    public color: string,
    public x: number,      // 💥 Position should be extrinsic!
    public y: number       // 💥 Position should be extrinsic!
  ) {}
}

// ✅ Safe - proper separation!
class CharacterType {
  constructor(
    public readonly font: string,
    public readonly size: number,
    public readonly color: string
  ) {}
}

class GoodCharacter {
  constructor(
    private x: number,              // ✅ Extrinsic
    private y: number,              // ✅ Extrinsic
    private type: CharacterType     // ✅ Intrinsic (shared)
  ) {}
}

🛠️ Best Practices

🎯 Identify Shared State: Carefully analyze what data can be shared
📝 Keep Flyweights Immutable: Never modify shared state
🛡️ Use Factory Pattern: Centralize flyweight creation and management
🎨 Separate Concerns: Clearly distinguish intrinsic from extrinsic state
✨ Monitor Memory Usage: Track your memory savings with statistics

🧪 Hands-On Exercise

🎯 Challenge: Build a Chess Game Renderer

Create a memory-efficient chess game renderer:

📋 Requirements:

✅ Chess pieces with shared textures and models
🏷️ Different piece types (pawn, rook, knight, etc.)
👤 Two colors (black and white)
📅 Board positions as extrinsic state
🎨 Each piece type needs a unique emoji!

🚀 Bonus Points:

Add move validation
Implement piece animation states
Create a move history tracker

💡 Solution

🔍 Click to see solution

// 🎯 Our memory-efficient chess system!
interface ChessPieceType {
  name: string;
  emoji: string;
  color: "white" | "black";
  movePattern: string;
}

// ♟️ Concrete piece type (flyweight)
class ConcreteChessPieceType implements ChessPieceType {
  constructor(
    public name: string,
    public emoji: string,
    public color: "white" | "black",
    public movePattern: string
  ) {}
  
  getKey(): string {
    return `${this.name}_${this.color}`;
  }
}

// 🏭 Chess piece factory
class ChessPieceFactory {
  private static pieces: Map<string, ChessPieceType> = new Map();
  
  static getPiece(name: string, color: "white" | "black"): ChessPieceType {
    const emoji = this.getEmoji(name, color);
    const piece = new ConcreteChessPieceType(name, emoji, color, this.getMovePattern(name));
    const key = piece.getKey();
    
    if (!this.pieces.has(key)) {
      console.log(`🆕 Creating ${color} ${name}`);
      this.pieces.set(key, piece);
    }
    
    return this.pieces.get(key)!;
  }
  
  private static getEmoji(name: string, color: "white" | "black"): string {
    const emojis: Record<string, Record<"white" | "black", string>> = {
      king: { white: "♔", black: "♚" },
      queen: { white: "♕", black: "♛" },
      rook: { white: "♖", black: "♜" },
      bishop: { white: "♗", black: "♝" },
      knight: { white: "♘", black: "♞" },
      pawn: { white: "♙", black: "♟" }
    };
    return emojis[name][color];
  }
  
  private static getMovePattern(name: string): string {
    const patterns: Record<string, string> = {
      king: "one square any direction",
      queen: "any direction any distance",
      rook: "horizontal/vertical any distance",
      bishop: "diagonal any distance",
      knight: "L-shape",
      pawn: "forward one, capture diagonal"
    };
    return patterns[name];
  }
  
  static getPieceCount(): number {
    return this.pieces.size;
  }
}

// 🏁 Chess piece instance
class ChessPiece {
  constructor(
    private row: number,
    private col: number,
    private type: ChessPieceType
  ) {}
  
  move(newRow: number, newCol: number): void {
    console.log(`${this.type.emoji} Moving ${this.type.name} from (${this.row},${this.col}) to (${newRow},${newCol})`);
    this.row = newRow;
    this.col = newCol;
  }
  
  getPosition(): [number, number] {
    return [this.row, this.col];
  }
  
  getType(): ChessPieceType {
    return this.type;
  }
}

// ♟️ Chess board
class ChessBoard {
  private board: (ChessPiece | null)[][] = [];
  private pieces: ChessPiece[] = [];
  
  constructor() {
    // 🏁 Initialize empty board
    for (let i = 0; i < 8; i++) {
      this.board[i] = new Array(8).fill(null);
    }
    this.setupBoard();
  }
  
  private setupBoard(): void {
    // 👑 Setup back row pieces
    const backRowPieces = ["rook", "knight", "bishop", "queen", "king", "bishop", "knight", "rook"];
    
    // ⚪ White pieces
    backRowPieces.forEach((pieceName, col) => {
      this.addPiece(0, col, pieceName, "white");
    });
    
    // ♟️ White pawns
    for (let col = 0; col < 8; col++) {
      this.addPiece(1, col, "pawn", "white");
    }
    
    // ⚫ Black pieces
    backRowPieces.forEach((pieceName, col) => {
      this.addPiece(7, col, pieceName, "black");
    });
    
    // ♟️ Black pawns
    for (let col = 0; col < 8; col++) {
      this.addPiece(6, col, "pawn", "black");
    }
  }
  
  private addPiece(row: number, col: number, name: string, color: "white" | "black"): void {
    const pieceType = ChessPieceFactory.getPiece(name, color);
    const piece = new ChessPiece(row, col, pieceType);
    this.board[row][col] = piece;
    this.pieces.push(piece);
  }
  
  display(): void {
    console.log("\n♟️ Chess Board:");
    console.log("  a b c d e f g h");
    for (let row = 7; row >= 0; row--) {
      let rowStr = `${row + 1} `;
      for (let col = 0; col < 8; col++) {
        const piece = this.board[row][col];
        rowStr += piece ? piece.getType().emoji + " " : "· ";
      }
      console.log(rowStr);
    }
  }
  
  showStats(): void {
    console.log("\n📊 Chess Board Stats:");
    console.log(`  ♟️ Total pieces: ${this.pieces.length}`);
    console.log(`  💾 Unique piece types: ${ChessPieceFactory.getPieceCount()}`);
    console.log(`  🚀 Memory efficiency: ${((1 - ChessPieceFactory.getPieceCount() / this.pieces.length) * 100).toFixed(1)}%`);
  }
}

// 🎮 Test it out!
const chessGame = new ChessBoard();
chessGame.display();
chessGame.showStats();

🎓 Key Takeaways

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

✅ Create memory-efficient applications with confidence 💪
✅ Avoid common flyweight mistakes that trip up beginners 🛡️
✅ Apply the pattern in real projects 🎯
✅ Debug memory issues like a pro 🐛
✅ Build scalable systems with TypeScript! 🚀

Remember: The Flyweight Pattern is your friend when dealing with thousands of similar objects! It’s here to help you write memory-efficient code. 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered the Flyweight Pattern!

Here’s what to do next:

💻 Practice with the exercises above
🏗️ Build a particle system or text editor using the Flyweight Pattern
📚 Move on to our next tutorial: Proxy Pattern: Controlled Access
🌟 Share your memory optimization success stories!

Remember: Every TypeScript expert was once a beginner. Keep coding, keep learning, and most importantly, have fun! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn