Frontend i backend — gdzie kod się wykonuje i jak się komunikują

Gdy korzystasz z aplikacji internetowej, w rzeczywistości grają dwa programy. Frontend to ten, który działa w twojej przeglądarce i to, co widzisz i klikasz. Backend działa na serwerze w innym miejscu i obsługuje dane, reguły i dostęp. Obaj rozmawiają ze sobą przez sieć.

Frontend składa się z HTML, CSS i JavaScript, które przeglądarka pobiera i wykonuje. Tutaj znajduje się interfejs użytkownika i bezpośrednia interakcja. Ponieważ kod działa u użytkownika, nie można polegać na nim pod względem bezpieczeństwa — wszystko, co pochodzi od klienta, musi być sprawdzane ponownie na serwerze.

Backend obsługuje logikę biznesową, kontrolę dostępu i dane. To tutaj typowo pracujesz z bazą danych, sprawdzasz poprawność danych wejściowych, sprawdzasz czy użytkownik ma prawo do działania, i upewnij się, że dane są bezpiecznie przechowywane i pobierane. Backend działa na serwerze, do którego użytkownik nie ma bezpośredniego dostępu.

Frontend i backend komunikują poprzez interfejs API (Application Programming Interface). Powszechnym stylem jest web-API, gdzie frontend wysyła żądanie, a backend odpowiada danymi — często w formacie JSON. W ten sposób zarówno witryna internetowa, aplikacja mobilna i inne systemy mogą używać tego samego backendu, ponieważ mówią tym samym uzgodnionym językiem.

• 01Frontend: interfejs użytkownika, działa w przeglądarce, nie można mu zaufać bezpieczeństwo
• 02Backend: logika i dane, uruchamiane na serwerze, waliduje wszystko
• 03API: uzgodniona umowa dotycząca sposobu wymiany danych
• 04Baza danych: gdzie dane są przechowywane trwale, dostępne z backendu

Wyobraź sobie użytkownika, który zapisuje profil: frontend zbiera pola i wysyła je do interfejsu API backendu. Backend sprawdza, czy użytkownik jest zalogowany i ma uprawnienia, waliduje pola, zapisuje je w bazie danych i odpowiada wynikiem. Frontend pokazuje potwierdzenie. Każda strona robi dokładnie swoją część pracy.