Zacznij w IT: Front-end developer

Czy kiedykolwiek zastanawiałeś się ile stron internetowych jest w sieci? Jedno proste zapytanie w Google w ułamkach sekund wyświetli miliony wyników. Przez ponad dwie dekady od powstania pierwszej strony www internet rozrastał się w coraz szybszym tempie. Zmieniały się trendy i wykorzystywane technologie. Obecnie szacuje się, że w sieci jest już ponad miliard stron. Ich twórcami są programiści webowi: front-end i back-end developerzy. Bohaterem dzisiejszego wpisu jest pierwszy z nich.

Razem z Łukaszem Wełniakiem z Efigence opowiemy Ci jakie umiejętności musi mieć front-end developer i na czym polega jego codzienna praca.

Czym zajmuje się front-end developer?

W web developmencie front-end to fasada stron internetowych i aplikacji. Jest mieszanką kodów HTML, CSS i JavaScript, które są interpretowane przez przeglądarkę. Odpowiada za wyświetlanie treści strony oraz wchodzi z użytkownikiem w interakcję.

Wyobraź sobie, że chcesz znaleźć w wyszukiwarce lotów najlepsze połączenie do Londynu. Front-end wyświetla Ci całą zawartość strony (miejsce i data wylotu, punkt docelowy, liczba pasażerów) oraz przesyła określone przez Ciebie zapytanie do back-endu. Algorytmy aplikacji wyszukują w bazach danych lot, który spełnia podane przez Ciebie kryteria. Wyniki Twojego zapytania zostaną zwrócone do front-endu i zobaczysz je w przeglądarce.

„Dla front-end developera sztuką tworzenia jest pisanie kodu, który odzwierciedla określony design i mechanikę strony.”

Łukasz Wełniak

Stworzenie aplikacji internetowej to złożony proces. Nad produktem nie pracują tylko programiści, a cały zespół specjalistów. Aby strony internetowe były dla użytkownika intuicyjne i funkcjonalne, front-endowiec łączy umiejętności techniczne ze zmysłem artystycznym. W codziennej pracy front-endowiec współpracuje z UX designerami (projektowanie użyteczności i makiety aplikacji), grafikami (projekt graficzny strony), back-endowcami (logika aplikacji i bazy danych) oraz project managerami.

Jak wygląda dzień pracy front-end developera?

Wielkość zespołu, specyfika tworzonych produktów czy metodyka zarządzania projektami – to wszystko zależy od branży w jakiej działa firma, jej wielkości i wykorzystywanych technologii.

Trzy typowe miejsca pracy front-endowca to software house, agencja reklamowa i korporacja. Większość firm IT pracuje w trybie projektowym (projektem jest konkretny produkt). Do najpopularniejszych metodyk zarządzania projektami należą Scrum i Kanban.

Dzień z życia junior front-end developera w Efigence

Efigence specjalizuje się we wdrażaniu innowacyjnych rozwiązań technologicznych, projektowaniu customer experience i doradztwie.

Każdy junior front-end developer, który rozpoczyna pracę w Efigence zaczyna od działu utrzymania stron i aplikacji internetowych czyli działu maintanance.
Jest to głównie praca z HTML-em i CSS-em oraz z prostymi skryptami w JavaScript.

“Praca w dziale maintanance wyrabia nawyki. Uczy systematyki pracy, organizacji i szukania pomocy u starszych, doświadczonych programistów.”

Łukasz Wełniak

Początki pracy to prawdziwa szkoła życia. Dlaczego? Każdy junior odpowiada za kilku klientów, którzy oczekują szybkiej implementacji ich pomysłów. Wiąże się to z presją czasu i krótkimi terminami, ale również z bardzo szybkim poszerzaniem wiedzy.

W zależności od tempa rozwoju nowych umiejętności, po około 4-6 miesiącach, młodszy programista dołącza do zespołów tworzących zaawansowane aplikacje webowe m.in. systemy bankowe.

Mentoring

Każdy zespół projektowy ma swojego lidera. Często ma też lidera technicznego, w zależności od wielkości projektu i zaawansowania technologii. Lider rozdysponowuje zadania, nadzoruje pracę i wprowadza usprawnienia, automatyzację. Jest to pierwsza osoba, która sprawuje opiekę nad juniorem.

Jakie umiejętności są niezbędne na stanowisku front-endowca?

HTML & CSS

HTML (HyperText Markup Language) i CSS (Cascading Style Sheets) służą do budowania podstawowego szkieletu strony. To dzięki nim wstawisz na stronę obrazy, teksty czy tabele. Dzięki CSS-owi możesz określić wygląd elementów na stronie m.in. ustawić kolory i wielkości czcionek czy zdefiniować kolor tła. Zaawansowany CSS pozwoli Ci tworzyć skomplikowane rysunki i animacje.

„Korzystaj z HTML-a i CSS-a świadomie. Nie wystarczy, że strona będzie wyglądała ładnie. Istotne jest zbudowanie poprawnej semantycznie strony, która nie będzie zwracała błędów z walidatora.”

Łukasz Wełniak

JavaScript

Sam HTML i CSS nie pozwoli na stworzenie zaawansowanej strony. Do wprowadzenia interakcji z użytkownikiem lub zaawansowanych animacji potrzebna Ci będzie znajomość JavaScript (w skrócie JS). Odpowiada za logikę aplikacji działającej w przeglądarce. Za pomocą JS możesz tworzyć gry online, interaktywne filmy, czy mapy, które zmieniają się w czasie rzeczywistym.

Git i system kontroli wersji

System kontroli wersji umożliwi Ci śledzenie zmian, które wprowadzasz w kodzie strony. Dzięki niemu możesz cofnąć niechciane zmiany i współdzielić kod źródłowy z innymi programistami.

Najbardziej rozpowszechnionym systemem kontroli wersji jest Git. Znajomość i umiejętność korzystania z Git-a jest jednym z kluczowych wymagań do każdej firmy na stanowisko programisty.

jQuery

jQuery to biblioteka JavaScript, która rozszerza czysty JS o funkcje ułatwiające korzystanie z języka. Dzięki jQuery możesz tworzyć takie same funkcjonalności, co za pomocą czystego JavaScript-u, ale w szybszy i prostszy sposób.

Czy to wystarczy by zacząć?

Świetne opanowanie HTML-a i CSS-a oraz solidne podstawy JavaScript to w wielu firmach wystarczający poziom na start. Nadal jednak jest to początek dalszej nauki.

Frameworki JavaScript

Wejście na wyższy level programowania zapewni Ci znajomość frameworków JavaScript. Framework to gotowy szkielet aplikacji zbudowany w danym języku programowania. Dzięki niemu wzrośnie efektywność i szybkość Twojej pracy. Istnieje wiele różnych frameworków JS, ale do najpopularniejszych należy Angular, Ember czy Backbone. To ich znajomość jest aktualnie najbardziej poszukiwana na rynku.

Frameworki front-endowe

Najpopularniejszym frameworkiem CSS jest rozwijany przez programistów Twittera Bootstrap. Wiele elementów CSS jest powtarzalnych przy każdym projekcie. Bootstrap definiuje je za Ciebie zanim jeszcze zaczniesz pisać kod. Może być stosowany do stylowania m.in. tekstów, formularzy, przycisków, wykresów czy tabel.

Preprocesory CSS

Preprocesory CSS to kolejne narzędzia, które przyspieszą i ułatwią proces pisania kodu CSS. Do najpopularniejszych należy Less i Sass. Podczas tworzenia złożonych stron Twoje arkusze stylów mogą mieć po kilkaset linijek kodu. Wykorzystanie Less lub Sass pozwoli Ci napisać te same style z użyciem kilkukrotnie mniejszej ilości kodu.

Umiejętności techniczne to nie wszystko

Tylko około 50% czasu pracy programisty polega na kodowaniu. Pozostała połowa poświęcona jest na spotkania zespołu, planowanie projektu, analizę potrzeb użytkowników, code review, testy czy tworzenie dokumentacji. Praca zespołowa, umiejętność rozwiązywania problemów czy zdolności komunikacyjne to nie są puste frazesy. Bez nich nie odnajdziesz się w zespole.

Przeczytaj o 5 miękkich umiejętności, o których każdy programista powinien pamiętać.

Zwróć uwagę na umiejętności, które już posiadasz. Pracodawcy w środowisku IT docenią nietechniczne umiejętności, które zdobyłeś w innej branży.

“W zespole mamy developerów z różnym doświadczeniem zawodowym. Ze względu na swoją skrupulatność i cierpliwość bardzo dobrze radzą sobie osoby po finansach czy księgowości. Jedna z naszych programistek przez wieloletnią pracę w PR-rze rozwinęła umiejętności komunikacyjne. Dzięki temu wysyłamy ją na projekty międzynarodowe.”

Łukasz Wełniak

Jak zacząć karierę junior front-end developera?

#1. Zbuduj solidne podstawy

Przeglądając portale z ogłoszeniami o pracę, lista wymagań na stanowisko juniorskie może Cię przytłoczyć. Wymagania te będą się różnić w zależności od wielkości firmy, profilu jej działalności czy preferowanych technologii.

Na początku skup się na zbudowaniu solidnych fundamentów. Biegłość w HTML-u i CSS-ie oraz porządne podstawy JavaScript umożliwią Ci znalezienie stażu lub pierwszej pracy na stanowisku juniora.

Od czego zacząć?

Przede wszystkim od wybrania efektywnej formy nauki dla siebie. W sieci znajdziesz wiele blogów programistycznych, video tutoriali czy kursów e-learningowych. Nauka samodzielna sprawdzi się, gdy potrafisz się zdyscyplinować i zarządzać swoim czasem. Jeśli wolisz uczyć się w grupie pod okiem mentora, rozważ kurs programowania.

Z jakich źródeł korzystać?

Zastanawiasz się jak zaplanować naukę i wybrać formę najbardziej efektywną dla siebie? Więcej na ten temat znajdziesz w artykułach “Jak zacząć w IT?” i „Lifelong learning, czyli jak się uczyć przez całe życie”.

#2 Zdobądź doświadczenie

Ok, nauczyłeś się podstaw. Co dalej? Wertując oferty pracy zobaczysz, że w każdym ogłoszeniu pracodawca oczekuje od kandydata przedstawienia portfolio. Zacznij więc od razu tworzyć własne projekty. Nie masz pomysłów? Stwórz własną stronę, autorski szablon HTML lub zaprojektuj prostą grę przeglądarkową. Zrób research wśród znajomych i rodziny. Może ktoś potrzebuje strony swojej firmy?

Pamiętaj, że w środowisku IT to nie CV jest najważniejsze, lecz umiejętności.

#3 Pierwsza praca

Masz już w swoim portfolio 2-3 dopracowane projekty? Świetnie! Gdzie znajdziesz pierwszą pracę? Zajrzyj na portale i grupy na Facebook-u z ofertami pracy w IT:

Czy warto?

Tworzenie aplikacji internetowych idących z duchem technologii będzie wymagało od Ciebie trzymania ręki na pulsie, śledzenia trendów i zdobywania nowych umiejętności. Wybierając karierę front-end developera decydujesz się na ścieżkę intensywnego rozwoju. I zdecydowanie na ścieżkę, na której nuda Ci nie grozi!

Site Footer

Sliding Sidebar