Inicio Blog Página 13

Curso de Patrones de Diseño de Software

Por
Jordi Morillo
-
0

Introducción

Los patrones de diseño de software son soluciones probadas a problemas comunes que se encuentran en el desarrollo de software. Estos patrones no solo ayudan a estructurar y organizar el código de manera eficiente, sino que también mejoran la mantenibilidad y escalabilidad de las aplicaciones. En este curso, exploraremos los patrones más comunes, clasificados en tres grandes categorías: patrones creacionales, estructurales y de comportamiento. A lo largo del curso, veremos ejemplos en PHP y TypeScript para comprender cómo aplicarlos en proyectos reales.

1. Patrones Creacionales

Los patrones creacionales se enfocan en la forma de crear objetos de manera controlada para garantizar la flexibilidad y reutilización del código. Estos patrones son ideales cuando queremos separar el proceso de creación de objetos de la lógica de negocio principal.

1.1. Singleton

El patrón Singleton asegura que una clase tenga una única instancia y proporciona un punto global de acceso a ella. Es útil cuando se necesita un control global de una clase (como un logger o una conexión a la base de datos).

PHP:

<?php
class Database {
    private static $instance = null;
    private $connection;

    private function __construct() {
        $this->connection = new PDO('mysql:host=localhost;dbname=test', 'root', '');
    }

    public static function getInstance() {
        if (self::$instance === null) {
            self::$instance = new Database();
        }
        return self::$instance;
    }

    public function getConnection() {
        return $this->connection;
    }
}
?>

TypeScript:

class Database {
    private static instance: Database;
    private connection: string;

    private constructor() {
        this.connection = "Database connection";
    }

    public static getInstance(): Database {
        if (!Database.instance) {
            Database.instance = new Database();
        }
        return Database.instance;
    }

    public getConnection(): string {
        return this.connection;
    }
}

Pros:

  • Control sobre la instancia única, útil para recursos compartidos (e.g., conexión a la base de datos).
  • Ahorro de memoria y recursos, ya que solo se crea una instancia.

Contras:

  • Puede violar el principio de responsabilidad única, ya que maneja la creación y acceso a la instancia.
  • Difícil de testear debido a la instancia global compartida.

1.2. Factory Method

El patrón Factory Method proporciona una forma de delegar la creación de objetos a clases derivadas. Es ideal para situaciones en las que queremos instanciar objetos sin conocer la clase exacta que se va a utilizar.

PHP:

<?php
interface Vehicle {
    public function create();
}

class Car implements Vehicle {
    public function create() {
        return "Car created!";
    }
}

class Bike implements Vehicle {
    public function create() {
        return "Bike created!";
    }
}

class VehicleFactory {
    public static function createVehicle($type) {
        if ($type === 'car') {
            return new Car();
        } elseif ($type === 'bike') {
            return new Bike();
        }
        throw new Exception("Invalid vehicle type");
    }
}
?>

TypeScript:

interface Vehicle {
    create(): string;
}

class Car implements Vehicle {
    create(): string {
        return "Car created!";
    }
}

class Bike implements Vehicle {
    create(): string {
        return "Bike created!";
    }
}

class VehicleFactory {
    public static createVehicle(type: string): Vehicle {
        switch (type) {
            case 'car':
                return new Car();
            case 'bike':
                return new Bike();
            default:
                throw new Error("Invalid vehicle type");
        }
    }
}

Pros:

  • Flexibilidad para crear diferentes tipos de objetos en tiempo de ejecución.
  • Facilita la extensión para nuevos tipos de objetos sin modificar el código existente.

Contras:

  • Puede introducir complejidad innecesaria si solo se requiere un tipo simple de objeto.
  • Aumenta el número de clases en el sistema.

2. Patrones Estructurales

Los patrones estructurales se centran en cómo organizar las clases y objetos para formar estructuras más grandes y flexibles. Estos patrones son útiles para gestionar relaciones y simplificar la arquitectura del sistema.

2.1. Adapter

El patrón Adapter convierte la interfaz de una clase en otra que el cliente espera. Es ideal cuando queremos integrar una clase existente que no cumple con la interfaz que necesitamos.

PHP:

<?php
interface PaymentGateway {
    public function pay($amount);
}

class Stripe {
    public function makePayment($amount) {
        return "Paid $amount with Stripe.";
    }
}

class StripeAdapter implements PaymentGateway {
    private $stripe;

    public function __construct(Stripe $stripe) {
        $this->stripe = $stripe;
    }

    public function pay($amount) {
        return $this->stripe->makePayment($amount);
    }
}
?>

TypeScript:

interface PaymentGateway {
    pay(amount: number): string;
}

class Stripe {
    makePayment(amount: number): string {
        return `Paid ${amount} with Stripe.`;
    }
}

class StripeAdapter implements PaymentGateway {
    private stripe: Stripe;

    constructor(stripe: Stripe) {
        this.stripe = stripe;
    }

    pay(amount: number): string {
        return this.stripe.makePayment(amount);
    }
}

Pros:

  • Permite la integración de clases con interfaces incompatibles.
  • Facilita la reutilización de código existente sin modificarlo.

Contras:

  • Puede añadir complejidad adicional si se utilizan muchos adaptadores.
  • El código puede volverse difícil de mantener si se abusa de este patrón.

3. Patrones de Comportamiento

Los patrones de comportamiento se enfocan en la interacción y comunicación entre los objetos. Estos patrones son útiles para definir cómo los objetos cooperan y responden ante ciertos eventos.

3.1. Observer

El patrón Observer define una relación de uno a muchos entre objetos, de manera que cuando uno cambia de estado, se notifica a todos los objetos dependientes. Es útil en sistemas donde se necesita una actualización reactiva.

PHP:

<?php
interface Observer {
    public function update($state);
}

class ConcreteObserver implements Observer {
    public function update($state) {
        echo "State updated to $state";
    }
}

class Subject {
    private $observers = [];
    private $state;

    public function attach(Observer $observer) {
        $this->observers[] = $observer;
    }

    public function setState($state) {
        $this->state = $state;
        $this->notify();
    }

    private function notify() {
        foreach ($this->observers as $observer) {
            $observer->update($this->state);
        }
    }
}
?>

TypeScript:

interface Observer {
    update(state: string): void;
}

class ConcreteObserver implements Observer {
    update(state: string): void {
        console.log(`State updated to ${state}`);
    }
}

class Subject {
    private observers: Observer[] = [];
    private state: string;

    attach(observer: Observer): void {
        this.observers.push(observer);
    }

    setState(state: string): void {
        this.state = state;
        this.notify();
    }

    private notify(): void {
        this.observers.forEach(observer => observer.update(this.state));
    }
}

Pros:

  • Facilita la implementación de sistemas reactivos.
  • Reduce el acoplamiento entre el sujeto y los observadores.

Contras:

  • Puede ser complicado gestionar muchos observadores.
  • El rendimiento puede verse afectado si hay una gran cantidad de actualizaciones.

2.2. Decorator

El patrón Decorator permite añadir funcionalidades a un objeto de manera dinámica sin modificar su estructura original. Este patrón es útil cuando se quiere extender las capacidades de una clase de forma flexible y escalable.

PHP:

<?php
interface Coffee {
    public function cost();
}

class SimpleCoffee implements Coffee {
    public function cost() {
        return 5;
    }
}

class MilkDecorator implements Coffee {
    protected $coffee;

    public function __construct(Coffee $coffee) {
        $this->coffee = $coffee;
    }

    public function cost() {
        return $this->coffee->cost() + 2;
    }
}

class SugarDecorator implements Coffee {
    protected $coffee;

    public function __construct(Coffee $coffee) {
        $this->coffee = $coffee;
    }

    public function cost() {
        return $this->coffee->cost() + 1;
    }
}

// Uso
$coffee = new SimpleCoffee();
$coffee = new MilkDecorator($coffee);
$coffee = new SugarDecorator($coffee);
echo $coffee->cost(); // Salida: 8
?>

TypeScript:

interface Coffee {
    cost(): number;
}

class SimpleCoffee implements Coffee {
    cost(): number {
        return 5;
    }
}

class MilkDecorator implements Coffee {
    constructor(private coffee: Coffee) {}

    cost(): number {
        return this.coffee.cost() + 2;
    }
}

class SugarDecorator implements Coffee {
    constructor(private coffee: Coffee) {}

    cost(): number {
        return this.coffee.cost() + 1;
    }
}

// Uso
let coffee: Coffee = new SimpleCoffee();
coffee = new MilkDecorator(coffee);
coffee = new SugarDecorator(coffee);
console.log(coffee.cost()); // Output: 8

Pros:

  • Permite añadir funcionalidades de forma dinámica y flexible.
  • Fomenta la reutilización de código y cumple con el principio de responsabilidad única.

Contras:

  • Puede generar muchas clases adicionales, lo cual podría complicar el mantenimiento del sistema.
  • La creación de objetos decorados puede volverse compleja si se usan muchos decoradores.

2.3. Composite

El patrón Composite permite tratar de manera uniforme objetos individuales y compuestos (formados por múltiples objetos). Este patrón es especialmente útil para representar jerarquías de objetos, como estructuras de carpetas y archivos en un sistema de archivos.

PHP:

<?php
interface FileSystemComponent {
    public function display($indentation);
}

class File implements FileSystemComponent {
    private $name;

    public function __construct($name) {
        $this->name = $name;
    }

    public function display($indentation) {
        echo str_repeat("-", $indentation) . $this->name . PHP_EOL;
    }
}

class Directory implements FileSystemComponent {
    private $name;
    private $children = [];

    public function __construct($name) {
        $this->name = $name;
    }

    public function add(FileSystemComponent $component) {
        $this->children[] = $component;
    }

    public function display($indentation) {
        echo str_repeat("-", $indentation) . $this->name . PHP_EOL;
        foreach ($this->children as $child) {
            $child->display($indentation + 2);
        }
    }
}

// Uso
$root = new Directory("root");
$root->add(new File("file1.txt"));
$subDir = new Directory("subDir");
$subDir->add(new File("file2.txt"));
$root->add($subDir);
$root->display(0);
?>

TypeScript:

interface FileSystemComponent {
    display(indentation: number): void;
}

class File implements FileSystemComponent {
    constructor(private name: string) {}

    display(indentation: number): void {
        console.log(`${'-'.repeat(indentation)}${this.name}`);
    }
}

class Directory implements FileSystemComponent {
    private children: FileSystemComponent[] = [];

    constructor(private name: string) {}

    add(component: FileSystemComponent): void {
        this.children.push(component);
    }

    display(indentation: number): void {
        console.log(`${'-'.repeat(indentation)}${this.name}`);
        this.children.forEach(child => child.display(indentation + 2));
    }
}

// Uso
const root = new Directory("root");
root.add(new File("file1.txt"));
const subDir = new Directory("subDir");
subDir.add(new File("file2.txt"));
root.add(subDir);
root.display(0);

Pros:

  • Facilita el trabajo con estructuras jerárquicas de objetos.
  • Simplifica la manipulación de objetos complejos mediante una interfaz común.

Contras:

  • La implementación puede ser complicada si las jerarquías son demasiado profundas.
  • Puede violar el principio de responsabilidad única al mezclar objetos compuestos e individuales.

3.2. Strategy

El patrón Strategy define una familia de algoritmos, encapsulándolos para que sean intercambiables. Este patrón es útil cuando necesitamos variar el comportamiento de un objeto en tiempo de ejecución.

PHP:

<?php
interface PaymentStrategy {
    public function pay($amount);
}

class CreditCardPayment implements PaymentStrategy {
    public function pay($amount) {
        return "Paid $amount using Credit Card";
    }
}

class PayPalPayment implements PaymentStrategy {
    public function pay($amount) {
        return "Paid $amount using PayPal";
    }
}

class PaymentContext {
    private $strategy;

    public function setStrategy(PaymentStrategy $strategy) {
        $this->strategy = $strategy;
    }

    public function executePayment($amount) {
        return $this->strategy->pay($amount);
    }
}

// Uso
$context = new PaymentContext();
$context->setStrategy(new CreditCardPayment());
echo $context->executePayment(100); // Salida: Paid 100 using Credit Card
?>

TypeScript:

interface PaymentStrategy {
    pay(amount: number): string;
}

class CreditCardPayment implements PaymentStrategy {
    pay(amount: number): string {
        return `Paid ${amount} using Credit Card`;
    }
}

class PayPalPayment implements PaymentStrategy {
    pay(amount: number): string {
        return `Paid ${amount} using PayPal`;
    }
}

class PaymentContext {
    private strategy: PaymentStrategy;

    setStrategy(strategy: PaymentStrategy): void {
        this.strategy = strategy;
    }

    executePayment(amount: number): string {
        return this.strategy.pay(amount);
    }
}

// Uso
const context = new PaymentContext();
context.setStrategy(new CreditCardPayment());
console.log(context.executePayment(100)); // Output: Paid 100 using Credit Card

Pros:

  • Facilita la extensión y modificación de algoritmos sin alterar el código del cliente.
  • Promueve el principio abierto/cerrado (OCP).

Contras:

  • Requiere que el cliente conozca las estrategias disponibles para seleccionarlas.
  • Puede incrementar la complejidad del código si se usan muchas estrategias.

3.3. Command

El patrón Command convierte las solicitudes en objetos, permitiendo parametrizar y almacenar las acciones que se desean ejecutar. Es útil para sistemas que requieren comandos reversibles o que necesitan programar la ejecución de tareas.

PHP:

<?php
interface Command {
    public function execute();
}

class LightOnCommand implements Command {
    public function execute() {
        echo "Light turned on";
    }
}

class LightOffCommand implements Command {
    public function execute() {
        echo "Light turned off";
    }
}

class RemoteControl {
    private $command;

    public function setCommand(Command $command) {
        $this->command = $command;
    }

    public function pressButton() {
        $this->command->execute();
    }
}

// Uso
$remote = new RemoteControl();
$remote->setCommand(new LightOnCommand());
$remote->pressButton(); // Salida: Light turned on
?>

TypeScript:

interface Command {
    execute(): void;
}

class LightOnCommand implements Command {
    execute(): void {
        console.log("Light turned on");
    }
}

class LightOffCommand implements Command {
    execute(): void {
        console.log("Light turned off");
    }
}

class RemoteControl {
    private command: Command;

    setCommand(command: Command): void {
        this.command = command;
    }

    pressButton(): void {
        this.command.execute();
    }
}

// Uso
const remote = new RemoteControl();
remote.setCommand(new LightOnCommand());
remote.pressButton(); // Output: Light turned on

Pros:

  • Simplifica la ejecución de comandos y permite deshacer o repetir acciones.
  • Facilita la implementación de sistemas de logging y gestión de acciones programadas.

Contras:

  • Aumenta el número de clases en el sistema.
  • La lógica puede volverse compleja si se usan muchos comandos interdependientes.

3.4. Chain of Responsibility

El patrón Chain of Responsibility permite que un conjunto de objetos maneje una solicitud en cadena hasta que uno de ellos la procese. Es útil cuando se desea evitar el acoplamiento entre el emisor de una solicitud y su receptor, y cuando se tiene una secuencia de objetos que podrían manejar dicha solicitud.

PHP:

<?php
abstract class Handler {
    protected $nextHandler;

    public function setNext(Handler $handler) {
        $this->nextHandler = $handler;
    }

    public function handle($request) {
        if ($this->nextHandler) {
            return $this->nextHandler->handle($request);
        }
        return null;
    }
}

class AuthHandler extends Handler {
    public function handle($request) {
        if ($request === "auth") {
            return "Authorization Successful";
        }
        return parent::handle($request);
    }
}

class LogHandler extends Handler {
    public function handle($request) {
        if ($request === "log") {
            return "Log Entry Created";
        }
        return parent::handle($request);
    }
}

// Uso
$auth = new AuthHandler();
$log = new LogHandler();
$auth->setNext($log);

echo $auth->handle("log"); // Salida: Log Entry Created
?>

TypeScript:

abstract class Handler {
    protected nextHandler: Handler;

    setNext(handler: Handler): void {
        this.nextHandler = handler;
    }

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

class AuthHandler extends Handler {
    handle(request: string): string | null {
        if (request === "auth") {
            return "Authorization Successful";
        }
        return super.handle(request);
    }
}

class LogHandler extends Handler {
    handle(request: string): string | null {
        if (request === "log") {
            return "Log Entry Created";
        }
        return super.handle(request);
    }
}

// Uso
const auth = new AuthHandler();
const log = new LogHandler();
auth.setNext(log);

console.log(auth.handle("log")); // Output: Log Entry Created

Pros:

  • Desacopla el emisor de una solicitud de sus posibles receptores.
  • Flexibilidad para añadir o cambiar handlers sin modificar el código existente.

Contras:

  • Puede ser difícil de depurar debido a la cadena de responsabilidad dinámica.
  • El rendimiento puede verse afectado si la cadena de handlers es muy larga.

4. Patrones Menos Comunes

Ahora que hemos cubierto los patrones más comunes, vamos a explorar algunos patrones menos conocidos pero que también pueden ser de gran utilidad en situaciones específicas.

4.1. Flyweight

El patrón Flyweight minimiza el uso de memoria al compartir la mayor cantidad posible de datos con objetos similares. Es útil cuando se tiene un gran número de objetos que comparten información común, como en sistemas gráficos o juegos.

PHP:

<?php
class Tree {
    private $type;
    private static $instances = [];

    private function __construct($type) {
        $this->type = $type;
    }

    public static function getInstance($type) {
        if (!isset(self::$instances[$type])) {
            self::$instances[$type] = new Tree($type);
        }
        return self::$instances[$type];
    }

    public function display($location) {
        echo "Displaying " . $this->type . " tree at " . $location . PHP_EOL;
    }
}

// Uso
$pineTree = Tree::getInstance("Pine");
$oakTree = Tree::getInstance("Oak");

$pineTree->display("Park");
$oakTree->display("Garden");
?>

TypeScript:

class Tree {
    private static instances: { [key: string]: Tree } = {};

    private constructor(private type: string) {}

    static getInstance(type: string): Tree {
        if (!Tree.instances[type]) {
            Tree.instances[type] = new Tree(type);
        }
        return Tree.instances[type];
    }

    display(location: string): void {
        console.log(`Displaying ${this.type} tree at ${location}`);
    }
}

// Uso
const pineTree = Tree.getInstance("Pine");
const oakTree = Tree.getInstance("Oak");

pineTree.display("Park");
oakTree.display("Garden");

Pros:

  • Optimiza el uso de memoria mediante la reutilización de objetos.
  • Ideal para aplicaciones que manejan un gran número de objetos similares.

Contras:

  • La implementación puede volverse compleja si los objetos tienen muchos estados compartidos y no compartidos.
  • No siempre es aplicable, especialmente cuando los objetos tienen estados independientes.

4.2. Memento

El patrón Memento permite capturar y restaurar el estado de un objeto sin revelar los detalles de su implementación. Es útil en sistemas donde se requiere implementar deshacer y rehacer operaciones.

PHP:

<?php
class Memento {
    private $state;

    public function __construct($state) {
        $this->state = $state;
    }

    public function getState() {
        return $this->state;
    }
}

class Originator {
    private $state;

    public function setState($state) {
        $this->state = $state;
    }

    public function saveState() {
        return new Memento($this->state);
    }

    public function restoreState(Memento $memento) {
        $this->state = $memento->getState();
    }
}

// Uso
$originator = new Originator();
$originator->setState("State1");
$memento = $originator->saveState();
$originator->setState("State2");

$originator->restoreState($memento);
?>

TypeScript:

class Memento {
    constructor(private state: string) {}

    getState(): string {
        return this.state;
    }
}

class Originator {
    private state: string;

    setState(state: string): void {
        this.state = state;
    }

    saveState(): Memento {
        return new Memento(this.state);
    }

    restoreState(memento: Memento): void {
        this.state = memento.getState();
    }
}

// Uso
const originator = new Originator();
originator.setState("State1");
const memento = originator.saveState();
originator.setState("State2");

originator.restoreState(memento);

Pros:

  • Facilita la implementación de funciones de deshacer/rehacer en una aplicación.
  • Protege la encapsulación al no exponer detalles internos del objeto.

Contras:

  • Puede aumentar el consumo de memoria si se guardan demasiados estados.
  • La gestión de los mementos puede volverse compleja en sistemas grandes.

4.3. Visitor

El patrón Visitor permite añadir operaciones a clases sin modificarlas. Es útil cuando se necesita aplicar múltiples operaciones a objetos de una estructura compleja y se quiere evitar modificar cada clase para implementar esas operaciones.

PHP:

<?php
interface Element {
    public function accept(Visitor $visitor);
}

class ConcreteElementA implements Element {
    public function accept(Visitor $visitor) {
        $visitor->visitElementA($this);
    }
}

class ConcreteElementB implements Element {
    public function accept(Visitor $visitor) {
        $visitor->visitElementB($this);
    }
}

interface Visitor {
    public function visitElementA(ConcreteElementA $element);
    public function visitElementB(ConcreteElementB $element);
}

class ConcreteVisitor implements Visitor {
    public function visitElementA(ConcreteElementA $element) {
        echo "Visiting Element A";
    }

    public function visitElementB(ConcreteElementB $element) {
        echo "Visiting Element B";
    }
}

// Uso
$elementA = new ConcreteElementA();
$visitor = new ConcreteVisitor();
$elementA->accept($visitor);
?>

TypeScript:

interface Element {
    accept(visitor: Visitor): void;
}

class ConcreteElementA implements Element {
    accept(visitor: Visitor): void {
        visitor.visitElementA(this);
    }
}

class ConcreteElementB implements Element {
    accept(visitor: Visitor): void {
        visitor.visitElementB(this);
    }
}

interface Visitor {
    visitElementA(element: ConcreteElementA): void;
    visitElementB(element: ConcreteElementB): void;
}

class ConcreteVisitor implements Visitor {
    visitElementA(element: ConcreteElementA): void {
        console.log("Visiting Element A");
    }

    visitElementB(element: ConcreteElementB): void {
        console.log("Visiting Element B");
    }
}

// Uso
const elementA = new ConcreteElementA();
const visitor = new ConcreteVisitor();
elementA.accept(visitor);

Pros:

  • Facilita la adición de nuevas operaciones sin modificar las clases originales.
  • Desacopla las operaciones de las clases, mejorando la mantenibilidad.

Contras:

  • Puede resultar complicado mantener y escalar la estructura si hay muchos elementos y operaciones.
  • Introduce complejidad al código al tener que implementar múltiples visitantes.

4.4. State

El patrón State permite que un objeto altere su comportamiento cuando cambia su estado interno. Es útil cuando un objeto necesita cambiar su comportamiento en tiempo de ejecución dependiendo de su estado.

PHP:

<?php
interface State {
    public function handle();
}

class OnState implements State {
    public function handle() {
        echo "The device is now ON.";
    }
}

class OffState implements State {
    public function handle() {
        echo "The device is now OFF.";
    }
}

class Device {
    private $state;

    public function setState(State $state) {
        $this->state = $state;
    }

    public function pressButton() {
        $this->state->handle();
    }
}

// Uso
$device = new Device();
$onState = new OnState();
$offState = new OffState();

$device->setState($onState);
$device->pressButton(); // Salida: The device is now ON.

$device->setState($offState);
$device->pressButton(); // Salida: The device is now OFF.
?>

TypeScript:

interface State {
    handle(): void;
}

class OnState implements State {
    handle(): void {
        console.log("The device is now ON.");
    }
}

class OffState implements State {
    handle(): void {
        console.log("The device is now OFF.");
    }
}

class Device {
    private state: State;

    setState(state: State): void {
        this.state = state;
    }

    pressButton(): void {
        this.state.handle();
    }
}

// Uso
const device = new Device();
const onState = new OnState();
const offState = new OffState();

device.setState(onState);
device.pressButton(); // Output: The device is now ON.

device.setState(offState);
device.pressButton(); // Output: The device is now OFF.

Pros:

  • Facilita la adición de nuevos estados y comportamientos sin modificar la clase principal.
  • Mantiene el principio de responsabilidad única al encapsular comportamientos específicos.

Contras:

  • Puede incrementar el número de clases en el sistema.
  • La complejidad puede aumentar si se tienen demasiados estados y transiciones entre ellos.

4.5. Mediator

El patrón Mediator define un objeto que controla la interacción entre un conjunto de objetos, promoviendo el desacoplamiento. Es útil en sistemas donde varios objetos interactúan de manera compleja y se desea evitar referencias directas entre ellos.

PHP:

<?php
interface Mediator {
    public function notify($sender, $event);
}

class ConcreteMediator implements Mediator {
    private $component1;
    private $component2;

    public function setComponent1($component) {
        $this->component1 = $component;
    }

    public function setComponent2($component) {
        $this->component2 = $component;
    }

    public function notify($sender, $event) {
        if ($event == "A") {
            echo "Mediator reacts to A and triggers B.";
            $this->component2->doB();
        }
    }
}

class Component1 {
    private $mediator;

    public function setMediator(Mediator $mediator) {
        $this->mediator = $mediator;
    }

    public function doA() {
        echo "Component1 does A.";
        $this->mediator->notify($this, "A");
    }
}

class Component2 {
    private $mediator;

    public function setMediator(Mediator $mediator) {
        $this->mediator = $mediator;
    }

    public function doB() {
        echo "Component2 does B.";
    }
}

// Uso
$mediator = new ConcreteMediator();
$component1 = new Component1();
$component2 = new Component2();

$component1->setMediator($mediator);
$component2->setMediator($mediator);

$mediator->setComponent1($component1);
$mediator->setComponent2($component2);

$component1->doA();
?>

TypeScript:

interface Mediator {
    notify(sender: object, event: string): void;
}

class ConcreteMediator implements Mediator {
    private component1: Component1;
    private component2: Component2;

    setComponent1(component: Component1): void {
        this.component1 = component;
    }

    setComponent2(component: Component2): void {
        this.component2 = component;
    }

    notify(sender: object, event: string): void {
        if (event === "A") {
            console.log("Mediator reacts to A and triggers B.");
            this.component2.doB();
        }
    }
}

class Component1 {
    private mediator: Mediator;

    setMediator(mediator: Mediator): void {
        this.mediator = mediator;
    }

    doA(): void {
        console.log("Component1 does A.");
        this.mediator.notify(this, "A");
    }
}

class Component2 {
    private mediator: Mediator;

    setMediator(mediator: Mediator): void {
        this.mediator = mediator;
    }

    doB(): void {
        console.log("Component2 does B.");
    }
}

// Uso
const mediator = new ConcreteMediator();
const component1 = new Component1();
const component2 = new Component2();

component1.setMediator(mediator);
component2.setMediator(mediator);

mediator.setComponent1(component1);
mediator.setComponent2(component2);

component1.doA();

Pros:

  • Reduce las dependencias entre componentes, promoviendo un menor acoplamiento.
  • Facilita la escalabilidad y el mantenimiento al centralizar la comunicación.

Contras:

  • El Mediador puede volverse complejo y convertirse en un «objeto dios» si maneja demasiada lógica.
  • Puede ser difícil de mantener si el Mediador central gestiona muchas interacciones.

4.6. Interpreter

El patrón Interpreter es útil cuando se tiene un lenguaje específico o un conjunto de reglas que se quieren evaluar o interpretar en tiempo de ejecución. Es común en aplicaciones que requieren un analizador para evaluar expresiones, como calculadoras, filtros de búsqueda, o incluso compiladores simples.

PHP:

<?php
interface Expression {
    public function interpret($context);
}

class NumberExpression implements Expression {
    private $number;

    public function __construct($number) {
        $this->number = $number;
    }

    public function interpret($context) {
        return $this->number;
    }
}

class AddExpression implements Expression {
    private $leftExpression;
    private $rightExpression;

    public function __construct($left, $right) {
        $this->leftExpression = $left;
        $this->rightExpression = $right;
    }

    public function interpret($context) {
        return $this->leftExpression->interpret($context) + $this->rightExpression->interpret($context);
    }
}

// Uso
$left = new NumberExpression(5);
$right = new NumberExpression(10);
$add = new AddExpression($left, $right);

echo $add->interpret(null); // Salida: 15
?>

TypeScript:

interface Expression {
    interpret(context: any): number;
}

class NumberExpression implements Expression {
    constructor(private number: number) {}

    interpret(context: any): number {
        return this.number;
    }
}

class AddExpression implements Expression {
    constructor(private left: Expression, private right: Expression) {}

    interpret(context: any): number {
        return this.left.interpret(context) + this.right.interpret(context);
    }
}

// Uso
const left = new NumberExpression(5);
const right = new NumberExpression(10);
const add = new AddExpression(left, right);

console.log(add.interpret(null)); // Output: 15

Pros:

  • Facilita la implementación de evaluadores para lenguajes específicos.
  • Es flexible y se puede extender fácilmente con nuevas reglas y expresiones.

Contras:

  • No es eficiente para lenguajes complejos, ya que puede volverse lento y consumir mucha memoria.
  • La implementación puede volverse compleja si hay muchas reglas y combinaciones posibles.

Resumen Final de Patrones Menos Comunes

En esta sección hemos cubierto patrones menos conocidos, pero útiles en contextos específicos. Estos patrones permiten gestionar estados, optimizar memoria, manejar la comunicación entre componentes, y evaluar reglas de manera dinámica. Aunque no son tan utilizados como otros patrones más comunes, dominarlos puede ser una ventaja en proyectos con necesidades específicas o arquitecturas complejas.

Las últimas buenas prácticas para programar en React en 2024

Por
Jordi Morillo
-
0

En un entorno en constante evolución como el de React, es fundamental mantenerse al día con las mejores prácticas para garantizar que nuestro código sea eficiente, mantenible y escalable. En este artículo, exploraremos las tendencias y recomendaciones más actuales en el desarrollo con React, acompañadas de ejemplos prácticos y explicaciones detalladas para que puedas implementarlas en tus proyectos y mejorar la calidad de tu código.

1. Usa React Hooks de forma eficiente

Los hooks, como useState, useEffect, useMemo, useCallback y otros personalizados, son esenciales en la construcción de componentes funcionales en React. Sin embargo, es importante usarlos correctamente para evitar renderizados innecesarios y fugas de memoria.

  • Optimización de useEffect: useEffect es un hook que se ejecuta después de cada renderizado del componente y se utiliza para manejar efectos secundarios como llamadas a APIs o manipulación directa del DOM. Sin embargo, si no se manejan adecuadamente las dependencias, puede causar renderizados infinitos.

Ejemplo: Uso correcto de useEffect

import { useEffect, useState } from 'react';

const DataFetcher = ({ userId }) => {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(`https://api.example.com/user/${userId}`);
            const result = await response.json();
            setData(result);
        };

        fetchData();

        // Cleanup (en caso de que se suscriban a eventos o timers)
        return () => {
            console.log('Cleanup function ejecutada');
        };
    }, [userId]); // El efecto solo se ejecuta cuando cambia userId

    return (
        <div>
            {data ? <h1>Nombre: {data.name}</h1> : <p>Cargando datos...</p>}
        </div>
    );
};

En este ejemplo, useEffect se ejecuta solo cuando userId cambia, lo que optimiza el rendimiento evitando que se haga la llamada a la API si no hay cambios en el userId.

2. Escribe componentes funcionales en lugar de clases

Los componentes funcionales son más modernos y concisos en comparación con los componentes de clase. Aprovechan mejor las capacidades de los hooks, hacen el código más fácil de entender y resultan en menos líneas de código.

Ventajas de los Componentes Funcionales:

  • Simplifican la lógica al permitir el uso directo de hooks para manejar el estado y los efectos secundarios.
  • Son más fáciles de testear y de optimizar con herramientas como React.memo.
  • Reducen el riesgo de errores al eliminar el uso del this en los componentes.

Ejemplo: Conversión de Componente de Clase a Funcional

// Componente de clase
class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div>
                <p>Contador: {this.state.count}</p>
                <button onClick={this.increment}>Incrementar</button>
            </div>
        );
    }
}

// Componente funcional equivalente
const Counter = () => {
    const [count, setCount] = useState(0);

    const increment = () => setCount(count + 1);

    return (
        <div>
            <p>Contador: {count}</p>
            <button onClick={increment}>Incrementar</button>
        </div>
    );
};

3. Adopta TypeScript para tipado estático

TypeScript añade tipado estático a JavaScript, lo que permite detectar errores en tiempo de desarrollo y mejorar la experiencia de programación con autocompletado y sugerencias de tipos.

Ventajas de TypeScript en React:

  • Ayuda a prevenir errores comunes como pasar props incorrectas a un componente.
  • Facilita la documentación y el mantenimiento al hacer explícitas las estructuras de datos utilizadas en el proyecto.
  • Permite mejorar la productividad y la calidad del código al integrar con herramientas de desarrollo como VSCode.

Ejemplo: Tipado con TypeScript en un Componente de Formulario

import React, { useState } from 'react';

interface FormProps {
    onSubmit: (data: { name: string; age: number }) => void;
}

const UserForm: React.FC<FormProps> = ({ onSubmit }) => {
    const [name, setName] = useState<string>('');
    const [age, setAge] = useState<number>(0);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        onSubmit({ name, age });
    };

    return (
        <form onSubmit={handleSubmit}>
            <input 
                type="text" 
                value={name} 
                onChange={(e) => setName(e.target.value)} 
                placeholder="Nombre" 
            />
            <input 
                type="number" 
                value={age} 
                onChange={(e) => setAge(Number(e.target.value))} 
                placeholder="Edad" 
            />
            <button type="submit">Enviar</button>
        </form>
    );
};

4. Optimización del rendimiento con memoización

React vuelve a renderizar componentes cuando detecta cambios en el estado o en las props, lo que puede ser costoso en términos de rendimiento si se realizan cálculos complejos o si hay muchos componentes en el árbol.

  • React.memo: Este es un HOC (Higher Order Component) que memoriza un componente funcional para evitar su renderizado si las props no han cambiado.
  • useMemo: Memoriza el resultado de una función costosa que depende de ciertos valores.
  • useCallback: Memoriza funciones que se pasan como props para que no se vuelvan a crear en cada renderizado.

Ejemplo: Memoización de Funciones con useCallback

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ onClick, label }) => {
    console.log('Renderizando botón:', label);
    return <button onClick={onClick}>{label}</button>;
});

const App = () => {
    const [count, setCount] = useState(0);

    const increment = useCallback(() => {
        setCount((prev) => prev + 1);
    }, []); // Memoizamos la función para que no cambie en cada renderizado

    return (
        <div>
            <p>Contador: {count}</p>
            <Button label="Incrementar" onClick={increment} />
        </div>
    );
};

5. Divide tu código en módulos pequeños y reutilizables

Para mantener el proyecto organizado y escalable, es esencial dividir tu código en componentes y módulos reutilizables. Esto mejora la legibilidad, la mantenibilidad y la posibilidad de reutilizar partes de la aplicación en otros contextos.

Ejemplo: Componentización en Pequeñas Unidades Reutilizables

// src/components/InputField/InputField.tsx
import React from 'react';

interface InputFieldProps {
    label: string;
    value: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const InputField: React.FC<InputFieldProps> = ({ label, value, onChange }) => (
    <div>
        <label>{label}</label>
        <input type="text" value={value} onChange={onChange} />
    </div>
);

export default InputField;

En este ejemplo, el componente InputField es reutilizable y puede ser fácilmente extendido o personalizado en cualquier parte de la aplicación.

6. Organiza las carpetas del proyecto de manera estructurada

Una buena organización de las carpetas del proyecto es fundamental para mantener el código limpio y escalable. La estructura de carpetas en React debe permitir que los desarrolladores encuentren fácilmente los componentes, assets, servicios y lógica de negocio.

Estructura recomendada de carpetas:

src/
│
├── components/        # Componentes reutilizables
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.test.tsx
│   │   └── styles.css
│   └── Navbar/
│       ├── Navbar.tsx
│       ├── Navbar.test.tsx
│       └── styles.css
│
├── pages/             # Componentes de páginas
│   ├── Home/
│   │   ├── Home.tsx
│   │   └── Home.test.tsx
│   └── About/
│       ├── About.tsx
│       └── About.test.tsx
│
├── hooks/             # Hooks personalizados
│   ├── useAuth.ts
│   └── useFetch.ts
│
├── services/          # Lógica de negocio, API calls
│   └── apiService

.ts
│
├── context/           # Contextos globales
│   └── AuthContext.tsx
│
├── assets/            # Imágenes, iconos y otros recursos estáticos
│   └── logo.png
│
├── styles/            # Estilos globales (CSS, SASS)
│   └── global.css
│
├── App.tsx            # Componente principal de la app
├── index.tsx          # Punto de entrada de la aplicación
└── routes.tsx         # Configuración de las rutas

Esta estructura separa los componentes reutilizables, las páginas (que corresponden a rutas específicas), hooks personalizados, servicios, contextos globales y estilos, permitiendo una escalabilidad efectiva.

7. Manejo de estado global con Redux Toolkit o Zustand

A medida que las aplicaciones crecen, el manejo del estado global se vuelve más complejo. Redux Toolkit y Zustand son dos opciones que simplifican la gestión del estado en aplicaciones React:

  • Redux Toolkit: Es la forma moderna y simplificada de configurar Redux. Ofrece herramientas como createSlice y configureStore para simplificar la creación de reducers y la store.
  • Zustand: Es una librería más ligera y flexible que permite manejar el estado global sin la complejidad que puede tener Redux.

Ejemplo: Configuración con Redux Toolkit

import { configureStore, createSlice } from '@reduxjs/toolkit';

// Slice para manejar el estado de autenticación
const authSlice = createSlice({
    name: 'auth',
    initialState: { isAuthenticated: false, user: null },
    reducers: {
        login: (state, action) => {
            state.isAuthenticated = true;
            state.user = action.payload;
        },
        logout: (state) => {
            state.isAuthenticated = false;
            state.user = null;
        },
    },
});

export const { login, logout } = authSlice.actions;

const store = configureStore({
    reducer: {
        auth: authSlice.reducer,
    },
});

export default store;

8. Almacenamiento seguro de tokens de inicio de sesión

Cuando se maneja la autenticación, es importante asegurar que los tokens de inicio de sesión se almacenen de manera segura para evitar vulnerabilidades como ataques XSS y CSRF.

  • Cookies HTTP-only: Las cookies que no son accesibles desde JavaScript reducen significativamente los riesgos de XSS.
  • localStorage y sessionStorage: Aunque son opciones comunes, no son seguras contra ataques XSS. Si se utilizan, es importante combinar estas opciones con otras medidas de seguridad como Content Security Policies (CSP).

Ejemplo: Uso de Cookies Seguras para Tokens

// Guardar el token como una cookie segura
document.cookie = "token=tuToken; path=/; secure; httponly; samesite=strict";

// Función para leer el token de la cookie
const getCookie = (name) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
};

9. Tests automáticos y uso de React Testing Library

Las pruebas automáticas son cruciales para asegurar que los componentes funcionan como se espera. React Testing Library y Jest son herramientas potentes para escribir tests unitarios y de integración en React.

  • Tests de snapshot: Verifican que la estructura del componente no haya cambiado inesperadamente.
  • Tests de interacción: Simulan interacciones del usuario, como clics o entradas de texto, para asegurar que la interfaz responde correctamente.

Ejemplo: Test con React Testing Library

import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Button from './Button';

test('muestra el label del botón y responde al clic', () => {
    const handleClick = jest.fn();
    render(<Button label="Enviar" onClick={handleClick} />);
    const button = screen.getByText(/Enviar/i);
    fireEvent.click(button);
    expect(handleClick).toHaveBeenCalledTimes(1);
});

10. Optimización de la carga y división del código (Code Splitting)

Dividir el código permite cargar solo las partes necesarias de la aplicación, mejorando la experiencia del usuario. React facilita esto con React.lazy y Suspense para cargar componentes asíncronos.

Ejemplo: Uso de React.lazy y Suspense

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

const App = () => (
    <div>
        <h1>Mi Aplicación</h1>
        <Suspense fallback={<div>Cargando...</div>}>
            <LazyComponent />
        </Suspense>
    </div>
);

Mantenerse al día con las buenas prácticas en React y aplicarlas en tus proyectos no solo mejora la calidad de tu código, sino que asegura un rendimiento óptimo y una mejor experiencia para tus usuarios. Este artículo, acompañado de ejemplos prácticos, ofrece un enfoque integral para desarrollar aplicaciones React eficientes, escalables y seguras.

Cómo usar TensorFlow con PHP para predecir ventas de forma sencilla (guía para principiantes)

Por
Jordi Morillo
-
2

La predicción de ventas puede parecer cosa de expertos, pero con herramientas como TensorFlow y un poco de PHP, tú también puedes hacerlo. En este tutorial paso a paso, aprenderás a crear un modelo básico de predicción de ventas diarias usando PHP y TensorFlow (mediante una librería compatible). Lo explicaremos de forma sencilla para que puedas seguirlo aunque estés empezando.

💡 Si no conoces qué es TensorFlow, puedes echar un vistazo a la documentación oficial (está en inglés).

Paso 1: Instalación de TensorFlow en PHP (fácil y rápido)

Necesitas tener PHP 7.4 o superior y Composer instalado en tu sistema.

Ahora instala la librería compatible con TensorFlow:

composer require php-ai/php-ml

Esto te permitirá crear redes neuronales en PHP sin complicaciones, usando funcionalidades similares a las que encontrarías en TensorFlow.

Paso 2: Prepara tus datos para usar con TensorFlow

Vamos a trabajar con un archivo CSV que contenga dos columnas: fecha y ventas diarias.

Cargar los datos desde el CSV

$data = array_map('str_getcsv', file('ventas_diarias.csv'));

Normaliza los valores de ventas

Normalizar significa convertir todos los valores al mismo rango (por ejemplo, entre 0 y 1) para que el modelo aprenda mejor.

function normalize($data) {
    $max = max($data);
    $min = min($data);
    return array_map(function($value) use ($min, $max) {
        return ($value - $min) / ($max - $min);
    }, $data);
}

$ventas_normalizadas = normalize(array_column($data, 1));

Paso 3: Crea tu primer modelo de predicción con TensorFlow

Vamos a crear una red neuronal muy sencilla: una capa de entrada, una oculta con 5 neuronas, y una de salida.

use Phpml\NeuralNetwork\Network\MultilayerPerceptron;

$mlp = new MultilayerPerceptron([1, 5, 1]);

Entrena tu modelo con los datos

foreach ($ventas_normalizadas as $key => $venta) {
    $mlp->train([$key], [$venta]);
}

Con esto, TensorFlow (a través de esta librería PHP) empieza a aprender el comportamiento de las ventas diarias.

Paso 4: Haz predicciones con TensorFlow en PHP

Una vez entrenado el modelo, puedes predecir nuevas ventas fácilmente.

$nueva_prediccion = $mlp->predict([/* Nuevo índice temporal */]);

Paso 5: Evalúa tu modelo de ventas

Para saber si el modelo funciona bien, compara las predicciones con los datos reales.

$predicciones = [];
foreach ($ventas_normalizadas as $key => $venta) {
    $predicciones[] = $mlp->predict([$key]);
}

$errores = [];
foreach ($predicciones as $index => $prediccion) {
    $errores[] = abs($prediccion - $ventas_normalizadas[$index]);
}

$error_promedio = array_sum($errores) / count($errores);
echo "Error promedio: $error_promedio";

Conclusión

Como ves, usar TensorFlow desde PHP no es tan complicado. Con un poco de práctica, podrás mejorar tus modelos de predicción y aplicarlos a muchas otras áreas: comportamiento de usuarios, compras futuras, etc.

¿Quieres que prepare una segunda parte de esta guía para hacer predicciones más avanzadas? Escríbemelo en mi página de contacto o comenta abajo.

La Computación Cuántica Revoluciona la Vulnerabilidad de la Encriptación Militar

Por
Jordi Morillo
-
0

En el mundo de la ciberseguridad, la computación cuántica está empezando a generar serias preocupaciones. Aunque los ordenadores cuánticos aún están en una fase temprana, su potencial para romper encriptaciones actuales, incluso las militares, es real y podría cambiar por completo la forma en que protegemos nuestra información.

¿Qué es la Computación Cuántica?

A diferencia de los ordenadores tradicionales, que funcionan con bits que son o un 0 o un 1, los ordenadores cuánticos utilizan qubits. Estos pueden estar en múltiples estados al mismo tiempo, lo que les otorga una capacidad de procesamiento exponencialmente mayor. Esta diferencia fundamental es lo que permite a los ordenadores cuánticos abordar problemas complejos que hoy en día resultan intratables para las máquinas convencionales.

Amenazas Cuánticas a la Encriptación

La encriptación actual se basa en la dificultad matemática de ciertos problemas, como la factorización de números grandes. Sin embargo, con la computación cuántica, algoritmos como el de Shor podrían descomponer estos problemas en fracciones de tiempo, rompiendo la encriptación RSA, que se utiliza en comunicaciones militares, bancarias y empresariales.

Ejemplos Concretos

Un ataque cuántico exitoso podría descifrar datos clasificados o información de misiles nucleares en cuestión de horas, lo que antes habría tardado miles de años con ordenadores convencionales. Esto abre un panorama en el que ninguna medida de seguridad basada en la criptografía tradicional será suficiente.

¿Estamos Preparados?

La respuesta es un rotundo no. Aunque se están desarrollando métodos de criptografía post-cuántica, las instituciones y empresas no han adoptado aún estas tecnologías. Se requiere una transición rápida y estratégica hacia métodos que puedan resistir el poder de la computación cuántica.

¿Qué Pueden Hacer las Empresas?

Las empresas deben adoptar acciones concretas para estar preparadas frente a esta amenaza emergente:

  1. Auditoría de Encriptación Actual: Evaluar los sistemas existentes, identificar vulnerabilidades y preparar un plan de migración hacia criptografía post-cuántica.
  2. Implementar Criptografía Post-cuántica: Aunque esta tecnología aún está en desarrollo, las empresas pueden empezar a integrar algoritmos como los basados en redes, diseñados específicamente para resistir los ataques cuánticos.
  3. Plan de Migración Progresiva: Las áreas más críticas, como la comunicación financiera y el almacenamiento de datos sensibles, deben ser las primeras en adoptar estos cambios. Las empresas deben planificar una migración escalonada hacia estos sistemas más robustos.
  4. Inversión en Investigación y Desarrollo: Participar en proyectos de investigación y mantenerse al tanto de las últimas tendencias en ciberseguridad cuántica permitirá a las empresas adaptarse con mayor rapidez.
  5. Alianzas con Expertos en Ciberseguridad Cuántica: Consultar con especialistas en criptografía cuántica puede ayudar a las empresas a tomar decisiones informadas sobre sus sistemas de seguridad.

Estas medidas no solo fortalecerán la protección de las empresas, sino que les permitirá estar un paso por delante en el futuro del mundo digital.

El Futuro de la Ciberseguridad

La computación cuántica es una espada de doble filo. Por un lado, permitirá resolver problemas complejos; por otro, si no nos preparamos adecuadamente, dejará expuestos los sistemas de encriptación actuales. La carrera por asegurar la información no ha hecho más que empezar, y quienes se adapten más rápido tendrán una ventaja crucial en este nuevo mundo digital.

Para Terminar

El avance de la computación cuántica es inevitable, y con él vienen nuevos desafíos en ciberseguridad. Adoptar medidas de protección ahora es crucial para mitigar los riesgos. Las empresas, especialmente las que gestionan información sensible, deben empezar a migrar hacia tecnologías post-cuánticas si no quieren verse superadas cuando esta revolución se haga realidad.

1...121314...20Página 13 de 20

Recursos prácticos para desarrolladores modernos

Programador-web.com es un espacio donde los desarrolladores encuentran inspiración, desafíos prácticos y recursos para crecer profesionalmente aplicando buenas prácticas de programación.

Categorias

Otros enlaces

Documentos legales

Copyright © Jordi Morillo Sells 2025. Todos los derechos reservados.

Configuración de Cookies

Seleccione qué tipos de cookies desea aceptar: