Published on

Design Patterns: Introduction

Authors

Design patterns are an essential tool for developing scalable, maintainable, and robust software systems. They provide time-tested solutions to common problems that arise during software development. For frontend developers working with tools like React, design patterns are especially valuable for managing state, handling user interactions, and organizing components effectively.

In Part 1, we’ll cover the basics of software design patterns, highlight common patterns, and explore how they benefit both individual developers and teams, comparing small and large teams.

In Part 2, we’ll dive into patterns relevant to backend development, including those critical for scalability and performance optimization.

In Part 3, we'll conclude the series by exploring how design patterns contribute to database management, and summarize key takeaways from the series.

This series is meant for developers at all levels, providing practical examples and deep insights that will be useful whether you’re building small projects or working within large teams.

"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs

Table of contents

What Are Software Design Patterns?

Design patterns are reusable, general solutions to recurring problems in software design. They aren’t ready-to-use code but templates that help solve particular design challenges. Patterns help developers manage separation of concerns, scalability, maintainability, and code reuse.

"A pattern is a solution to a problem in a context."
— Christopher Alexander, Architect and Author of "A Pattern Language"

Example: Flux Architecture & Observer Pattern

The Flux Architecture emphasizes a unidirectional data flow. In React, libraries like Redux follow the Flux pattern to handle global state. The Observer Pattern is inherently part of this architecture, where React components subscribe to the state and re-render when updates occur.

The popularity of this pattern stems from:

  • Predictable State: Unidirectional data flow ensures that the state changes in predictable ways.
  • Reactivity: With components acting as observers, the UI automatically updates in response to state changes, enhancing user experience.
  • Scalability: As applications grow, this architecture allows for organized state management, making it easier for teams to collaborate.

For an example implementation of the flux architecture in React Redux, refer to Appendix A: Flux Architecture & Observer Pattern.

Why Design Patterns Matter for Individuals and Teams

For Individual Developers

For individual developers, design patterns provide a consistent structure to the code. Patterns simplify debugging and ensure that the application logic is easy to follow. Instead of crafting ad hoc solutions, developers can rely on proven approaches, resulting in cleaner and more maintainable code.

"One of the best ways to learn how to code is to study proven design patterns and understand why they work."
— Erich Gamma

Example: Proxy Pattern

A practical use case for the Proxy Pattern in React is in implementing virtual scrolling. In virtual scrolling, a large list of items is displayed by rendering only a subset of elements that are visible in the viewport. The Proxy Pattern can help manage this behavior by controlling how items are accessed and ensuring that only necessary elements are rendered at any given time.

For an example implementation of the Proxy Pattern in React, refer to Appendix B: Proxy Pattern.

For Teams (Small and Large)

Design patterns provide a shared language for solving common challenges in development teams. They promote modularity and reuse, making the codebase easier to maintain and scale, especially in collaborative environments.

"Design patterns make the architecture more scalable and ensure that everyone speaks the same language in a team."
— Martin Fowler, Software Engineer and Author of "Refactoring"

Patterns in Small Teams

In small teams, design patterns can help by keeping the code modular and flexible, allowing for rapid iteration and easier refactoring. Teams can avoid over-complicating their code while still applying structured solutions to recurring problems.

Example: Chain of Responsibility Pattern

The Chain of Responsibility pattern is beneficial for managing requests where multiple handlers can process or ignore them. In frontend development, this pattern is particularly useful for form validation, where each validation rule can be encapsulated as a handler in a chain.

This pattern aids small teams by:

  • Separation of Concerns: Each validation rule can be independently developed and tested, simplifying the overall code structure.
  • Modularity: New validation rules can be added to the chain without modifying existing ones, facilitating easier collaboration among team members.
  • Clear Responsibilities: Each validator clearly defines its role, allowing team members to understand and maintain the code more effectively.

For an example implementation, refer to Appendix C: Chain of Responsibility Pattern.

Patterns in Large Teams

For large teams managing complex applications, patterns provide a blueprint that ensures consistency and scalability. They help developers maintain a shared vision while adding new features or refactoring existing ones.

Example: Command Pattern

The Command Pattern encapsulates requests as objects, providing flexibility in managing and executing operations. This is particularly useful in complex applications that require features like undo/redo functionality or queued commands.

This pattern benefits large teams by:

  • Action Encapsulation: Commands encapsulate all details of an action, allowing for easier reuse and organization of code.
  • Standardization: Commands provide a consistent interface for handling actions, making it easier for team members to collaborate without stepping on each other's toes.
  • History Management: The pattern supports features like undo/redo, enhancing user experience and reducing the likelihood of errors during complex interactions.

For an example implementation, refer to Appendix D: Command Pattern.

Conclusion

Design patterns are a powerful tool for improving the quality and structure of software systems. For individual developers, patterns provide reusable solutions that simplify debugging, code maintenance, and scalability. For teams, patterns offer a shared structure, allowing teams to collaborate more efficiently, regardless of size.

In this post, we explored some foundational patterns such as Flux, Proxy, and Command, and their importance in real-world scenarios.

In the next post, we will dive deeper into backend patterns and additional paradigms that are crucial for backend development.
Stay tuned!

Appendix: Code Examples

Appendix A: Flux Architecture & Observer Pattern

// Redux store (Flux Architecture)
import { createStore } from 'redux'

// Actions
const INCREMENT = 'INCREMENT'

const incrementAction = () => ({ type: INCREMENT })

// Reducer (handles state changes based on actions)
const counterReducer = (state = { count: 0 }, action: any) => {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 }
    default:
      return state
  }
}

// Store (global state)
const store = createStore(counterReducer)

store.subscribe(() => console.log(store.getState())) // Observer pattern

// React component observing the store state
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'

const FluxObserverExample: React.FC = () => {
  const count = useSelector((state: any) => state.count)
  const dispatch = useDispatch()

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(incrementAction())}>Increment</button>
    </div>
  )
}

export default FluxObserverExample

Appendix B: Proxy Pattern

import React, { useEffect, useState } from 'react'

// Proxy for managing a list of items
const createListProxy = (initialItems: string[]) => {
  return new Proxy(initialItems, {
    get(target, prop) {
      if (prop in target) {
        return target[prop]
      } else {
        console.warn(`Property ${String(prop)} does not exist.`)
        return null
      }
    },
    set(target, prop, value) {
      if (typeof value !== 'string' || value.trim() === '') {
        console.warn('Invalid item. Must be a non-empty string.')
        return false
      }
      target[prop] = value
      return true
    },
  })
}

const ProxyPatternExample: React.FC = () => {
  const [items, setItems] = useState(() => createListProxy(['Item 1', 'Item 2', 'Item 3']))
  const [visibleItems, setVisibleItems] = useState<string[]>([])

  useEffect(() => {
    // Simulating virtual scrolling by updating visible items
    setVisibleItems(items.slice(0, 2)) // Render only first 2 items
  }, [items])

  const addItem = () => {
    const newItem = `Item ${items.length + 1}`
    items.push(newItem) // Safe write
  }

  const accessInvalidItem = () => {
    console.log(items[5]) // Warning: Property '5' does not exist.
  }

  return (
    <div>
      <h1>Visible Items:</h1>
      <ul>
        {visibleItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
      <button onClick={accessInvalidItem}>Access Invalid Item</button>
    </div>
  )
}

export default ProxyPatternExample

Appendix C: Chain of Responsibility Pattern

// Chain of Responsibility for form validation
interface Validator {
  setNext(handler: Validator): Validator
  handle(request: string): string | null
}

abstract class AbstractValidator implements Validator {
  private nextHandler: Validator | null = null

  setNext(handler: Validator): Validator {
    this.nextHandler = handler
    return handler
  }

  handle(request: string): string | null {
    if (this.nextHandler) {
      return this.nextHandler.handle(request)
    }
    return null
  }
}

// Specific validators
class NotEmptyValidator extends AbstractValidator {
  handle(request: string): string | null {
    if (!request.trim()) {
      return 'Field cannot be empty.'
    }
    return super.handle(request)
  }
}

class MinLengthValidator extends AbstractValidator {
  constructor(private minLength: number) {
    super()
  }

  handle(request: string): string | null {
    if (request.length < this.minLength) {
      return `Field must have at least ${this.minLength} characters.`
    }
    return super.handle(request)
  }
}

// React component using the chain of validators
const ChainOfResponsibilityExample: React.FC = () => {
  const [value, setValue] = React.useState('')
  const [error, setError] = React.useState<string | null>(null)

  const validateInput = () => {
    const notEmptyValidator = new NotEmptyValidator()
    const minLengthValidator = new MinLengthValidator(5)

    notEmptyValidator.setNext(minLengthValidator)
    const validationError = notEmptyValidator.handle(value)
    setError(validationError)
  }

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button onClick={validateInput}>Submit</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  )
}

export default ChainOfResponsibilityExample

Appendix D: Command Pattern

// Command interface
interface Command {
  execute(): void
}

// Concrete command to increment a counter
class IncrementCommand implements Command {
  constructor(private setState: React.Dispatch<React.SetStateAction<number>>) {}

  execute() {
    this.setState((prev) => prev + 1)
  }
}

// Command history for undo/redo
class CommandHistory {
  private history: Command[] = []

  add(command: Command) {
    this.history.push(command)
    command.execute()
  }

  undo() {
    this.history.pop()
  }
}

// React component using the Command Pattern
const CommandPatternExample: React.FC = () => {
  const [count, setCount] = React.useState(0)
  const history = React.useRef(new CommandHistory())

  const handleIncrement = () => {
    const command = new IncrementCommand(setCount)
    history.current.add(command)
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={() => history.current.undo()}>Undo</button>
    </div>
  )
}

export default CommandPatternExample