Article

Generating front-end code

Category: Expertise strategy

Różne podejścia do generowania kodu front-end - czy znasz je wszystkie?

Kamil Naja, Programista Front-end emagine, 09/11/2023

Jak pisałem w poprzednim artykule, kod front-endowy jest w pewnej mierze powtarzalny. Szczególnie dużo powtarzalności jest na granicy back-endu i front-endu. Ponieważ obiekty z bazy są przesyłane z back-endu, frontend odbiera je i typuje (jeśli używamy np. TS), w celu dalszego wykorzystania.

W tym procesie zachodzi konieczność:

 

  1. wykonania requestów HTTP, co wymaga mozolnego wpisywania konkretnych URL.
  2. zmapowania danych ze Swaggera na obiekty TS (o ile jest on używany).
  3. utworzenia obiektów payloadów, które są przesyłane do back-endu.

Niezależnie od rodzaju użytego frameworka, te akcje będziemy chcieli wydzielić do osobnej wyizolowanej warstwy. W dalszej części artykułu będę ją nazywał serwisem.

Cały ten proces jest powtarzany za każdym dodaniem nowego endpointa do aplikacji. Trwa długo, nie jest twórczy i wymaga dużej uwagi. Kod ten trzeba też utrzymywać i testować. Wielokrotnie zachodzi konieczność walidowania danych w ten sam sposób w wielu miejscach. Chcemy też zachować dużą spójność, używać wszędzie tych samych, najlepszych rozwiązań.

Wszystkie te cechy wskazują na to, że proces tworzenia tej podstawowej warstwy front-endowej warto zautomatyzować. Dzięki temu będziemy mogli skupić się na samej pracy twórczej.

Body2-2.jpg

Wymagania wstępne:

Dwa główne sposoby na generowanie serwisów front-endowych i interfaces to robienie tego w aplikacji back-endowej lub front-endowej. Aby móc je generować, w pierwszej kolejności potrzebujemy dokumentacji OpenApi o odpowiednim poziomie szczegółowości. Przykładowo, powinna zawierać wszystkie endpointy i w pełni oddawać złożoność obiektów. Jeśli na back-endzie używamy enumów, powinny być one przedstawione jako enumy, nie jako stringi. Pola wymagane powinny być również prawidłowo oznaczone.

Kluczowa jest tutaj współpraca między back-endem i front-endem oraz zrozumienie, dlaczego dokumentacja OpenApi musi być dokładna. Jeśli jej tworzenie na back-endzie zajmuje dużo czasu, być może można to zautomatyzować albo wykorzystać lepsze narzędzia.

Z czasem można wypracować idealny model współpracy. Dużo tutaj piszę o znaczeniu dokumentacji OpenApi, ale jest ona naprawdę kluczowa. Choćby dlatego, iż stanowi dla generatora jedyne źródło prawdy. Jeśli plik zawiera błędy albo jest nieprecyzyjny, będziemy musieli analizować i zmieniać go tak długo, aż znajdziemy przyczynę. Nie możemy poprawić czegoś manualnie w wygenerowanym kodzie, poprawki robimy pośrednio przez naprawę źródła.


 

Nie możemy poprawić czegoś manualnie w wygenerowanym kodzie, poprawki robimy pośrednio przez naprawę źródła.

Kamil Naja

 

Co chcemy osiągnąć przez generowanie serwisów?

Naszym celem jest możliwość rozpoczęcia pracy z gotowymi serwisami pobierającymi i wysyłającymi dane, które są właściwie otypowane. Deweloper może dodać swoje dodatkowe warstwy, które wynikają ze specyfiki projektu, na przykład fasady do przemapowania danych albo state do ich przetrzymywania. Te warstwy także można generować, jednak za pomocą innych narzędzi, co opiszę na końcu artykułu.

Idąc dalej, jeśli mamy w aplikacji dużo powtarzalnej logiki, możemy generować całe widoki, jednak takie podejście zwykle się nie sprawdza, z uwagi na wymagania biznesowe.

Generowanie serwisów to też ogromny zysk czasu, gdy aplikacja się zmienia. Aby wygenerować nowe API, po prostu używamy aktualnego pliku specyfikacji i na jego podstawie znowu generujemy serwisy. Przy odpowiedniej architekturze wystarczy wtedy dostosować kod w warstwie pośredniej między serwisami i kodem komponentów, bez dokonywania mozolnych zmian w każdej warstwie.

Generowanie serwisów front-endowych na back-endzie: 

To rozwiązanie jest stosowane głównie wtedy, gdy aplikacja jest niewielka, nie korzysta z wielu mikroserwisów i używa jednego repozytorium dla back-endu i front-endu. Projekty są blisko związane ze sobą i aplikacja back-endowa generuje kod w folderze aplikacji front-endowej.

Przykładem takiego rozwiązania może być projekt NSwag zawierający:

TypeScriptClientGenerator dla Angulara.

Back-end generuje w nim zarówno specyfikację w formie Swaggera, jak i serwisy i interfejsy dla obiektów przesyłanych między warstwami. Plusem takiego rozwiązania jest to, że front-end ma zawsze najnowszą wersję wygenerowanego kodu.

Chcesz wiedzieć więcej?

Pomożemy Ci odnieść sukces w roli niezależnego konsultanta IT.

Generowanie serwisów front-endowych na podstawie Swaggera:

Takie podejście jest bardziej dynamiczne i pozwala na pracę niezależnie od back-endu, zwłaszcza jeśli pracujemy łącząc się do zamockowanego serwera. Jedyną rzeczą jaką potrzebujemy do pracy jest plik Open Api (Swagger). Tworzenie serwisów może być wywoływane jako kolejna komenda w repozytorium frontendowym.

Przykładem sprawdzonego projektu tego typu jest:

ng-openai-gen

oraz

ng-swagger-gen

Dobrym rozwiązaniem przy konfiguracji będzie pominięcie generowania nieużywanych modeli.

Aplikacja tworzy folder zawierający wygenerowany kod, dla każdego pliku OpenApi/Swagger powstaje osobny folder zawierający:

 

  1. modele
  2. serwisy
  3. moduł łączący wszystko w całość

Te dwa bliźniacze projekty wykonują też proste walidowanie danych, dzięki czemu unikniemy wywołania metod w sposób, który doprowadzi do awarii aplikacji.

Generowanie api za pomocą AI:

W tym artykule potraktuje AI nieco po macoszemu. Problem który przedstawiłem we wstępie został już dobrze rozwiązany zarówno w warstwie back-endu jak i front-endu. Generowanie serwisów i interfaces nie wymaga kreatywności i co więcej, chcemy osiągać tutaj spójne rezultaty, takie same za każdym razem.

Z tego powodu nie używam AI do generowania tych struktur, jednak nie jest wykluczone że w przyszłości taki kod będzie generował się jeszcze prościej. AI na pewno pomoże na przykład w szybszym stworzeniu konfiguracji, albo we wprowadzeniu, jak używać jakiegoś generatora.

RPA.png

Jaki jeszcze kod front-endowy możemy wygenerować?

Ogólnie rzecz biorąc - każdy powtarzalny. Przykładem może być kod NGRX, czy kod powtarzalnych struktur w GUI. Ważne jest, aby dobrać właściwe narzędzie do problemu. W przypadku aplikacji angularowej można zautomatyzować tworzenie za pomocą Angular Schematics.

A np:

Yeoman

to rozwiązanie o znacznie szerszym zastosowaniu. Zawiera zarówno wbudowane generatory, jak i pozwala na tworzenie swoich własnych. Przewagą Yeomana jest to, że jest on ekosystemem generatorów i bardzo upraszcza ich tworzenie. Na marginesie chciałbym dodać, że tworzenie kodu dla Yeoman jest dobrym zadaniem dla AI.

Przykładowo, możemy poprosić AI o przerobienie istniejącego kodu aplikacji na szablony Yeomana i napisanie do nich testów jednostkowych. AI sprawdzi się też do generowania kodu ad hoc, upraszczając jakieś zadanie podczas bieżącej pracy.

W sieci znajdziecie też mniejsze projekty generatorów do różnych specyficznych zastosowań.

Jeśli musimy pisać dużo powtarzalnego kodu, być może pomocne będzie wydzielenie go do reużywalnego komponentu z konfiguracją.

 

Podsumowując, starajmy się ułatwiać sobie pracę i nie piszmy rzeczy nudnych i powtarzalnych. W projekcie posiadającym dokładną dokumentację OpenApi przestawienie się na generowanie API będzie szybkie i da wiele korzyści.

 

Kamil

Kamil Naja

Programista front-end
Specjalista realizujący projekty dla klientów emagine. Programista Front-end od początków kariery w IT, którą rozpoczynał w 2016 r. Blogger i propagator wiedzy w swojej dziedzinie.

Blog

Więcej wpisów na blogu

left-arrow
right-arrow

Grafowa baza danych rewolucjonizuje zarządzanie informacjami
Expert stories
Webinar

Grafowa baza danych rewolucjonizuje zarządzanie informacjami – odpal zapis webinaru

Już jest! Zapis webinaru pt. Grafowa baza danych rewolucjonizuje zarządzanie informacjami… czyli o Neo4j z perspektywy front-endowca.

Expert stories

Crunch w IT – czy wiesz, jak mu zapobiec?

Temat crunchu pojawia się zwykle w kontekście branży, która tworzy gry komputerowe. Problem jednak nie dotyczy tylko tego sektora rynku. Crunch zdarza się wszędzie. Są jednak sposoby, aby mu zapobiec.

Expert stories

Idealna współpraca testera z programistą – czy to w ogóle możliwe?

W idealnym zespole programistycznym feedback od klienta przekłada się na świetne wymagania. Są one następnie zamieniane na dokładnie opisane zadania, w których jest wszystko ,co niezbędne do wykonania i testowania aplikacji. W rzeczywistości jednak taka sytuacja nigdy nie występuje. Jak to zmienić?

Wszystko o pracy testera oprogramowania - odpal zapis webinaru
Expert stories
Webinar

Wszystko o pracy testera oprogramowania – odpal zapis webinaru

„5 najważniejszych lekcji, które wyniosłem w ciągu 5 lat testowania oprogramowania” … czyli o ewolucji tego obszaru IT, umiejętnościach testera oraz efektywności w zawodzie opowiada konsultant emagine – Piotr Tuński.

Expert stories

Różne podejścia do generowania kodu front-end – czy znasz je wszystkie?

Jak pisałem w poprzednim artykule, kod front-endowy jest w pewnej mierze powtarzalny. Szczególnie dużo powtarzalności jest na granicy back-endu i front-endu. Ponieważ obiekty z bazy są przesyłane z back-endu, frontend odbiera je i typuje (jeśli używamy np. TS) w celu dalszego przetwarzania. Co dzieje się dalej?

Expert stories

AI zbuduje aplikację webową? To możliwe!

Od jakiegoś czasu dysponujemy narzędziem, które jest w stanie przezwyciężyć początkowe trudności w zbudowaniu prototypu aplikacji webowej. Jest nim oczywiście Sztuczna Inteligencja, która – w odpowiednich rękach – może pomóc rozwiązać wiele problemów deweloperów.

Expert stories

Nx dla Angular jako niezawodne narzędzie upraszczające pracę przy projektach IT

Nx to narzędzie, które upraszcza budowanie projektów typu monorepo. W tym artykulę skupię się na jego głównych zastosowaniach w aplikacjach używających Angulara. Narzędzie pozwala także na współpracę z wieloma innymi technologiami, jak React czy Node.

Expert stories

7 grzechów głównych w zapewnianiu jakości: błędy, których powinien unikać każdy tester!

Zagłębimy się w mroczne zakamarki branży testowania oprogramowania. Odkryjemy siedem grzechów głównych, które mogą zaszkodzić dążeniu do doskonałej jakości produktu. Poznaj, jakie pułapki czyhają na testerów i jak unikać tych błędów, prowadząc swój zespół ku ścieżce doskonałości w testowaniu.

Expert stories

Zarządzanie finansami w chmurze, czyli wszystko o FinOps

W miarę jak organizacje coraz bardziej polegają na chmurze obliczeniowej, pojawia się potrzeba skutecznego zarządzania kosztami i optymalizacji wydatków związanych z usługami chmurowymi. FinOps to obszar działalności, który w znacznym stopniu zmienia sposób tego zarządzania. Chcesz wiedzieć więcej?

Dyrektywa NIS2 dot. cyberbezpieczeństwa
Expert stories
Webinar

Już jest – zapis webinaru “Dyrektywa NIS2 dot. cyberbezpieczeństwa”

W obliczu coraz bardziej skomplikowanych zagrożeń związanych z cyberprzestrzenią, bezwzględnym priorytetem dla organizacji na całym świecie staje się zabezpieczenie danych oraz infrastruktury online. Nasz ekspert Grzegorz Powichrowski wesprze Was w ocenie przygotowania firm do spełnienia wymogów Dyrektywy NIS2 w dziedzinie cyberbezpieczeństwa.

Expert stories

Dla specjalistów IT: W jaki sposób odciążyć umysł w pracy

Od kilku lat interesuję się wydajnością pracy i w tym artykule chciałbym przedstawić najważniejsze metody, które wg mnie pozwolą pracować łatwiej i wydajniej w środowisku IT.

Expert stories

Microsoft Dev Box – nowoczesna maszyna robocza

Microsoft Dev Box to zwirtualizowane rozwiązanie, które umożliwia inżynierom IT szybkie uruchamianie samoobsługowych stacji roboczych wstępnie skonfigurowanych do ich zadań, przy jednoczesnym zachowaniu scentralizowanego zarządzania w celu maksymalizacji bezpieczeństwa i zgodności ze standardami w organizacji. Czy już je znasz?

Expert stories

Wymagania niefunkcjonalne w procesie tworzenia aplikacji

Podczas rozwijania aplikacji webowej zwykle odkrywamy szereg specyficznych funkcjonalności, wedle których ma ona działać. Niektóre z nich mogą wydawać się oczywiste dla części członków zespołu IT pracującego nad rozwiązaniem, jednak inni wolą mieć je spisane w szczegółowej formie, aby móc je wszystkie zaimplementować lub testować.

Expert stories

Najlepsze praktyki w zakresie bezpieczeństwa łańcucha dostaw oprogramowania

Łańcuch dostaw oprogramowania to „proces dostarczania produktu do klienta” w domenie IT, odnosi się do procesu projektowania, budowania, dostarczania i utrzymania. Jego bezpieczeństwo jest nie tylko ważnym, ale wręcz kluczowym aspektem współczesnego świata IT.

AI: Nowa fala przyszłości"
Expert stories
Webinar

Obejrzyj zapis webinaru “AI: Nowa fala przyszłości”

Szansa cywilizacyjna, czy też zagrożenie? Algorytmy sztucznej inteligencji od wielu lat stanowią jeden z centralnych punktów dyskusji o przyszłości technologii. Rozwiązania oparte na AI, niezależnie od poziomu organizacji na którym zostaną wykorzystane, pomogą stworzyć nowatorskie modele biznesowe. Sprawdźcie zatem, czy Wasza organizacja jest do tego dobrze przygotowana. Czego się spodziewać? Jak wykorzystać AI, aby tworzyć przewagę konkurencyjną na rynku?

Expert stories

Snapshot testing w aplikacjach front-endowych – czy wiesz już wszystko?

Jednym z największych wyzwań podczas tworzenia aplikacji front-endowych jest unikanie wprowadzania niechcianych zmian. Testowanie logiki biznesowej jest możliwe za pomocą testów jednostkowych, jednak nie sprawdzają one zwykle całej struktury HTML. Rozwiązaniem problemu regresji w plikach HTML może być snapshot testing.

Expert stories

Przyszłość sztucznej inteligencji – jakie wyzwania i możliwości stoją przed światem IT?

Przyszłość sztucznej inteligencji (SI) niesie ze sobą zarówno wyzwania, jak i ogromne możliwości rewolucji technologicznej. Zewsząd słyszymy, że SI przejmie we wszystkim kontrolę i my jako ludzie będziemy już mniej potrzebni lub wręcz zbędni – czy aby na pewno?

Expert stories

Efektywne sposoby na pracę z back-endem

Aby tworzyć rozwiązania front-endowe, zwykle pobieramy dane z aplikacji back-endowej. W tym artykule chciałbym przedstawić, w jaki sposób możemy udoskonalić i przyspieszyć tę pracę. Podstawowe czynniki, które wziąłem pod uwagę podczas analizy, to elastyczność pracy oraz to, czy programista używający API, może edytować dane zwracane przez back-end.

Expert stories

Neo4j: Grafowa baza danych rewolucjonizuje zarządzanie informacjami

Wraz z gwałtownym wzrostem ilości danych na znaczeniu zyskują nowoczesne rozwiązania bazodanowe. Jednym z najciekawszych i najbardziej innowacyjnych rozwiązań jest neo4j – grafowa baza danych, która rewolucjonizuje sposób przechowywania i analizy informacji. W tym artykule przyjrzymy się bliżej temu fascynującemu narzędziu, poznamy jego zalety, funkcje oraz praktyczne zastosowanie.

Expert stories

Jak AI wspiera pracę Front-end developerów – praktyczny poradnik

Z perspektywy front-endowca w ostatnim roku zauważyłem jak bardzo zastosowanie nowoczesnych narzędzi pomaga w szybszym tworzeniu aplikacji i sprawia, że pozbawione są one błędów. W artykule opisuję zastosowanie ChatGPT, Github Copilot oraz Github Copilot Chat, określając je skrótowo mianem AI.

Expert stories

Wypalenie zawodowe specjalistów IT – jak je przewidzieć i jak mu zapobiec?

Na pewno każdy z nas chociaż raz czuł, że w jego pracy coś idzie inaczej, niż by chciał. Dochodzi to tego zmęczenie, stres, spadek motywacji i nagle cały zawodowy świat się wali – zaczynamy myśleć, czy to, co robimy ma sens, czemu dotychczasowe działania nie przynoszą pożądanych efektów. Innymi słowy, wpadamy w rozmyślania nad tym, jak jest ciężko. Najczęściej to tylko zmęczenie, brak odpoczynku, stres, natomiast kiedy warto zadbać o siebie bardziej i przekonać się, czy to nie jest wypalenie zawodowe?

Expert stories

Jak skutecznie zbudować i utrzymać relację z kandydatem podczas procesu rekrutacyjnego w IT

Branża IT od dawna  jest  jedną z najbardziej dynamicznie rozwijających się dziedzin rynku, niezależnie od szerokości geograficznej. Tym bardziej, znalezienie odpowiedniego kandydata do realizacji projektów IT, który spełniałby wszystkie wymagania zarówno pod względem wiedzy i umiejętności technicznych, jak i kompetencji miękkich nigdy nie było czymś prostym.

Expert stories

Poznaj kompetencje miękkie przyszłości w obszarze sprzedaży

Inwestycja w kompetencje miękkie może szczególnie opłacić się w zawodach przyszłości. W przeciwieństwie do twardych, kapitałem nie jest wykształcenie czy fachowa wiedza. Soft skills pozwolą tym, którzy je wdrożą i oswoją, z lekkością adaptować się do zmian jakie czekają rynek pracy.

Paweł Pancerz
Expert stories

Rozwój Chmury – co czeka nas w najbliższej przyszłości?

W ciągu ostatnich lat rozwój technologii chmurowych zmienił się bardzo dynamicznie. Wymogi rynkowe oraz coraz większa świadomość w zakresie potencjału technologii chmurowych sprawiają, że obawy przed tą technologią IT są coraz mniejsze.

Marcin Kosiński
Expert stories

Efektywna praca zdalna w innej strefie czasowej

Zdalna praca w innej strefie czasowej  jest możliwa, gdy w zespole panuje odpowiednia dyscyplina.

ichał Mrozowski, Starszy Analityk Biznesowy, Scrum Master
Expert stories

10 cech dobrego Scrum Mastera

Czy każdy nadaje się na Scrum Mastera? Jeśli zespół poszukuje Scrum Mastera, który wniesie wartość dodaną i będzie dla niego wsparciem – a nie tylko prowadzącym ceremonie – powinien szukać osoby posiadającej konkretne cechy.