Dziś takim zrozumiałym dla ludzi kodem postaramy się odpowiedzieć na bardzo często pojawiające się pytania:

• Czym jest frontend?
• Co składa się na front-end?
• Kim jest front-end developer?
• Czym zajmuje się front-end developer?
• Co musi umieć frontend developer?
• Jak zostać front-end developerem?
• Jak może się rozwijać front-end developer?
• Frontend – czy warto?

Co to jest frontend?

Jeśli serwis WWW podzielimy na to, co widzi każdy użytkownik po wpisaniu domeny w wyszukiwarce i na to, czego nie zobaczy na pierwszy rzut oka, to frontend to ta widoczna część strony. Jego towarzyszem jest back-end – strażnik tego, by wszystko działało, jak należy. Podsumowując back-end dba o zapis i obróbkę danych, wprowadzanych przez userów. Dla porównania na frontend składa się zaś cały wygląd i możliwości strony, które pozwalają użytkownikowi na możliwie maksymalną interakcję. Interfejs strony, menu, grafiki, animacje, układ tekstu – te wyniki front-end zaciąga i wyświetla z backendu i to finalnie widzimy na ekranie monitora lub smartfona.

Co składa się na frontend?

Specjalista IT w zakresie frontendu musi znać trzy najważniejsze języki kodowania, czyli HTML, CSS i JavaScript. Każdy z nich spełnia inne funkcje w programowaniu stron i aplikacji:

• HTML – opisuje cel i znaczenie wszystkich bloków strony,
• CSS – język arkuszy stylów (ang. style sheet language), który odpowiada za wygląd strony (kształty, położenie i kolory użytych elementów),
• JavaScript – idealny do programowania funkcjonalności, ścieżki zachowań użytkowników i sprawnego działania strony.

W dużym uproszczeniu, HTML odpowiedzialny jest za zawartość strony WWW, CSS za to, jak wygląda, a JavaScript za to, jak działa.

Frontend a HTML

HTML to język opisowy. Jako że nie odpowiada za konkretne akcje i algorytmy, przyjęło się, że nie nazywa się go językiem programowania. Przy pomocy znaczników określa, co zawiera każdy blok i zakładka strony WWW. Definiuje tytuły, opisy, tagi, hiperłącza, obrazki, buttony, tabele, akapity tekstu, nagłówki, wersję językową strony i wiele, wiele więcej. Odpowiada za to, co potem jest wyświetlane w przeglądarce.

Frontend a CSS

Rozwinięcie CSS to Cascading Style Sheets, czyli kaskadowe arkusze stylów. Reguły CSS, zbiory zasad formatowania treści, to nieodłączni partnerzy HTML. Służą do opisania wyglądu elementów witryny, stworzonych wcześniej w HTML. Kod CSS wpływa na położenie elementów i zależności między nimi. Dzięki tagom HTML, czy atrybutom CSS definiujemy style i klasę poszczególnych elementów produktu.

Frontend a Javascript

Stworzony przez .Netscape JavaScript umożliwia tworzenie i rozwijanie interfejsu i designu strony o dodatkowe funkcjonalności, takie jak animacje, slider, interaktywne menu, czy wyskakujące okna, na co nie pozwala HTML ani CSS. Wykorzystuje m.in. instrukcje warunkowe, klasy, pętle, tablice, zmienne i wiele więcej programistycznych konstrukcji. JavaScript zrewolucjonizowało interaktywność i responsywność stron WWW. Razem z lekką biblioteką jQuery wyparły z sieci technologię Flash, która do końca 2020 roku zniknie z rynku. W pakiecie z JavaScript warto poznać najpopularniejsze technologie związane z frontendem: React i Redux.

Rodzaje stron tworzonych z wykorzystaniem HTML, CSS i JavaScript

1. Strony statyczne (na bazie HTML i CSS) – przeglądarka pokazuje nam gotowe pliki ze stałymi elementami strony, umieszczonymi na serwerze,
2. Strony dynamiczne (Multi-Page App) – aplikacja generuje plik HTML dla przeglądarki w momencie zapytania, dzięki czemu możemy np. tworzyć odrębnych użytkowników na stronach WWW i pokazywać im inny widok strony,
3. Strony dynamiczne z dodatkiem JavaScript – opcja nr 2, rozszerzona o funkcjonalności i design, kodowane w JS,
4. SPA (Single-Page App) – strony i aplikacje stworzone w całości w JavaScript.

Czym zajmuje się front-end developer?

Praca programisty wymaga od niego wiedzy z zakresu technologii webowych – tworzenia stron internetowych i aplikacji mobilnych. Główne zadanie dla front-end developera to projektowanie wygodnych dla finalnego użytkownika interfejsów strony WWW i opieka nad jej odpowiednim wyświetlaniem na różnych urządzeniach, szczególnie mobilnych.

Co musi umieć front-end developer?

Do programowania front-endu przyda się dobra znajomość języka angielskiego.

Niezbędna jest także znajomość frameworków – pakietów programistycznych, szkieletów do budowy stron i aplikacji. Dla specjalistów JavaScript frameworki będą wygodnymi narzędziami, które ułatwią im codzienne kodowanie. Jest w nich zapisanych wiele podstawowych funkcjonalności stron, dzięki czemu nie muszą pisać rdzenia od zera, a jedynie dobudowywać do niego kolejne fragmenty kodu. Najpopularniejsze frameworki to AngularJS, Backbone, Bootstrap, Foundation i Vue.js (do budowania UI). Ich znajomość jest często oczekiwana przez potencjalnych Pracodawców i project managerów.

W roli front-end developera warto znać takie narzędzia jak Git (rozproszony system kontroli wersji, z którego korzystają m.in. Google, Facebook, czy Netflix), Terminal (legendarne, czarne okienko), wybrane oprogramowanie IDE oraz narzędzia do preprocessingu, usprawniające pracę nad szatą graficzną stron np. LESS, Stylus lub Sass. Więcej przydatnych narzędzi dla front-end developerów znajdziesz tutaj.

Jak zostać front-end developerem? Od juniora do seniora.

Dlatego przygodę z programowaniem warto zacząć od kursu Pythona od podstaw. Nie jest niezbędny do roli front-enda, ale skutecznie otwiera głowę początkującym programistom. Następnie warto rozpocząć Kurs Front-End Developera, gdzie po kolei poznaje się HTML, CSS i JavaScript wraz z niezbędnymi frameworkami i bibliotekami.

Jak może rozwijać się front-end developer?

Świetnym uzupełnieniem wiedzy front-end developera jest znajomość zasad UX (User Experience) i UI (User Interface). Chodzi o optymalizację doświadczeń użytkowników i przygotowanego dla nich interfejsu cyfrowego produktu. Poczucie estetyki, znajomość trendów w tworzeniu stron i aplikacji, elementy psychologii, kreatywność – to cechy nowoczesnego webmastera. Połączenie frontenda z UX/UI Designerem to dziś gwarancja bardzo wysokich dochodów i uczestnictwa w naprawdę wyjątkowych projektach. To w rękach takiego specjalisty spoczywa optymalizacja ładowania strony i prezentacji contentu oraz nawigacji i panelu sterowania. Spec UI tworzy i finalizuje projekty, Frontend koduje, a UX’owiec dostosowuje wdrożone przez nich funkcjonalności do potrzeb userów.

Wiele firm, rekrutując programistów do roli Web Developera, łączącego w sobie grafika i full-stack developera, oczekuje znajomości… Photoshopa. Warto więc poszerzać swoje umiejętności o obsługę pakietu Adobe.

Co więcej świat online dostarcza nam coraz więcej szkoleń w zakresie Design Thinking, coraz popularniejszej metody tworzenia innowacyjnych produktów i usług na bazie głębokiego zrozumienia potrzeb użytkowników. Każdy frontend developer z pewnością powinien rozwijać się w tym zakresie.

Frontend – czy warto?

Czy choć w minimalnym stopniu odkodowaliśmy Twoje wątpliwości i wiesz już, czym jest front-end? Średnie zarobki na stanowisku front-end developera to od 5440 do 9070 PLN brutto, więc jeśli czujesz, że rola front-end developera, to coś dla Ciebie, kliknij tutaj i rozpocznij swoją karierę w IT razem z Software Development Academy.