Forem: andres paladines

Design patterns: Part Two - A brief explanation of structural pattern

andres paladines — Sun, 16 Jun 2024 23:06:30 +0000

The picture was taken from boredpanda.

Hello everyone!

Starting my second post with one of the most basic but never unnecessary topics; Design patterns.

The previous post targets Creational Patterns, and this one will focus on Structural Patterns.

Let's start listing them again:

.
├── Creational Patterns (previous post)
│   ├── Singleton
│   ├── Factory Method
│   ├── Builder
│   ├── Abstract Factory
│   ├── Prototype
├── Structural Patterns (current post)
│   ├── Adapter
│   ├── Decorator
│   ├── Facade
│   ├── Composite
│   ├── Proxy
├── Behavioral Patterns (Working on it)
│   ├── Observer
│   ├── Strategy
│   ├── Command
│   ├── Chain of Responsibility
│   ├── Mediator
│   ├── State
│   ├── Template Method
.

Structural Patterns

This post will focus on Structural Patterns and how to construct them with swift and javascript. So, Let's start!

What does that mean by Structural pattern?

It is how classes and objects are composed to form larger structures. These patterns help ensure that if one part of a system changes, the entire structure doesn’t need to change. They facilitate design by identifying a simple way to realize relationships among entities.

Adapter

Basically, it allows incompatible interfaces to work together by acting as a bridge.
Use case: Adapting a UIKit View inside SwiftUI.

Swift (Adapting UIKit to SwiftUI):

// This is simple SwiftUI view representing a label
class UILabelView: UIView {
    private let label: UILabel

    init(text: String) {
        self.label = UILabel()
        super.init(frame: .zero)
        self.label.text = text
        self.label.textAlignment = .center
        self.addSubview(label)
        label.ytanslatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: self.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: self.centerYAnchor)
        ])
}

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented.")
    }
}

Use case: Adapting a Firebase logger to have extra features in case it cannot be extended (Open close principle, not edit but extend object functionalities).

JavaScript:

class FirebaseAnalytics {
    logEvent(name, parameters) {
        console.log(`Logging event to Firebase: ${name}, parameters: ${JSON.stringify(parameters)}`);
    }
}

class FirebaseAdapter {
    constructor() {
        this.firebaseAnalytics = new FirebaseAnalytics();
    }

    trackEvent(name, properties) {
        this.firebaseAnalytics.logEvent(name, properties);
    }

    trackUser(name, email) {
        this.trackEvent(name, { method: email });
    }

}

// Usage
const analyticsService = new FirebaseAdapter();
analyticsService.trackEvent("user_signup", { method: "email" });
analyticsService.trackUser("John", "Doe");

Decorator

Adds extra responsibilities to an object dynamically without altering its core functionality.
Use case: Adding different logging levels (info, debug, error) dynamically.

Swift:

protocol Logger {
    func log(message: String)
}

class BasicLogger: Logger {
    func log(message: String) {
        print(message)
    }
}

class LoggerDecorator: Logger {
    private let wrapped: Logger

    init(_ wrapped: Logger) {
        self.wrapped = wrapped
    }

    func log(message: String) {
        wrapped.log(message: message)
    }
}

class InfoLogger: LoggerDecorator {
    override func log(message: String) {
        super.log(message: "INFO: \(message)")
    }
}

class ErrorLogger: LoggerDecorator {
    override func log(message: String) {
        super.log(message: "ERROR: \(message)")
    }
}

// Usage
let logger: Logger = InfoLogger(ErrorLogger(BasicLogger()))
let loggerInfo: Logger = InfoLogger(BasicLogger())
logger.log(message: "An error occurred") //ERROR: INFO: An error occurred
loggerInfo.log(message: "An info message was sent") //INFO: An info message was sent

JavaScript:

class BasicLogger {
    log(message) {
        console.log(message);
    }
}

class LoggerDecorator {
    constructor(wrapped) {
        this.wrapped = wrapped;
    }

    log(message) {
        this.wrapped.log(message);
    }
}

class InfoLogger extends LoggerDecorator {
    log(message) {
        super.log(`INFO: ${message}`);
    }
}

class ErrorLogger extends LoggerDecorator {
    log(message) {
        super.log(`ERROR: ${message}`);
    }
}

// Usage
const logger = new ErrorLogger(new InfoLogger(new BasicLogger()));
const loggerInfo = new InfoLogger(new BasicLogger());
logger.log("An error occurred");
loggerInfo.log("This is an info message");

Facade

With this, we create a simple interface that covers a complex object or objects, making it/them easier to use.
Use case: Providing a simplified interface to a complex set of APIs.

Swift:

class ComplexSystemA {
    func operationA1() { print("Operation A1") }
    func operationA2() { print("Operation A2") }
}

class ComplexSystemB {
    func operationB1() { print("Operation B1") }
    func operationB2() { print("Operation B2") }
}

class Facade {
    private let systemA = ComplexSystemA()
    private let systemB = ComplexSystemB()

    func operationOne() {
        systemA.operationA1()
        systemB.operationB1()
    }

    func operationTwo() {
        systemA.operationA2()
        systemB.operationB2()
    }
}

// Usage
let facade = Facade()
facade.operationOne()

JavaScript:

class ComplexSystemA {
    operationA1() { console.log("Operation A1"); }
    operationA2() { console.log("Operation A2"); }
}

class ComplexSystemB {
    operationB1() { console.log("Operation B1"); }
    operationB2() { console.log("Operation B2"); }
}

class Facade {
    constructor() {
        this.systemA = new ComplexSystemA();
        this.systemB = new ComplexSystemB();
    }

    simplifiedOperationOne() {
        this.systemA.operationA1();
        this.systemB.operationB1();
    }
}

// Usage
const facade = new Facade();
facade.simplifiedOperation();

Composite

This pattern allow us to compose a tree of objects to represent part or whole hierarchies.
Use case: Implementing a File System Structure:
In a file system, files and directories can be treated uniformly. Both can be added, removed, or displayed. Directories can contain files or other directories.

Swift:

//The protocol will define a common interface for leaf and composite objects.
protocol FileSystemComponent {
    var name: String { get }
    func display(indent: String)
}

//File represents the leaf objects
class File: FileSystemComponent {
    var name: String

    init(name: String) {
        self.name = name
    }

    func display(indent: String) {
        print("\(indent)- \(name)")
    }
}

//Directory represents the composite objects
class Directory: FileSystemComponent {
    var name: String
//`components` represents a list of new leafs or composite objects
    private var components = [FileSystemComponent]()

    init(name: String) {
        self.name = name
    }

    func add(component: FileSystemComponent) {
        components.append(component)
    }

    func display(indent: String) {
        print("\(indent)+ \(name)")
        for component in components {
            component.display(indent: indent + "  ")
        }
    }
}

//Finally, the usage of these objecs:
let file1 = File(name: "File1.txt")
let file2 = File(name: "File2.txt")
let file3 = File(name: "File3.txt")

let directory1 = Directory(name: "Directory1")
directory1.add(component: file1)

let directory2 = Directory(name: "Directory2")
directory2.add(component: file2)
directory2.add(component: file3)

let rootDirectory = Directory(name: "RootDirectory")
rootDirectory.add(component: directory1)
rootDirectory.add(component: directory2)

rootDirectory.display(indent: "|")

/*
The result will be the following:
|  + Directory1
|    - File1.txt
|  + Directory2
|    - File2.txt
|    - File3.txt
*/

JavaScript:

class FileSystemComponent {
    constructor(name) {
        this.name = name;
    }

    display(indent) {
        throw new Error("This method must be overridden!");
    }
}

class File extends FileSystemComponent {
    constructor(name) {
        super(name);
    }

    display(indent) {
        console.log(`${indent}- ${this.name}`);
    }
}

class Directory extends FileSystemComponent {
    constructor(name) {
        super(name);
        this.components = [];
    }

    add(component) {
        this.components.push(component);
    }

    display(indent) {
        console.log(`${indent}+ ${this.name}`);
        this.components.forEach(component => {
            component.display(indent + "  ");
        });
    }
}

const file1 = new File("File1.txt");
const file2 = new File("File2.txt");
const file3 = new File("File3.txt");

const directory1 = new Directory("Directory1");
directory1.add(file1);

const directory2 = new Directory("Directory2");
directory2.add(file2);
directory2.add(file3);

const rootDirectory = new Directory("RootDirectory");
rootDirectory.add(directory1);
rootDirectory.add(directory2);

rootDirectory.display("|");

/*
The result will be the following:
|  + Directory1
|    - File1.txt
|  + Directory2
|    - File2.txt
|    - File3.txt
*/

Proxy

This pattern is used to provide controlled access to an object by creating a proxy object that performs actions such as access control, lazy initialization, logging, or caching.
Use case: Image is downloaded from a URL, cached on the device, and displayed in a SwiftUI view.

Swift:

protocol Image {
    func display() -> UIImage?
}

class RealImage: Image {
    private var filename: String
    private var url: URL
    private var image: UIImage?

    init(filename: String, url: URL) {
        self.filename = filename
        self.url = url
        self.image = loadImageFromDisk(filename: filename)
        if self.image == nil {
            self.image = loadImageFromURL(url: url)
        }
    }

    private func loadImageFromDisk(filename: String) -> UIImage? {
        let path = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first!
        let filePath = path.appendingPathComponent(filename)
        return UIImage(contentsOfFile: filePath.path)
    }

    private func loadImageFromURL(url: URL) -> UIImage? {
        guard let data = try? Data(contentsOf: url), let image = UIImage(data: data) else {
            return nil
        }
        saveImageToDisk(image: image, filename: filename)
        return image
    }

    private func saveImageToDisk(image: UIImage, filename: String) {
        let path = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first!
        let filePath = path.appendingPathComponent(filename)
        if let data = image.jpegData(compressionQuality: 1.0) {
            try? data.write(to: filePath)
        }
    }

    func display() -> UIImage? {
        return image
    }
}

class ProxyImage: Image {
    private var realImage: RealImage?
    private var filename: String
    private var url: URL

    init(filename: String, url: URL) {
        self.filename = filename
        self.url = url
    }

    func display() -> UIImage? {
        if realImage == nil {
            realImage = RealImage(filename: filename, url: url)
        }
        return realImage?.display()
    }
}

//Presenting ProxyImage in a SwiftUI view
struct ContentView: View {
    @State private var image: UIImage? = nil
    private let proxyImage = ProxyImage(filename: "kitty.jpg", url: URL(string: "https://www.boredpanda.com/blog/wp-content/uploads/2021/06/CK9sRAEMEo1-png__605.jpg")!)

    var body: some View {
        VStack {
            if let image = image {
                Image(uiImage: image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 300, height: 300)
            } else {
                Text("Loading image...")
                    .onAppear {
                        self.image = self.proxyImage.display()
                    }
            }
        }
    }
}

#Preview {
    ContentView()
}

Here we'll create an entire web page to make understandable and testable at once.

JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy Pattern Example</title>
    <style>
        img {
            max-width: 300px;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>Loading image...</p>
    </div>

    <script>
        class Image {
            display(callback) {
                throw new Error("This method must be overridden!");
            }
        }

        class RealImage extends Image {
            constructor(filename, url) {
                super();
                this.filename = filename;
                this.url = url;
                this.image = this.loadImageFromLocalStorage(filename);
                if (!this.image) {
                    this.loadImageFromURL(url, (img) => {
                        this.image = img;
                        this.saveImageToLocalStorage(filename, img.src);
                        callback(img);
                    });
                } else {
                    callback(this.image);
                }
            }

            loadImageFromLocalStorage(filename) {
                const imageData = localStorage.getItem(filename);
                if (imageData) {
                    const image = new window.Image();
                    image.src = imageData;
                    return image;
                }
                return null;
            }

            loadImageFromURL(url, callback) {
                const xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.responseType = 'blob';
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        const reader = new FileReader();
                        reader.onloadend = function () {
                            const image = new window.Image();
                            image.src = reader.result;
                            callback(image);
                        }
                        reader.readAsDataURL(xhr.response);
                    }
                };
                xhr.send();
            }

            saveImageToLocalStorage(filename, data) {
                localStorage.setItem(filename, data);
            }

            display(callback) {
                if (this.image) {
                    callback(this.image);
                }
            }
        }

        class ProxyImage extends Image {
            constructor(filename, url) {
                super();
                this.realImage = null;
                this.filename = filename;
                this.url = url;
            }

            display(callback) {
                if (this.realImage === null) {
                    this.realImage = new RealImage(this.filename, this.url, callback);
                } else {
                    this.realImage.display(callback);
                }
            }
        }

        document.addEventListener("DOMContentLoaded", () => {
            const proxyImage = new ProxyImage("example.jpg", "./gato2.jpg");
            proxyImage.display((imageElement) => {
                const app = document.getElementById("app");
                app.innerHTML = "";  // Clear the loading text
                app.appendChild(imageElement);
            });
        });
    </script>
</body>
</html>

These examples shows how to implement and use each of the specified structural patterns in Swift and JavaScript with use cases.

Next post will focus on Behavioral Patterns. See you next time!

Design patterns: Part One - A brief explanation of creational pattern

andres paladines — Sat, 15 Jun 2024 03:59:33 +0000

The picture was taken from boredpanda.

Hello everyone!

Starting my first post with one of the most basic but never unnecessary topics; Design patterns.

Let's start listing them:

.
├── Creational Patterns
│   ├── Singleton
│   ├── Factory Method
│   ├── Builder
│   ├── Abstract Factory
│   ├── Prototype
├── Structural Patterns
│   ├── Adapter
│   ├── Decorator
│   ├── Facade
│   ├── Composite
│   ├── Proxy
├── Behavioral Patterns
│   ├── Observer
│   ├── Strategy
│   ├── Command
│   ├── Chain of Responsibility
│   ├── Mediator
│   ├── State
│   ├── Template Method
.

Creational Patterns

This post will focus on Creational Patterns and how to construct them with swift and javascript. So, Let's start!

Singleton

Ensures a class has only one instance and provides a global point of access to it.
Use case: A central configuration manager for app settings.

Swift:

class ConfigurationManager {
    static let shared = ConfigurationManager()

    private init() { }

    var settings: [String: Any] = [:]

    func updateSetting(key: String, value: Any) {
        settings[key] = value
    }

    func getSetting(key: String) -> Any? {
        return settings[key]
    }
}

// Usage
ConfigurationManager.shared.updateSetting(key: "theme", value: "dark")
let theme = ConfigurationManager.shared.getSetting(key: "theme")

JavaScript:

class ConfigurationManager {
    constructor() {
        if (ConfigurationManager.instance == null) {
            this.settings = {};
            ConfigurationManager.instance = this;
        }
        return ConfigurationManager.instance;
    }

    updateSetting(key, value) {
        this.settings[key] = value;
    }

    getSetting(key) {
        return this.settings[key];
    }
}

const instance = new ConfigurationManager();
Object.freeze(instance);

// Usage
instance.updateSetting("theme", "dark");
const theme = instance.getSetting("theme");

Factory Method

Defines an interface for creating different objects from a superclass or protocol from another object.

Use Case: Handling different types of payment gateways (e.g., PayPal, Stripe, Apple Pay).

Swift:

enum PaymentProvider {
    case paypal
    case stripe
}

protocol PaymentGateway {
    func processPayment(amount: Double)
}

class PayPal: PaymentGateway {
    func processPayment(amount: Double) {
        print("Processing payment through PayPal: \(amount)")
    }
}

class Stripe: PaymentGateway {
    func processPayment(amount: Double) {
        print("Processing payment through Stripe: \(amount)")
    }
}

class PaymentGatewayFactory {
    static func createPaymentGateway(type: PaymentProvider) -> PaymentGateway? {
        switch type {
        case .paypal:
            return PayPal()
        case .stripe:
            return Stripe()
        default:
            return nil
        }
    }
}

// Usage
let gateway = PaymentGatewayFactory.createPaymentGateway(type: "PayPal")
gateway?.processPayment(amount: 100.0)

JavaScript:

class PayPal {
    processPayment(amount) {
        console.log(`Processing payment through PayPal: ${amount}`);
    }
}

class Stripe {
    processPayment(amount) {
        console.log(`Processing payment through Stripe: ${amount}`);
    }
}

class PaymentGatewayFactory {
    static createPaymentGateway(type) {
        switch (type) {
            case "PayPal":
                return new PayPal();
            case "Stripe":
                return new Stripe();
            default:
                return null;
        }
    }
}

// Usage
const gateway = PaymentGatewayFactory.createPaymentGateway("PayPal");
gateway.processPayment(100.0);

Builder

Separates the whole construction process of a complex object, allowing to create different representations of it.
Use Case: Creating complex UI components such as custom dialog boxes.

Swift

class Dialog {
    var title: String = ""
    var message: String = ""
    var buttons: [String] = []

    func show() {
        print("Title: \(title)")
        print("Message: \(message)")
        print("Buttons: \(buttons.joined(separator: ", "))")
    }
}

class DialogBuilder {
    private var dialog = Dialog()

    func setTitle(_ title: String) -> DialogBuilder {
        dialog.title = title
        return self
    }

    func setMessage(_ message: String) -> DialogBuilder {
        dialog.message = message
        return self
    }

    func addButton(_ button: String) -> DialogBuilder {
        dialog.buttons.append(button)
        return self
    }

    func build() -> Dialog {
        return dialog
    }
}

// Usage
let dialog = DialogBuilder()
    .setTitle("Warning")
    .setMessage("Are you sure you want to delete this file?")
    .addButton("Cancel")
    .addButton("Delete")
    .build()
dialog.show()

JavaScript:

class Dialog {
    constructor() {
        this.title = "";
        this.message = "";
        this.buttons = [];
    }

    show() {
        console.log(`Title: ${this.title}`);
        console.log(`Message: ${this.message}`);
        console.log(`Buttons: ${this.buttons.join(", ")}`);
    }
}

class DialogBuilder {
    constructor() {
        this.dialog = new Dialog();
    }

    setTitle(title) {
        this.dialog.title = title;
        return this;
    }

    setMessage(message) {
        this.dialog.message = message;
        return this;
    }

    addButton(button) {
        this.dialog.buttons.push(button);
        return this;
    }

    build() {
        return this.dialog;
    }
}

// Usage
const dialog = new DialogBuilder()
    .setTitle("Warning")
    .setMessage("Are you sure you want to delete this file?")
    .addButton("Cancel")
    .addButton("Delete")
    .build();
dialog.show();

Abstract Factory

Provides an interface for creating families of related or dependent objects without specifying their concrete classes.
Use Case: Creating families of related or dependent objects without specifying their concrete classes.

Swift

protocol Button {
    func render()
}

class WindowsButton: Button {
    func render() {
        print("Render a button in Windows style")
    }
}

class MacOSButton: Button {
    func render() {
        print("Render a button in MacOS style")
    }
}

protocol GUIFactory {
    func createButton() -> Button
}

class WindowsFactory: GUIFactory {
    func createButton() -> Button {
        return WindowsButton()
    }
}

class MacOSFactory: GUIFactory {
    func createButton() -> Button {
        return MacOSButton()
    }
}

// Usage
func createUI(factory: GUIFactory) {
    let button = factory.createButton()
    button.render()
}

let windowsFactory = WindowsFactory()
createUI(factory: windowsFactory)

let macFactory = MacOSFactory()
createUI(factory: macFactory)

JavaScript:

class WindowsButton {
    render() {
        console.log("Render a button in Windows style");
    }
}

class MacOSButton {
    render() {
        console.log("Render a button in MacOS style");
    }
}

class WindowsFactory {
    createButton() {
        return new WindowsButton();
    }
}

class MacOSFactory {
    createButton() {
        return new MacOSButton();
    }
}

// Usage
function createUI(factory) {
    const button = factory.createButton();
    button.render();
}

const windowsFactory = new WindowsFactory();
createUI(windowsFactory);

const macFactory = new MacOSFactory();
createUI(macFactory);

Prototype

Creates new objects by copying an existing object, known as the prototype.
Use Case: Cloning objects to avoid the cost of creating new instances from scratch.

Swift

protocol Clonable {
    func clone() -> Self
}

class Prototype: Clonable {
    var name: String

    required init(name: String) {
        self.name = name
    }

    func clone() -> Self {
        return type(of: self).init(name: self.name)
    }
}

// Usage
let original = Prototype(name: "Original")
let copy = original.clone()
copy.name = "Changed"
print(original.name) // Output: Original
print(copy.name) // Output: Changed

JavaScript:

class Prototype {
    constructor(name) {
        this.name = name;
    }

    clone() {
        return new Prototype(this.name);
    }
}

// Usage
const original = new Prototype("Original");
const copy = original.clone();
copy.name = "Changed";
console.log(original.name); // Output: Original
console.log(copy.name); // Output: Changed