Article

front-end-developer-emagine-blog-main-1

Category: Expertise strategy

Jak AI wspiera pracę Front-end developerów

Twój praktyczny przewodnik po rozwiązaniach sztucznej inteligencji.

Kamil Naja, Programista Front-end emagine, 21/06/2023

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.

Kamil

Kamil Naja:
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. 

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ę.

front-end-developer-emagine-blog-middle-2

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.


 

kod-emagine-AI

 

  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.

Developing programming and coding technologies. Website design. Programmer working in a software develop company office.

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.

 


Przeczytaj także:
Kluczowe kompetencje pracownika Help Desk

Chcesz wiedzieć więcej?

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

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.