[veranoo]

Pytanie do #frontend #react #javascript #programowanie

Jak budujecie aplikacje która komunikuje się z jakimś api, to używacie tzw: dto-sów bezpośrednio do widoku czy robicie jakąś warstwę nad tym i mapujecie?

[FiranMercury]

Nie potrafię odpowiedzieć na pytanie zadane przez Ciebie odpowiedziami tak skrojonymi.

Logikę do pobierania danych najlepszym patternem jest zawsze wyciągnięcie do osobnego modułu.

W komponencie odpowiadającym za widok najlepiej jest mieć rezultat przygotowany przez hook.

1. Boilerplate metod komunikacji z API osobno,
2. Metoda do obsługi konkretnego endpointu osobno,
3. Ewentualna funkcja mapująca dane osobno,
4. W przypadku reacta hook, który to wszystko sklei i wyrzuci gotowe dane + wykona rerender elementu

[veranoo]

Logikę do pobierania danych najlepszym patternem jest zawsze wyciągnięcie do osobnego modułu.

@FiranMercury: Tu nie chodzi o logikę pobierania, tylko o interfejs obiektów, które pochodzą bezpośrednio z api. W większości przypadkach to jest samo i wielu myśli że to powielanie. Ale jest sytuacja gdzie api rozbija się wtedy na dwa endpointy, bo dwie rzeczy wylądowały w różnych mikroserwisach. Wtedy masz dwa dto, ale z puntu widzenia UI to się nic nie

[fujiyama]

@veranoo: to zależy.
W większości przypadków wystarczy Ci struktura, którą otrzmujesz z serwera. Możesz przecież ją sobie rozszerzyć ją o swoje pola czy nawet funkcje, które podstawisz potem do widoku.
Naprawdę to pytasz chyba czy używać redux-a.

[veranoo]

Naprawdę to pytasz chyba czy używać redux-a.

@fujiyama: Nie pytam o redux-a. Jak masz interfejs który masz zdefiniowany obok serwisu, np PostDto I pytanie gdzie go używasz. Jeśli używasz go w jakimś komponencie ui to znaczy że jesteś z nim mocno powiązany, a według mojej opinii nie powinieneś. Powinieneś mieć jakąś warstwę abstrakcji która odseparuje Ci jakoś te warstwy. Głupi przykład, na frontendzie macie camelCase a na backendzie snake_case, w różnych

[wybacz]

@veranoo:

Głupi przykład, na frontendzie macie camelCase a na backendzie snake_case, w różnych językach standard jest inny. Jak to ze sobą pogodzisz.

w interceptorze axiosowym:

convertToCamelCase(response.data, { deep: true }) przy responsie
convertToSnakeCase(response.data, { deep: true }), i przy requescie

no a potem co? typujesz response dla kazdego endpointa np. Item[] i komponent sobie przyjmuje items: Item[]

[veranoo]

@wybacz: To jeszcze ktoś używa axios-a w 2023? A później Item jest rozbijany na dwa enpointy i musisz orać całą apkę.

[krand]

@veranoo: idziesz tutaj za mocno w idealizm, to znaczy, ok, tak, posiadanie swojego modelu i mapowanie do niego to bez wątpienia lepsza praktyka sama w sobie, aczkolwiek nic nie jest za darmo i trzeba rozważyć za i przeciw, swoje modele i mapery to masa kodu do utrzymania, która zazwyczaj nie jest aż tak potrzebna, projekt musi być naprawdę duży i używanie ich naprawdę uzasadnione

dla mnie osobiście żaden z argumentów, które

[wybacz]

@veranoo:

To jeszcze ktoś używa axios-a w 2023

nie, nikt xD

[veranoo]

@krand: Zgadzam się z Tobą, ale problem zaczyna się pojawiać gdy masz klika platform a jedno api. Pamiętam zawsze ile czasu zajmuje migracja api z v1 na v2. Chyba wykop też jest tutaj dobrym przykładem xD. Zmiana w api nie może nieść implikacji w UI, bo to proszenie się o kłopoty, mimo wszystko dużo osób tak robi i później przy migracjach powstaje problem. W aplikacjach androidowych, flutterowych, ios-wych oddzielanie dto od

[veranoo]

@wybacz: Po co axios, jak masz natywnego fetch-a. Rozumiem że axios miał rację bytu dla XMLHttpRequest. Dzisiaj jedynie broni się interceptorami.

[fujiyama]

@veranoo: czemu miałbyś nie używać konwencji z backendu?
Piszesz jakieś uniwersalne komponenty, które chcesz wykorzystać w wielu projektach?
To wtedy masz swój model i dane z serwera musisz mapować. Wtedy nie ma wyjścia.
W innym przypadku nie wiem czemu miałbym stosować dwie różne notacje w projekcie.
Ilość kodu należy minimalizować, upraszczać transformacje etc.
Inaczej to potem kosztuje (wydajność aplikacji, czas refaktoru).
Automappery używane na backendzie (np. Java/.NET) jest często przyczyną istotnego

[AntyKuc]

@veranoo:

Po co axios, jak masz natywnego fetch-a. Rozumiem że axios miał rację bytu dla XMLHttpRequest. Dzisiaj jedynie broni się interceptorami.

Axios dla interceptorów i tworzenia customowych instancji API. Service dla danej domeny, który jest klasą w której są dostępne wszystkie endpointy wystawione przez BE dla tej domeny. DTO na returnie metody z klasy, tam sobie ustawiam dodatkowe pola, zmieniam nazwy, request też ma swoje DTO. Dzięki temu podejściu jeżeli endpoint

[veranoo]

@fujiyama: Przeczytaj mają odpowiedź dla kolegi krand, bo nie chcę mi się powtarzać.