Jak AI wspiera pracę Frontend Developera

Twój praktyczny przewodnik po rozwiązaniach sztucznej inteligencji w pracy Programisty Frontend.

Tworzenie aplikacji front-endowych w dużym uproszczeniu polega na pobieraniu danych z back-endu i następnie wyświetlanie ich w odpowiedni sposób oraz przyjmowanie danych od użytkownika i reagowanie na jego polecenia. Aplikacja często zawiera wiele podobnych widoków tworzonych w analogiczny sposób. Wiąże się to zwykle z koniecznością tworzenia pewnej ilości podobnego, powtarzalnego kodu, który spaja ze sobą różne warstwy i wymaga testowania. Warto zadać sobie pytanie, czy musimy sami wykonywać tę powtarzalną pracę, czy ktoś może nas w tym wyręczyć?

Z perspektywy programisty front-end w ostatnim roku zauważyłem jak bardzo zastosowanie nowoczesnych narzędzi pomaga w szybszym tworzeniu aplikacji, dodatkowy w pełni pozbawionych błędów.
W poniższym artykule opisuję zbiorczo zastosowanie takich narzędzi, jak ChatGPT, Github Copilot oraz Github Copilot Chat, jednocześnie określając je skrótowo mianem AI.

Wirtualny mentoring

ChatGPT pozwala na skuteczne znajdowanie rozwiązań problemów programistycznych. Przykładowo, możesz zadać mu ogólne pytania dotyczące tego, co chcesz zrobić, a program naprowadzi Cię na (zwykle) prawidłowe rozwiązanie. To zastosowanie będzie szczególnie przydatne dla tych, którzy dopiero zaczynają programować. Odpowiedzi na pytania, które do tej pory wymagały albo długiego wyszukiwania w Google, albo pytania bardziej doświadczonych kolegów z projektu, teraz można otrzymać bez wysiłku.

ChatGPT potrafi odpowiadać zarówno na niskopoziomowe, jak i wysokopoziomowe pytania. Nie wiesz jak zacząć z Redux? Chciałbyś zintegrować jakąś bibliotekę, ale w sieci brakuje informacji? Szukasz pomysłu, w jaki sposób najlepiej zaprezentować dane? AI zaproponuje Ci szereg rozwiązań, z których będziesz mógł wybrać najlepsze.

Wirtualny mentor w formie AI pozwala też na skrócenie czasu researchu. Zamiast przekopywać się przez dziesiątki tematów na StackOverflow, możesz zapytać AI i otrzymać działającą odpowiedź. Dzięki temu, że programy tego typu działają w formie wtyczek do edytora, nie musisz tak często przełączać się pomiędzy Twoim kodem a przeglądarką. Jest też dobrym rozwiązaniem, gdy chcemy sobie przypomnieć jakąś aktualnie nam potrzebną składnię.

Tworzenie powtarzalnego kodu

Praca programisty w pewnej mierze polega na wykonywaniu nudnych, powtarzalnych zadań, które wymagają jednak dużego skupienia. Dobrym przykładem jest przemapowywanie danych otrzymanych z back-endu do formy możliwej do wyświetlenia na froncie, grupowanie danych czy ich sortowanie. Wszelkie zadania tego typu są znacznie prostsze, jeśli używamy Github Copilot lub Tabnine, wtyczek do IDE, które analizują nasz kod i podpowiadają optymalne rozwiązania. Dzięki temu praca z obiektami nie musi wyglądać tak, że co chwilę przyglądamy się ich strukturze i znów wracamy do pracy. Możesz przykładowo podać wtyczce oczekiwaną strukturę kodu, po prostu zaczynając ją pisać i dokończy ona pracę za Ciebie. Dodajesz kolejną rzecz do nawigacji? Bez problemu, po prostu otwórz kolejne nawiasy klamrowe w kodzie routingu i wtyczka podpowie Ci, co powinieneś tam wpisać.

Powtarzalny kod to także obsługa różnych prostych akcji. Wyobraź sobie, że piszesz grę w Tetris i chcesz obsługiwać akcje na podstawie tego co robi użytkownik. AI jest w stanie podpowiedzieć duże bloki kodu.
Praca z AI wymaga odpowiedniego podejścia. Kiedyś miałem przypadek, że chciałem przemapować dane w specyficzny sposób, jednak Chat GPT cały czas dawał błędne rozwiązania. Zmieniłem strategię, wpisując w program oczekiwany output funkcji i dzięki temu, otrzymałem rozwiązanie, które już nie wymagało poprawek. Z czasem można nauczyć się tworzenia lepszych komend wpisywanych do AIi pracować z nią jeszcze sprawniej.

Szczególnie w przypadku CSS widać, że można pisać kod 'rozmawiając' z AI.

Testy jednostkowe

Testowanie to obszar, w którym zauważyłem szczególny przeskok w jakości pracy dzięki AI. Pisanie testów jednostkowych w Angularze we frameworku wymaga żmudnej konfiguracji każdego komponentu, mockowania danych i następnie mozolnego pisania testów. Dzięki AI można ten proces usprawnić i przyśpieszyć.

Przykładowo, Github Copilot Chat dobrze radzi sobie z tworzeniem testów dla komponentów wymagających wielu zależności. Następnie, możesz poprosić go o utworzenie potrzebnych mocków i napisanie testów.

Kod napisany przez AI często wymaga dostosowania, czasem wtyczka wykorzystuje w nim metod, które nie istnieją w używanym przez Ciebie frameworku. Mimo to, używanie AI pozwala na znaczne zaoszczędzenie czasu podczas pisania kodu testów jednostkowych.

Zarówno Github Copilot Chat, jak i Chat GPT tworzą logiczną strukturę testów i uwzględniają wiele przypadków brzegowych. Jeszcze lepiej AI sprawdza się w przypadku prostych elementów aplikacji jak serwisy czy fasady, które tylko przemapowują dane. Takie testy zwykle działają od razu.

Refaktoryzacja, optymalizacja i zmienianie istniejącego kodu:

Największą trudnością w pracy front-endowca jest wykonywanie zmian w kodzie. Przykładowo mamy sytuację, gdy musimy wkroczyć w obszar zastanego kodu napisanego w TS, który jest napisany niezgodnie z obecnie obowiązującymi standardami w projekcie i jest trudny do zrozumienia.

W takiej sytuacji możemy poprosić AI o:
● Dodanie prawidłowych typów
● Utworzenie brakujących interfejsów na podstawie obiektów, które już istnieją
● Podzielenie funkcji na logiczne, łatwe do zrozumienia bloki
● Dodanie komentarzy, które wyjaśniają działanie kodu

Praca z tak uporządkowanym kodem będzie łatwiejsza, a jeśli dodatkowo dopiszemy do niego brakujące testy jednostkowe, także bezpieczniejsza.
AI pomoże nam w zadaniach, które wymagają “mechanicznego” zmieniania różnych rzeczy w kilku miejscach. Przykładowo, chcemy, żeby funkcja zamiast jednego argumentu przyjmowała ich kilka. Takie zadanie dla człowieka może zająć kilka / kilkanaście minut, AI zrobi to od razu. Za jej pomocą dokonasz też wielu refaktoryzacji, takich jak wymuszenie użycia reduce zamiast for-each czy używanie patternu early return.

Idąc dalej, można też poprosić AI o znalezienie fragmentów kodu, które mogą być napisane wydajniej lub czytelniej i następnie o ich poprawienie.

Podsumowanie

Pracując z AI można się czuć trochę tak, jakby mieć dostęp do wiedzy geniusza-sawanta, który od czasu do czasu zaczyna zmyślać. W większości przypadków oferuje on albo rozwiązanie problemu, albo naprowadza nas na dobre tory, czasem jednak konfabuluje i prowadzi nas w ślepą uliczkę.

Aby wykorzystać jego pomoc w stu procentach, musimy pamiętać o ciągłym rozwoju w zakresie używanej przez nas technologii, inżynierii oprogramowania, wzorców projektowych i wszystkiego, co wiąże się z naszą pracą. ChatGPT czy Github Copilot nie zrobią pracy za nas, jednak na pewno stanowią bardzo wartościową pomoc.