5 przykazań Front-end Developera

5 przykazań Front-end Developera

5 przykazań Front-end Developera

Czy zastanawiałeś się kiedyś nad tym czy praca Front-end Developera to tylko wypełnianie określonych zadań? Czy oprócz pisania kodu powinieneś mieć wpływ na coś więcej, a jeżeli tak to czy masz wystarczająco dużo siły, aby podołać wyzwaniu? Poznaj pięć przykazań, które w zastosowaniu sprawią, że odkryjesz front-end na nowo, a Twój horyzont mocno się rozszerzy. Czy jesteś na to gotowy?

Zanim zaczniemy, zapraszam Cię najpierw do małej podróży w czasie. Całkiem niedaleko.

2023 okazał się rokiem wielkiej stabilizacji rynku IT na świecie. Samochody nadal nie latały, a duże portale zamiast wymyślać coraz to nowe potrzeby dla użytkowników, utrzymywały i delikatnie rozwijały to, co już było, jednym słowem… nuda.

Horacy kręcił się na swoim krześle, obgryzając już trzeci ołówek, wzdychał do monitora stęskniony kolejnego projektu, gdyż firma, w której pracował także należała do tych ustabilizowanych. W ostatnim tygodniu tylko dwie rzeczy wyciągnęły go z wszechpanującego marazmu: Google I/O o performance front-endu i kolejna nieudana próba generowania kodu produkcyjnego całych aplikacji z makiet przez AI. Boki zrywać.

Dźwięk powiadomienia mailowego brzmiał dzisiaj jakoś inaczej, zerwał się z fotela i szybko wyświetlił informację o nowym zadaniu.

– No wreszcie! Łaaaaałiiiiii – wykrzyknął w euforii – *Ile można było czekać? Wreszcie!

I usiadł do pracy nad nowym, ekscytującym projektem, jeszcze raz obejrzał I/O, zastosował nowe biblioteki, optymalizował, przeniósł makietę pixel perfect i już po dwóch tygodniach wciskał swój wcześniej znienawidzony guzik do wdrożenia. Przeciągnął się, odświeżył trzy razy przeglądarkę i już podziwiał z resztą świata nowy formularz dostawy.

– Drrryń drrryń – zadzwonił telefon…

Warto w tym miejscu wspomnieć o jednym małym fakcie politycznym. Mianowicie, dwa lata wcześniej Unia Europejska przyjęła dyrektywę zapobiegającą przestępstwom przetargowym, które to wygrywały firmy, zatrudniające podwykonawców, a podwykonawcy kolejnych, co miało wpływ na bezpieczeństwo usług i bardzo rozmytą odpowiedzialność. Ów dyrektywa wymaga, by autorzy strony byli wymienieni w odpowiednim miejscu z imienia, nazwiska i numeru telefonu.

Zatem…

– Drrryń drrryń – zadzwonił telefon – Halo! – zapytał Horacy.
– No cześć! – odezwał się nisko głos w słuchawce. – Widziałem, co zrobiłeś.
– Podobało ci się? – zapytał z niepewnością w głosie wchodząc w pomrukujący ton swojego rozmówcy.
– Nie. Gdzie mój button, dlaczego dane są poprzestawiane, mój szablon wydruku jest… zepsuty? Napraw to!
– Człowieku! To jest dzieło sztuki, zrobione zgodnie z makietą profesjonalnego projektanta z użyciem najlepszych bibliotek! – wykrzyczał zdenerwowany developer.
– Wiesz co? Nie obchodzą mnie twoje biblioteki! Napraw to!

***

Kiedy zaczynałem swoją pracę w Allegro, usłyszałem od mojego mentora, że Front-end Developer jest ostatnim bastionem, przed odsłonięciem użytkownikowi nowych funkcjonalności. Sprawdza, czy wszystko jest dopięte na ostatni guzik, czy teksty są poprawne, obrazki dobrze skompresowane i czy wszystko jest na swoim miejscu. Dalej są już tylko przestrzenie produkcyjnego świata i użytkownik, który może wprost, w każdej chwili powiedzieć Ci: “widziałem, co zrobiłeś” –  bo w końcu to nasza praca jest najbardziej widoczna i odczuwalna dla klientów.

Czyli?
Robisz front-end? Jesteś bastionem!


Front-end development dzisiaj troszkę się pofragmentował. To nie jest już tylko HTML, CSS i Javascript. Ten ostatni stał się osobną działką, odcinając się gdzieniegdzie nawet całkowicie od części designerskiej, mówiąc, że CSS niech robi ktoś inny. Do małej gromadki dołączył web performance – świeża działka, zdobywająca coraz większą popularność. W jakiś dziwny sposób na przestrzeni lat zauważalne jest odcinanie pępowiny, jaką jest design.

Ale jest to błąd.

Nie od parady, dzisiaj, takie coś jak Design Thinking zaczyna pojawiać się coraz częściej w różnych przestrzeniach naszego życia, a nawet tym bardziej powinno być obecne w procesach powstawania front-endu. Dlaczego?

Design Thinking to metoda tworzenia innowacyjnych produktów i usług w oparciu o głębokie zrozumienie problemów i potrzeb użytkowników.

Jednym z głównych założeń jest interdyscyplinarny zespół, który daje spojrzenie na problem z wielu perspektyw.

Zatem, nieważne jakbyś kombinował na warstwie front-endu, powinieneś pamiętać, że  Twoja praca jest skierowana ostatecznie na użytkownika i to on znajduje się na końcu całego procesu. Od Ciebie zależy natomiast, czy ma on otwarte ręce na przyjęcie, czy też zaciśnięte pięści, aby…

No właśnie, dlatego ta wiedza powinna być przyswojona przez tych, którzy chcą być projektantami (bo zakładam, że ktoś, kto już siebie tak mianuje jest w posiadaniu konkretnej wiedzy), project managerów, ownerów i developerów (tak, tak, wy backendowcy też).

I dlatego właśnie przychodzę do Was z pięcioma przykazaniami, jak stawiać jasno i klarownie użytkownika w odpowiednim miejscu w naszej codziennej pracy.

1. Myśl

Nie jesteś kserokopiarką czy też tokarką. Projektant nie wkłada w Ciebie projektu/makiety, a Ty nie wypluwasz gotowego kodu. Analizuj wszystko, co dostaniesz, zatrzymaj się i pomyśl. Sam dobrze wiem, co to znaczy dostać fajny projekt, w którym możemy jak najwięcej “poszaleć”. I spokojnie – poszalejesz, ale pochyl się nad nim z myślą o tym, co jest dobre dla użytkownika, a także co byłoby dobre dla ciebie.

2. Masz tę moc!

Ale ja się nie nadaję! Ja się nie znam! …. i milion wersji tego jednego stwierdzenia. A powiedz mi – jakie jest Twoje hobby? Czy słuchasz jakiejś muzyki? Jaki jest Twój ulubiony film? W jakich momentach dostajesz tzw. gęsiej skórki? Masz tę moc! Masz ten gust! Masz tę wrażliwość! Działaj i przelej siebie także na warstwę zawodową. I…

3. Bądź jak dziecko

Po co? Dlaczego? Jak? Dla kogo? Uważam, że gdybyśmy często zadawali tego typu pytania, to mnóstwo problemów na świecie w ogóle by nie zaistniało. Zdarza się tak, że dostaniesz projekt z poprzestawianymi buttonami “x”, zamykającym modal na środku ekranu, szary tekst na czarnym tle, bo projektant chciał sprawdzić coś nowego. A kiedy mu zadasz jedno z tych pytań, może okazać się, że to była tylko taka chwilowa fantazja. Poklikajcie po sieci, zobaczycie trochę takich chwilowych fantazji. I pamiętaj, zadając te pytania…

4. Bądź uparty

… ale konstruktywnie, nie złośliwie. Świetnym tutaj przykładem będzie obecna strona główna Allegro, której odświeżeniem zajmowali się dwaj konstruktywnie uparci ludzie: ja od strony designu i kolega Paweł od strony bebechów. Z racji tego, że ścieraliśmy nasze pomysły ze sobą, dochodziliśmy do świetnych kompromisów, które stawiały design i kod na mega wysokim poziomie bez większych ustępstw z dochowaniem zadeklarowanego terminu dowiezienia projektu. Aby móc się upierać, musisz mieć wiedzę i stale się rozwijać. Bo pamiętaj – stare, sprawdzone metody są sprawdzone, ale i są stare, a technologia idzie szybko do przodu. Spory mają sens tylko wtedy, kiedy mówicie tym samym językiem, dlatego…

5. Stwórz Esperanto

Uniwersalnym językiem w technologii, czyli niejako technologicznym odpowiednikiem Esperanto, używanym między developerami, designerami, projektantami może być tylko i wyłącznie Design System. Utworzenie takiego systemu, który składa się ze styleguida, zawierającego zasady użycia elementów UI i dobrze udokumentowanej zawartości elementów CSS z opisanymi kolorami, fontami i wymiarami. A czy wiesz, że dropdown i select, tip i message są w różny sposób interpretowane przez developerów i projektantów? Wspólny język zadziała, jeżeli będzie respektowany przez wszystkie strony, oficjalnie obowiązujący, a Wasza praca będzie się skupiała głównie wokół jego rozwoju. Jeden język pozwala skupić się bardziej na użytkowniku, a nie na tym, jak co się nazywa lub co już mamy, a co trzeba dorobić.


 

Patrząc na wszystkie przykazania widzimy, jak bardzo są one od siebie zależne. A to dopiero początek, dobry początek dużego i ekscytującego procesu tworzenia produktu dla użytkownika. Kiedy pracujesz sam, możesz to wszystko przerobić podczas rozmowy wstępnej ze zleceniodawcą, by dowiedzieć się jak najwięcej o zadaniu, które staje właśnie przed Tobą.

Pamiętaj tylko o jednym. To, co napisałem wyżej, nie będzie miało sensu, kiedy nie będziesz znał swojego kluczowego klienta: użytkownika, który będzie korzystał z Twojej aplikacji. Ile ma lat, jakie ma potrzeby, zainteresowania, skąd pochodzi, czego szuka w aplikacji, czego szuka, że znajduje twoją aplikację etc. Nie da się myśleć o użytkowniku, którego nie znasz, nie postawisz go na pierwszym miejscu bez konkretnego uzasadnienia. Ale to jest temat na inny artykuł.

Bądźcie radośni!

A Ty jakie masz sposoby na udaną współpracę i w jaki sposób starasz się skupiać na kliencie? Czy na co dzień starasz się działać według wymienionych przeze mnie zasad, a jakie byś jeszcze dopisał? Czekam na Twój komentarz!

 

Senior Specialist Web Development w Allegro. Humanista w świecie IT. Frontendowiec z siedemnastoletnim stażem. W Allegro już dziesięć lat. Człowiek od styleguidów i niskopoziomowego CSS. Biegły w mowie i piśmie, po to, żeby opowiedzieć o pomysłach, projektach, sytuacji na świecie lub filozoficzno-psychologicznych rozmyślaniach.