Czym zajmuje się front-end deweloper? Przykład strony G4N

Dla zwykłego użytkownika budowa strony może wydawać się prosta. W końcu, parafrazując powiedzenie, jak wygląda witryna każdy widzi. To, czego nie widać, to front-end łączący elementy takie jak tekst czy miniaturki obecne na stronie z oddalonymi od nas, setki lub tysiące kilometrów, serwerami. Aby ustalić jak działa enigmatyczny „przedni-koniec” i czym zajmują się front-endowcy zapytałem o to jednego z nich, Krzysztofa Baranieckiego z Global4Net, pracującego aktualnie nad nową stroną G4N.

Czym jest i jak działa front-end?

Wielu z Was może nadal zadawać sobie pytanie – front end co to właściwie jest? Poszerzając to co już powiedzieliśmy front-end mieści się na granicy rozwiązań wizualnych i współpracy z serwerową częścią strony. Jest to proces przemiany informacji informatycznych w graficzne elementy, które następnie są udostępniane użytkownikom do interakcji. Front-endem lub fasadą jak się zwyczajowo go nazywa można zarządzać bezpośrednio za pomocą języków takich jak, HTML, CSS czy JavaScript. Można to robić również z poziomu  platformy CMS (content management system) służących do budowania i zarządzania witrynami, np. Magento lub, tak jak przy nowo powstającej stronie G4N, WordPress. Czemu akurat WordPress a nie HTML?

Czemu CMSy?

WordPress posiada dużą społeczność, co oprócz wsparcia oferuje większą swobodę i możliwości prezentacji rozwiązań typu blog czy artykuły, a tego właśnie wymagamy od naszej nowej strony – mówi Krzysztof. 

Platformy CMS działają bardzo dobrze przy rozwiązaniach, które poddawane będą częstym aktualizacjom. Ponadto platformy te nie wymagają znajomości języków, gdyż obsługiwane są w skrypcie, który w pewnej mierze automatyzuje zmiany w kodzie. Usprawnia to funkcjonowanie całego front-endu a programiści mogą nanosić edycje do poszczególnych stron niezależnie od innych. Usprawnia to pracę, ponieważ programista może zmienić funkcjonowanie jednego lub kilku elementów, nie musząc martwić się o to jak zareaguje na to reszta kodu na stronie. Pomaga to usuwać pojedyncze usterki, takie jak źle pokazujące się grafiki, uszkodzony tekst lub niedziałająca animacja. Oczywiście najpierw trzeba dojść czemu dana rzecz nie funkcjonuje tak jak powinna, co zazwyczaj zabiera lwią część czasu pracy. Ale jak sam Krzysztof mówi „front-end to 70% planowania i 30% akcji.”

Czym zajmuje się front-end deweloper?

Do obowiązków front-end dewelopera należy przede wszystkim opracowanie i optymalizowanie elementów widocznych dla użytkownika, który korzysta z rozwiązania. W optymalizację tego contentu wchodzą sposób prezentacji składników strony, ale też mniej oczywiste rzeczy, takie jak szybkość ładowania strony i obliczanie wartości dla animacji.

Krzysztof, pracujący aktualnie w G4N nad nową stroną, zajmował się programowaniem hobbystycznie od młodości. Profesjonalnie informatyką zajął się trzy lata temu, gdy ukończył studia podyplomowe ze specjalizacją programisty front-endowego i zdobył pierwszą pracę w zawodzie.

Front-endowcy wchodzą do akcji po tym jak już zawiąże się plan, określający w jaki sposób ma powstawać sfera elementów widocznych dla użytkownika – podkreśla Krzysztof.

Jak sam mówi, front-endowiec nie musi być zaznajomiony z trendami graficznymi i posługiwać się programami graficznymi na eksperckim poziomie, jednak jego praca polega na łączeniu programowania z dbaniem o szatę graficzną. Co jeszcze wchodzi w zakres jego obowiązków przy budowie struktur stron internetowych?

Stylowanie na podstawie otrzymanych layoutów

Front-end developer realizuje wcześniej ustalone projekty na podstawie layoutów stworzonych i przekazanych im przez grafików i UX designerów. Do nich należy dobór najbardziej kompatybilnych formatów plików, przygotowywanie szablonów parametrów tekstu, bloków treści, kolorami i elementami tła jak i automatycznie generowanymi treściami.

Budowa responsywności (RWD)

W Responsive Web Design chodzi o wygodę i satysfakcję użytkownika. Łączy się to mocno z podejściem Mobile First, które priorytetyzuję doznania osób łączących się z internetem z urządzeń mobilnych. Krzysztof, który pracuje nad wersją mobilną nowej strony Global4Net, podkreśla, iż dzięki temu podejściu wie już jak będzie wyglądał projekt w wersji mobilnej i jak będzie skalowany do wersji desktopowej. Znając tylko minimalną i maksymalną szerokość układu strony, front-end developer jest w stanie, w trakcie rozpoczęcia pracy stworzyć taką stronę, która ułatwi nam pracę i odwzorowuje prototyp, czyli spełni wszystkie zakładane z góry cele.

Optymalizacja pod kątem pozycjonowania

To również jest ściśle powiażane z zadaniami, które ma front-end developer. W pozycjonowanie stron internetowych wchodzą działania takie jak SEO, czy właśnie kodowanie zgodnie ze standardami RWD i Mobile First, które od kilku lat są preferowane przez algorytmy Google’a. Pomocnymi praktykami są, np. tworzenie map stron, opieka nad metadanymi i atrybutami elementów obecnymi na stronie jak i implementacja PWA, która zapewnia dodatkowe zalety.

Integracja systemów

Front-end developer pracuje również przy integracji systemów w celu osiągnięcia synergii. Integracja polega na doprowadzeniu do współpracy dwóch odrębnych systemów i przesyłu danych między nimi. Ma to na celu usprawniać spójność danych, wygodę użytkowania systemu, zarówno z poziomu konsumenta jak i administratora, a także przepływ informacji.

Testowanie stron internetowych

Mimo, że w software house’ach zazwyczaj istnieją osobne działy odpowiedzialne za testowanie oprogramowania i rozwiązań, nie znaczy to, że na ich barki mamy zrzucać niesprawdzony kod i strony. Do obowiązków front-end developera należy zatem sprawdzanie jak wprowadzone przez niego elementy i zmiany są wczytywane. Front-end dokonuje tego poprzez ładowanie treści na różnych urządzeniach, obsługujących różne systemy. Musi sprawdzić jak dana strona otwierana jest otwierana przez inne przeglądarki i czy otwiera się we wszystkich trybach. Może to brzmieć jak żmudne zajęcie front-end developera jednak poprawnie wykonane przynosi efekt w postaci satysfakcji użytkownika.

Budowa wtyczek, dodatków i modułów do aplikacji internetowych

Czasami podstawowa oferta platformy e-Commerce czy CMS nie zaspokaja naszych potrzeb.  Wtedy prezentujemy je front-end deweloperowi i wspólnie wybieramy rozwiązania, które odpowiadają nam i mogą być łatwo wprowadzone w strukturę funkcjonującego już systemu. Mogą to być wtyczki, dodatki lub całe moduły. Później front-end deweloper odpowiedzialny jest za dostosowanie wybranych rozwiązań i za ich utrzymanie.

Jakie są cechy dobrze zrobionego front-endu?

Po pierwsze harmonijna współpraca kodu z elementami graficznymi będącymi w składzie witryny. Pomimo, że platformy CMS nie wymagają znajomości języków programowania, front-end developer powinien nadal posiadać wiedzę z zakresu kodowania. Oprócz tego kluczowym jest także umiejętne posługiwanie się programami graficznymi, gdyż dopiero znając ich działanie, front-end developer może w pełni pojąć jakim mechanizmom mogą ulegać pliki graficzne wtłoczone w interfejs aplikacji lub strony internetowej.

Poza indywidualnymi umiejętnościami i kompetencjami ważną rolę pełni także komunikacja z resztą zespołu. Front-end deweloperzy pracujący nad nową stroną G4N codziennie wymieniali się sugestiami dotyczącymi rozwiązań. Pomogło to w zaprojektowaniu jej w taki sposób, aby proces produkcji odpowiadał potrzebom i możliwościom pracowników zaangażowanym w projekt.  Takie podejście tyczy się również innych projektów wdrażanych przez software house Global4Net. Praca we front-endzie to nie samotne wklepywanie kodu, tylko ciągła wymiana pomysłów i propozycji jak można coś usprawnić, coś dodać. W tej pracy liczy się efekt końcowy, jego jakość i odbiór użytkownika.

Kluczowa jest komunikacja. To nie jest postawa typu: masz i rób, bo to będzie jak praca na taśmie. A tu chodzi o efekt, jakość i odbiór użytkownika – mówi Krzysztof. 

Trzecią pożądaną praktyką dobrego front-endu jest przemyślenie logiki całego projektu zanim front-end deweloperzy przystąpią do pracy. Innymi słowy chodzi o gruntowne przygotowanie strategii wdrażania rozwiązań zaproponowanych odgórnie przez klienta. W skład tej strategii powinny wchodzić wszystkie możliwości i warunki spełnienia projektu, żeby deweloperzy byli przygotowani na potencjalne problemy. Jak podkreśla Krzysztof, brak przemyślenia w okresie planowania projektu, może skończyć się pojawieniem problemu, na który nie jesteśmy przygotowani i może on doprowadzić do rozwoju liczby potknięć i usterek, które wydłużą czas. Tak naprawdę planowanie powinno nam zająć jak najwięcej czasu, po to, by właściwa produkcja zajęło nam go jak najmniej.

Jakich technologii używa się podczas pracy nad front-endem?

Narzędzia jakich używa front-end developer powinny być zależne od typu projektu nad którym aktualnie pracuje. Podczas pracy nad nad nową stronę Global4Net, Krzysztof wykorzystywał programy Adobe XD i Microsoft Visual Studio. Aplikacja od Adobe, umożliwiła mu wgląd w pliki przygotowywane bezpośrednio przez UX designerów i grafików.  Dzięki temu mógł dopasować  kompatybilną strategię i rozwiązania celem zaimplementowania danych elementów w skład strony internetowej. Wgląd do makiet funkcjonalnych i layoutów pozwolił mu na odpowiednie przekodowanie danych i przygotowanie układu strony.

Natomiast narzędzie Visual Studio pozwala na kontynuowanie pracy front-end developera poza warstwę graficzną i ingerencję po stronie kodowej. Chcąc pracować we front-endzie warto poznać też narzędzia takie jak Photoshop, a jeśli chodzi o stronę programowania, jednymi z najpopularniejszych bibliotek są React i Vue.js a także Angular o którym pisaliśmy w tym artykule. Natomiast najczęściej wykorzystywanymi językami są tak jak napisaliśmy na początku: HTML, CSS, JavaScript. Są one przydatne przy pracowaniu nad takimi rozwiązaniami jak PWA, które coraz częściej uznawane jest za obowiązkowe wdrożenie w e-Commerce.

Front-end a back-end

Front-end i back-end jest jak jing-jang: jedno nie działa bez drugiego. Jak podkreśla Krzysztof, podczas wdrażania wszelkich rozwiązań w G4N, front-endowcy utrzymywali komunikacje z back-endowcami. To właśnie ta współpraca jest odpowiedzialna za prawidłowy przepływ informacji pochodzących z serwera na stronę widoczną dla użytkowników.

Współpraca z back-endem wygląda w ten sposób: 'Co mogę ci dać i co ty z tym zrobisz co usprawni moją dalszą pracę nad tą rzeczą.’ Na koniec tej wymiany wszyscy powinni być zadowoleni – front, back, admin i klient – wyjaśnia Krzysztof. 

Jak zostać front-end developerem ? 

Bez wątpliwości internet od dawna jest głównym kanałem komunikacji i życia ludzkości. Dlatego dobrym ruchem jest zapoznanie się z technologiami i mechanizmami za pomocą których funkcjonuje. Zadaliśmy pytanie naszemu specjaliście co powinien umieć frontend developer?Krzysztof podkreśla, że dzięki internetowi materiałów do uczenia się fachu front-end dewelopera nie brakuje. Trzeba tylko „chcieć i mieć na to czas” i zacząć aplikować na stanowiska o nazwie Junior front-end developer. A najlepiej na początek znać podstawy HTML CSS i Javascript, ponieważ we front-endzie nie ma czegoś takiego jak opanowanie całego materiału.

Co chwila coś się zmienia, wchodzi jedna aktualizacja, drugi patch – nic nie jest stałe. Ale dzięki internetowi jest możliwe nadążanie za tempem zmian – mówi Krzysztof.

Nie należy myśleć, że pracana stanowisku frontend developer to praca monotonna, bo wpisuje się linijki kodu. Bardziej przypomina ona rozwiązywanie ciągle pojawiających się zagadek i zagwozdek technicznych. Krzysztof zauważa, że front-end zaskakuje nieważne od długości stażu. Problemy można w rozwiązać w przeróżny sposób, jednak należy pamiętać, że jedne są bardziej a inne mniej efektywne. Jest to praca, w której niepozorny problem może nas doprowadzić do bardzo ciekawego rozwiązania.  Podobnie jak w pracy grafika – wszystko może zacząć się od jednej kreski.