Co to jest frontend?
Autor: Redakcja Domeny.ForSale Opublikowano
W skrócie: Frontend to część strony lub aplikacji, którą użytkownik widzi i obsługuje: układ treści, menu, przyciski, formularze oraz ich reakcje na działanie. W internecie tworzy się go przede wszystkim za pomocą HTML, CSS i JavaScript. Backend odpowiada natomiast za zaplecze, na przykład sprawdzanie danych logowania i zapisywanie zamówień.
Co należy do frontendu?
Frontend jest interfejsem, czyli warstwą umożliwiającą kontakt użytkownika z systemem. Obejmuje nie tylko wygląd ekranu, ale także zachowanie elementów: otwieranie menu, wybór daty, pokazywanie błędów formularza czy aktualizowanie zawartości koszyka bez przeładowania strony.
W sklepie internetowym do frontendu należą między innymi karta produktu, galeria zdjęć, lista wariantów i przycisk „Dodaj do koszyka”. To on pokazuje, że wybrany produkt został dodany, a podczas oczekiwania na odpowiedź serwera może wyświetlić wskaźnik ładowania.
Frontend nie jest więc wyłącznie dekoracją. Czytelność treści, możliwość obsługi klawiaturą i poprawne działanie na telefonie są równie istotne jak kolory czy animacje. Ładny formularz, którego nie da się wysłać albo który nie wyjaśnia błędów, pozostaje źle działającym interfejsem.
Frontend a backend — gdzie przebiega granica?
Backend to część systemu działająca na zapleczu, zwykle na serwerze. Realizuje reguły działania usługi, kontroluje uprawnienia i komunikuje się z bazą danych. Frontend przekazuje mu żądania i przedstawia otrzymane wyniki w formie zrozumiałej dla człowieka.
Obie części często porozumiewają się przez API, czyli określony sposób wymiany danych między programami. Przykładowo frontend prosi o listę dostępnych terminów wizyty, a backend odsyła dane, z których powstaje widoczny kalendarz.
Przebieg logowania dobrze pokazuje podział odpowiedzialności:
- Frontend wyświetla pola adresu e-mail i hasła.
- Po wysłaniu formularza dane trafiają do backendu przez szyfrowane połączenie HTTPS.
- Backend sprawdza dane i decyduje, czy przyznać dostęp.
- Frontend pokazuje ekran konta albo komunikat o nieudanym logowaniu.
Sprawdzenie w przeglądarce, czy pole nie jest puste, pomaga użytkownikowi, ale nie zabezpiecza systemu. Taką kontrolę można ominąć, dlatego backend musi samodzielnie weryfikować dane i uprawnienia. W kodzie frontendu nie należy umieszczać tajnych kluczy ani haseł: kod i dane dostarczone do przeglądarki można obejrzeć.
Nie każda witryna potrzebuje rozbudowanego backendu. Prosta strona z ofertą i danymi kontaktowymi może składać się ze statycznych plików, czyli gotowych dokumentów wysyłanych użytkownikowi. Konto klienta, historia zakupów czy rezerwacje wymagają już dodatkowego zaplecza lub połączenia z zewnętrzną usługą.
HTML, CSS i JavaScript — trzy różne zadania
Podstawowe technologie frontendu uzupełniają się, ale każda odpowiada za coś innego:
| Technologia | Główna rola | Przykład |
|---|---|---|
| HTML | Określa strukturę i znaczenie treści | Nagłówek, link, pole formularza |
| CSS | Opisuje wygląd i układ elementów | Kolory, odstępy, układ na telefonie |
| JavaScript | Dodaje logikę i dynamiczne zachowanie | Filtrowanie produktów bez przeładowania strony |
HTML jest językiem znaczników, a CSS językiem arkuszy stylów. JavaScript jest językiem programowania. Prosty dokument z tekstem, zdjęciami i odnośnikami może działać bez JavaScriptu; nie każda interakcja wymaga dodatkowego skryptu.
Przy większych projektach stosuje się także biblioteki i frameworki, czyli narzędzia dostarczające gotowe mechanizmy oraz sposób organizacji kodu. Przykładami są React, Vue i Angular. Pomagają budować interfejs z komponentów — powtarzalnych części, takich jak karta produktu lub okno dialogowe — lecz nie zastępują znajomości podstaw.
Współczesne aplikacje mogą również przygotowywać HTML na serwerze, zanim trafi on do przeglądarki. Dlatego granica między frontendem a backendem nie zawsze pokrywa się dokładnie z miejscem wykonywania kodu. Najbardziej użyteczny pozostaje podział na interfejs użytkownika i zaplecze systemu.
Czym zajmuje się frontend developer?
Frontend developer wdraża interfejs w kodzie i dba o jego działanie. Może pracować na podstawie projektu graficznego, ale jego zadaniem nie jest samo odtworzenie obrazka. Musi uwzględnić również sytuacje, których statyczny projekt nie pokazuje: brak danych, długi tytuł, błąd połączenia czy wielokrotne kliknięcie przycisku.
Do tej pracy należą między innymi:
- Responsywność: dostosowanie układu do różnych rozmiarów ekranów.
- Dostępność: umożliwienie korzystania ze strony także za pomocą klawiatury i czytnika ekranu.
- Wydajność: ograniczanie zbędnego kodu i zbyt ciężkich zasobów.
- Integracja z backendem: pobieranie, wysyłanie i prezentowanie danych.
- Testowanie: sprawdzanie funkcji w różnych przeglądarkach i stanach interfejsu.
Projektant interfejsu określa zwykle jego wygląd i sposób obsługi, a frontend developer przekłada te założenia na działającą stronę. W małych zespołach jedna osoba może łączyć te role, ale projektowanie i programowanie wymagają różnych umiejętności.
Jak zacząć poznawać frontend?
Najlepszym pierwszym ćwiczeniem jest niewielka strona, na przykład wizytówka usługi. Najpierw zbuduj w HTML nagłówki, opis, listę i dane kontaktowe. Następnie dodaj CSS, aby strona była czytelna zarówno na szerokim, jak i wąskim ekranie.
Dopiero później dołącz JavaScript, na przykład do prostego kalkulatora wyceny. Sprawdź, co dzieje się po wpisaniu nieprawidłowej wartości, i czy wszystkie elementy da się obsłużyć bez myszy. Takie ćwiczenie pokazuje różnicę między stroną, która jedynie wygląda poprawnie, a interfejsem, z którego można rzeczywiście korzystać.
Zobacz też: Co to jest GitLab?
Przeczytaj także
