Podręcznik

Frontend to ta część aplikacji, którą użytkownik widzi i z którą bezpośrednio wchodzi w interakcję, tj. układ treści, kolorystyka, typografia, przyciski, formularze, itp. Innymi słowy, frontend obejmuje warstwę prezentacyjną, czyli wszystko, co jest odpowiedzialne za wygląd i interakcję aplikacji z użytkownikiem.

Do podstawowych technologii wykorzystywanych do implementacji frontendu aplikacji należą:

• HTML (ang. HyperText Markup Language): służy do opisu struktury strony internetowej; opis składa się z elementów takich jak np. nagłówki, akapity, ilustracje.
• CSS (ang. Cascading Style Sheets): odpowiada za wygląd elementów opisanych w dokumencie HTML, czyli cechy takie jak rozmieszczenie, rozmiar, kolor, czcionka.
• JavaScript: pozwala zaimplementować interaktywność strony internetowej w postaci np. dynamicznych zmian treści, animacji, obsługi zdarzeń (np. reakcji na kliknięcie myszką).

Frontend odpowiada za bezpośrednie doświadczenie użytkownika, czyli za to, jak aplikacja wygląda i jak się zachowuje na urządzeniu użytkownika (np. komputerze, smartfonie). Projektant frontendu powinien zwrócić szczególną uwagę na te elementy, z którymi użytkownik wchodzi w interakcję, np. menu rozwijane, przyciski, formularze, treści aktualizowane w dynamiczny sposób, tj. bez przeładowywania całego okna dokumentu HTML. Ich poprawna obsługa, cechująca się intuicyjnością, czytelnością, stabilnością i krótkim czasem reakcji składa się na pojęcie tzw. User Experience (UX), czyli zespołu cech aplikacji odbieranych całościowo przez użytkownika końcowego w sposób subiektywny.

Choć technicznie rzecz biorąc jest możliwe wykorzystanie języka JavaScript do implementacji interaktywności bez wykorzystania żadnego tzw. frameworku czy biblioteki, w praktyce byłoby to dość pracochłonne i wtórne. Od kilkunastu lat w powszechnym użyciu są narzędzia ułatwiające budowanie interfejsów użytkownika, np. React, Angular, Vue.js. Wrócimy do nich w dalszej części podręcznika.