Spécification Frontend Legacy

Note : Ce document fait référence aux spécifications frontend legacy. Pour les spécifications actuelles, consultez Architecture Frontend.

🎨 Spécification Frontend Legacy

Vue d'ensemble

La spécification frontend legacy définissait une interface utilisateur basique avec les technologies suivantes :

Technologies Legacy

• Framework : React 16.x
• Styling : CSS modules
• State Management : Redux
• Routing : React Router v5
• HTTP Client : Axios

Composants Legacy

Structure des composants

// Composant legacy
import React, { Component } from 'react';
import { connect } from 'react-redux';

interface Props {
  clients: Client[];
  loading: boolean;
  fetchClients: () => void;
}

class ClientList extends Component<Props> {
  componentDidMount() {
    this.props.fetchClients();
  }

  render() {
    const { clients, loading } = this.props;
    
    if (loading) {
      return <div>Chargement...</div>;
    }

    return (
      <div className="client-list">
        {clients.map(client => (
          <div key={client.id} className="client-item">
            <h3>{client.nom}</h3>
            <p>{client.email}</p>
          </div>
        ))}
      </div>
    );
  }
}

const mapStateToProps = (state: any) => ({
  clients: state.clients.items,
  loading: state.clients.loading,
});

const mapDispatchToProps = {
  fetchClients: () => ({ type: 'FETCH_CLIENTS' }),
};

export default connect(mapStateToProps, mapDispatchToProps)(ClientList);

Limitations identifiées

1. Performance : Composants de classe moins performants
2. Maintenabilité : Code Redux complexe
3. Styling : CSS modules limités
4. Accessibilité : Manque de support d'accessibilité
5. Responsive : Design non responsive

Migration vers l'architecture actuelle

La migration a apporté :

1. Next.js 14 : Framework moderne avec App Router
2. Material-UI : Composants UI cohérents et accessibles
3. React Query : Gestion d'état serveur optimisée
4. TypeScript strict : Typage fort et sécurité
5. Design System : Composants réutilisables et cohérents

Composants actuels

// Composant actuel
import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { Box, Card, CardContent, Typography, CircularProgress } from '@mui/material';
import { clientService } from '$shared/services/client';

const ClientList: React.FC = () => {
  const { data: clients, isLoading, error } = useQuery({
    queryKey: ['clients'],
    queryFn: clientService.findAll,
  });

  if (isLoading) {
    return (
      <Box display="flex" justifyContent="center" p={3}>
        <CircularProgress />
      </Box>
    );
  }

  if (error) {
    return (
      <Box p={3}>
        <Typography color="error">
          Erreur lors du chargement des clients
        </Typography>
      </Box>
    );
  }

  return (
    <Box>
      {clients?.map(client => (
        <Card key={client.id} sx={{ mb: 2 }}>
          <CardContent>
            <Typography variant="h6">{client.nom}</Typography>
            <Typography variant="body2" color="text.secondary">
              {client.email}
            </Typography>
          </CardContent>
        </Card>
      ))}
    </Box>
  );
};

export default ClientList;

Améliorations apportées

1. Performance : Hooks React et React Query
2. UX : Material-UI et design moderne
3. Accessibilité : Support complet de l'accessibilité
4. Responsive : Design adaptatif
5. Maintenabilité : Code plus simple et lisible

---

Document legacy - Dernière mise à jour : Décembre 2024