Clean Architecture en React et Go : guide pratique avec exemples

Qu'est-ce que la Clean Architecture ?

Les 4 couches de la Clean Architecture

• Entities (Domain) — Les règles métier pures, indépendantes de tout framework
• Use Cases (Application) — Les cas d'utilisation de l'application
• Interface Adapters — Controllers, Presenters, Gateways
• Frameworks & Drivers — React, Go/Gin, PostgreSQL, HTTP

Structure de projet Go — Clean Architecture

myapp/
├── domain/
│   ├── entity/
│   │   ├── user.go          # Entité User, règles métier pures
│   │   └── invoice.go       # Entité Invoice
│   └── repository/
│       └── user_repository.go  # Interface (pas l'implémentation)
│
├── usecase/
│   ├── user/
│   │   ├── create_user.go   # Cas d'usage : créer un utilisateur
│   │   └── get_user.go      # Cas d'usage : récupérer un utilisateur
│   └── invoice/
│       └── generate_invoice.go
│
├── adapter/
│   ├── handler/
│   │   └── user_handler.go  # Contrôleur HTTP (Gin)
│   └── repository/
│       └── postgres_user.go  # Implémentation PostgreSQL
│
└── infrastructure/
    ├── database/
    │   └── postgres.go       # Connexion DB
    └── server/
        └── gin.go            # Setup serveur HTTP

Exemple Go — Entity et Use Case

// domain/entity/user.go
package entity

import "errors"

type User struct {
    ID    string
    Email string
    Name  string
}

func NewUser(email, name string) (*User, error) {
    if email == "" {
        return nil, errors.New("email requis")
    }
    return &User{Email: email, Name: name}, nil
}

// domain/repository/user_repository.go
package repository

import "myapp/domain/entity"

// Interface — le domaine ne sait pas comment les données sont stockées
type UserRepository interface {
    Save(user *entity.User) error
    FindByID(id string) (*entity.User, error)
    FindByEmail(email string) (*entity.User, error)
}

// usecase/user/create_user.go
package user

import (
    "myapp/domain/entity"
    "myapp/domain/repository"
)

type CreateUserUseCase struct {
    repo repository.UserRepository  // injection via interface
}

func NewCreateUserUseCase(repo repository.UserRepository) *CreateUserUseCase {
    return &CreateUserUseCase{repo: repo}
}

func (uc *CreateUserUseCase) Execute(email, name string) (*entity.User, error) {
    // Vérification métier : email déjà existant ?
    existing, _ := uc.repo.FindByEmail(email)
    if existing != nil {
        return nil, errors.New("cet email est déjà utilisé")
    }

    user, err := entity.NewUser(email, name)
    if err != nil {
        return nil, err
    }

    return user, uc.repo.Save(user)
}

Clean Architecture en React

src/
├── domain/
│   ├── entities/
│   │   └── User.ts           # Type User + validation
│   └── repositories/
│       └── IUserRepository.ts  # Interface
│
├── usecases/
│   └── user/
│       ├── CreateUser.ts
│       └── GetUser.ts
│
├── adapters/
│   ├── repositories/
│   │   └── ApiUserRepository.ts  # Implémentation HTTP
│   └── presenters/
│       └── UserPresenter.ts
│
├── infrastructure/
│   └── api/
│       └── httpClient.ts
│
└── ui/
    ├── hooks/
    │   └── useUser.ts        # Pont entre use cases et composants
    └── components/
        └── UserCard.tsx      # Composant pur (pas de logique métier)

// domain/entities/User.ts
export interface User {
  id: string;
  email: string;
  name: string;
}

export function validateUser(user: Partial<User>): string[] {
  const errors: string[] = [];
  if (!user.email) errors.push('Email requis');
  if (!user.name) errors.push('Nom requis');
  return errors;
}

// adapters/repositories/ApiUserRepository.ts
import { User } from '@/domain/entities/User';
import { IUserRepository } from '@/domain/repositories/IUserRepository';

export class ApiUserRepository implements IUserRepository {
  async findById(id: string): Promise<User | null> {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) return null;
    return res.json();
  }

  async save(user: User): Promise<void> {
    await fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(user),
    });
  }
}

// ui/hooks/useUser.ts — le pont entre use case et React
export function useUser(id: string) {
  const [user, setUser] = useState<User | null>(null);
  const repo = new ApiUserRepository();

  useEffect(() => {
    repo.findById(id).then(setUser);
  }, [id]);

  return { user };
}

Avantages concrets de la Clean Architecture

• Testabilité : les use cases peuvent être testés sans base de données ni navigateur
• Maintenabilité : changer de PostgreSQL à MongoDB ne touche qu'à l'adapter repository
• Indépendance des frameworks : passer de Gin à Echo (Go) ou de React à Svelte n'affecte pas le domaine
• Lisibilité : n'importe quel développeur comprend la structure en 5 minutes

Quand NE PAS utiliser la Clean Architecture

• Un MVP ou prototype (livrez vite, refactorez ensuite)
• Un script ou outil one-shot
• Une application très simple avec peu de règles métier
• Une équipe de 1 développeur sur un projet court terme

La Clean Architecture, c'est construire pour que le prochain développeur (ou vous dans 6 mois) comprenne le code sans vous appeler.