Weg zur Skalierbarkeit (So verwalten Sie Dienste im Frontend.

Einführung: Die Bedeutung der korrekten Verwaltung von Diensten im Frontend

Zu wissen, wie man Dienste auf skalierbare und lesbare Weise verwaltet, ist nicht nur für die Leistung der Anwendung, sondern auch für die Aufrechterhaltung der Gesundheit und des Wohlbefindens der Entwickler sehr wichtig. Dienste sind der Teil der Anwendung, der mit der Außenwelt kommuniziert, z. B. Aufrufe von APIs, Interaktion mit Datenbanken oder sogar die Verwaltung von Telefonberechtigungen, z. B. Zugriff auf Kontakte. Eine gute Verwaltung dieser Dienste stellt sicher, dass Ihre Anwendung skalierbar ist und in Zukunft keine Kopfschmerzen mehr verursacht.

In diesem Artikel werden wir untersuchen, wie man Frontend-Dienste mithilfe des Repository-Musters skalierbar verwaltet. Dieser Ansatz ermöglicht den Zugriff auf Dienste auf kontrollierte und klare Weise, kapselt Aufrufe an APIs und erleichtert die Wiederverwendung von Code sowie seine Wartbarkeit.

In diesem Artikel erfahren Sie, wie Sie diese Lösung implementieren, welche bewährten Vorgehensweisen Sie befolgen und wie Sie damit sicherstellen können, dass Ihr Code skalierbar und einfach zu warten ist.

Grundlegende Konzepte für die Verwaltung von Diensten: DTOs und Adapter

In einer gut organisierten Architektur ist es wichtig zu verstehen, wie die verschiedenen Schichten einer Anwendung strukturiert sind. Eine der grundlegenden Schichten ist die Infrastrukturschicht, in der die Dienste verwaltet werden, die mit der Außenwelt interagieren.

Innerhalb dieser Infrastrukturschicht tauchen häufig zwei Schlüsselkonzepte auf: DTOs (Data Transfer Objects) und Adapter.

• DTO (Data Transfer Object): DTOs sind Schnittstellen, die Daten in den Antworten von APIs oder Datenbanken darstellen. Sie dienen dazu, sicherzustellen, dass die Informationen, die wir von externen Diensten erhalten, einem bestimmten Format entsprechen, das unsere Anwendung problemlos verarbeiten kann. Beispielsweise könnte ein DTO die Struktur eines Benutzerobjekts definieren, das wir von einer API erhalten.

• Adapter: Adapter sind Funktionen, die für die Übersetzung von Daten von DTOs in Anwendungsdomänenschnittstellen oder umgekehrt verantwortlich sind. Das heißt, sie können dazu dienen, die von uns empfangenen Daten zu übersetzen oder die von uns gesendeten Daten zu übersetzen. Wenn sich die Informationen, die wir erhalten, in Zukunft ändern, müssen wir uns auf diese Weise nur auf den Adapter und nicht auf die gesamte Anwendung konzentrieren.

Die Verwendung von DTOs und Adaptern ermöglicht eine flexible und einfache Anpassung der Infrastrukturschicht an Änderungen in externen Diensten, ohne die Anwendungslogik zu beeinträchtigen. Darüber hinaus wird eine klare Trennung zwischen den Ebenen gewährleistet und sichergestellt, dass jede einzelne ihre spezifischen Verantwortlichkeiten erfüllt.

Beispiel für Daten, die wir erhalten:

// getUserProfile.adapter.ts

const userProfileAdapter = (data: UserProfileDto): UserProfile => ({
    username: data.user_username,
    profilePicture: data.profile_picture,
    about: data.user_about_me,
})

export deafult userProfileAdapter;

Beispiel für Daten, die wir senden:

Das Repository-Muster
Das Repository-Muster basiert auf der Idee, Ihre Datenzugriffslogik von Ihrer Anwendungs- oder Geschäftslogik zu trennen. Dies bietet eine Möglichkeit, die Methoden, die eine Entität in Ihrer Anwendung hat, zentral und gekapselt zur Verfügung zu haben.

Zunächst müssen wir die Schnittstelle unseres Repositorys mit der Definition der Methoden erstellen, die diese Entität haben wird.

// UserProfileRepository.model.ts

export interface IUserProfileRepository {
   getUserProfile: (id: string) => Promise<UserProfile>;
   createUserProfile: (payload: UserProfile) => Promise<void>;
}

Und wir fahren mit der Erstellung unseres Repositorys fort.

// userProfile.repository.ts

export default function userProfileRepository(): IUserProfileRepository {
  const url = `${BASE_URL}/profile`;

  return {
     getUserProfile: getProfileById(id: string) {
          try {
            const res = await axios.get<UserProfileDto>(`${url}/${id}`);             
            return userProfileAdapter (userDto);
          } catch(error){
            throw error;
          }           
     },
     createUserProfile: create(payload: UserProfile) {
          try {
            const body = createUserProfilAdapter(payload);
            await axios.post(`${url}/create`, payload);
          } catch(error) {
            throw error;
          }
     }
  }
}

Dieser Ansatz ermöglicht es uns, die API-Aufrufe zu kapseln und die Daten, die wir im DTO-Format erhalten, über den Adapter in unser internes Format zu konvertieren.

Unten sehen Sie ein Diagramm der Architektur oder Struktur, der wir folgen, wobei die Infrastrukturschicht Dienste, DTOs und Adapter umfasst. Diese Struktur ermöglicht uns eine klare Trennung zwischen Geschäftslogik und externen Daten.

Fehlerbehandlung
Wir können unseren Code weiter verbessern, indem wir einen Fehlerhandler erstellen.

// errorHandler.ts

export function errorHandler(error: unknown): void {
  if (axios.isAxiosError(error)) {
    if (error.response) {
      throw Error(`Error: ${error.response.status} - ${error.response.data}`);
    } else if (error.request) {
     throw Error("Error: No response received from server");
    } else {
      throw Error(`Error: ${error.message}`);
    }
  } else {
    throw Error("Error: An unexpected error occurred");
  }
}

// userProfile.repository.ts

import { errorHandler } from './errorHandler';

export default function userProfileRepository(): IUserProfileRepository {
  const url = `${BASE_URL}/profile`;

  return {
    async getUserProfile(id: string) {
      try {
        const res = await axios.get<UserProfileDto>(`${url}/${id}`);
        return userProfileAdapter(res.data);
      } catch (error) {
        errorHandler(error);
      }
    },
    async createUserProfile(payload: UserProfile) {
      try {
        const body = createUserProfileAdapter(payload);
        await axios.post(`${url}/create`, body);
      } catch (error) {
        errorHandler(error);
      }
    }
  }
}

Esto nos permite desacoplar la lógica de presentación de la lógica de negocio, asegurando que la capa de UI solo se encargue de manejar las respuestas y actualizar el estado de la aplicación.


Implementación de los servicios
Una vez que hemos encapsulado la lógica de acceso a datos dentro de nuestro repositorio, el siguiente paso es integrarlo con la interfaz de usuario (UI).

Es importante mencionar que no hay una única forma de implementar el patrón Repository. La elección de la implementación dependerá mucho de la arquitectura de tu aplicación y de qué tan fiel quieras a las definiciones de la misma. En mi experiencia, una de las formas más útiles y prácticas de integrarlo ha sido mediante el uso de hooks, el cual desarrollaremos a continuación.

export function useGetUserProfile(id: string) {
  const [data, setData] = useState<UserProfile | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const repository = userProfileRepository();

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const userProfile = await repository.getUserProfile(id);
        setData(userProfile);
      } catch (err) {
        setError((err as Error).message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [id]);

  return { data, loading, error };
}

interface UserProfileProps {
  id: string;
}

export function UserProfile({ id }: UserProfileProps) {
  const { data, loading, error } = useUserProfile(id);

  if (loading) return <Skeleton />;
  if (error) {
      toast({
        variant: "destructive",
        title: "Uh oh! Something went wrong.",
        description: error, 
      });
  }


  return (
    <div>
      <h1>{data?.username}</h1>
      <img src={data?.profilePicture} alt={`${data?.username}'s profile`} />
      <p>{data?.about}</p>
    </div>
  );
}

Ahora, el componente UserProfile no necesita saber nada sobre cómo se obtienen los datos del perfil, solo se encarga de mostrar los resultados o mensajes de error.

Esto se puede mejorar aún más si las necesidades lo requieren, por ejemplo con la utilizacion de react query dentro del hook para tener un mayor control sobre el cacheo y actualización de datos.

export function useGetUserProfile(id: string) {
  const repository = userProfileRepository();

  return useQuery({
    queryKey: ['userProfile', id], 
    queryFn: () => repository.getUserProfile(id), 
  });
 }

Conclusión

En este artículo, hemos explorado cómo implementar el patrón Repository en frontend, encapsulando las llamadas a las APIs y manteniendo una separación clara de responsabilidades mediante el uso de DTOs y adaptadores. Este enfoque no solo mejora la escalabilidad y el mantenimiento del código, sino que también facilita la actualización de la lógica de negocio sin tener que preocuparse por los detalles de la comunicación con los servicios externos. Además, al integrar React Query, obtenemos una capa extra de eficiencia en la gestión de datos, como el cacheo y la actualización automática.

Recuerda que no existe una manera única del manejo de servicios (por ejemplo también existe el patrón sagas para el manejo de side-effects). Lo importante es aplicar las buenas prácticas para asegurarnos de que nuestro código siga siendo flexible, limpio y fácil de mantener en el tiempo.

Espero que esta guía te haya sido útil para mejorar la manera en la que gestionas los servicios en tus proyectos frontend. Si te ha gustado, no dudes en dejar un comentario, darle me gusta o compartir el artículo para que más desarrolladores puedan beneficiarse. ¡Gracias por leer!

Das obige ist der detaillierte Inhalt vonWeg zur Skalierbarkeit (So verwalten Sie Dienste im Frontend.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!