Poznaj najprostsze wytłumaczenie, czym jest backend, a czym jest frontend. Jeśli we współpracy z firmą IT będziesz mieć do czynienia z takimi określeniami, będziesz dokładnie wiedzieć o co chodzi. Być może znasz już te pojęcia, ale chętnie poznasz szczegóły praktyczne, bo nie interesuje Cię sucha teoretyczna definicja? Przejdźmy zatem do konkretów, czyli 7 różnic pomiędzy back-endem, a front-endem.
Backend to to, czego nie widzisz na stronie, gdy ją oglądasz. Element backendu może stanowić np. kod strony lub aplikacji napisany przez programistów albo połączone z nim bazy danych, czyli to wszystko co dzieje się i co działa „w tle”.
W odróżnieniu od backendu frontend jest widoczny dla użytkownika. Zdjęcia, grafika, przyciski, kolory, tekst, hiperłącza, czy animacje to przykłady elementów, które wyświetlają strony internetowe, aplikacje mobilne, czy inne systemy IT. Za te elementy i ich wygląd odpowiada właśnie warstwa frontendowa.
Back-end to to, co dzieje się na serwerze. Zadania warstwy backendowej są realizowane na serwerze, często umieszczonym np. w chmurze setki lub nawet tysiące kilometrów od Ciebie. Treść, którą teraz czytasz jest przechowywana właśnie na takim serwerze w bazie danych.
Front-end to to, co dzieje się w przeglądarce internetowej. Warstwa front-endowa jest wyświetlana w przeglądarce zainstalowanej na urządzeniu, z którego korzystasz. Może to być smartfon, tablet, komputer stacjonarny lub inne urządzenie. Efekt prac programistów frontend widzisz po prostu na ekranie swojego urządzenia. Tekst, który teraz czytasz na ekranie, jego kolor, rozmiar, czy krój czcionki to wszystko są elementy frontendu.
Backend wykonuje określone, zaprogramowane przez programistów zadania, na podstawie danych otrzymanych z frontendu od użytkowników. Odpowiada za ich zapis i obróbkę. Przykładowo backend przechowuje w bazie danych treść tego zdania, które właśnie czytasz i wyświetla je Tobie, na podstawie otrzymanego żądania z Twojej przeglądarki. Innym przykładem zadania może być wykonanie obliczenia wartości produktów dodanych do koszyka w sklepie internetowym z uwzględnieniem należnego użytkownikowi rabatu.
Frontend odpowiada za pobieranie informacji od użytkowników i przekazywanie ich do backendu. Przykładowo, gdy dodajesz produkty do koszyka w sklepie internetowym i składasz zamówienie to właśnie poprzez np. formularz dane zostają przekazane z frontendu na backend i zapisane w bazie danych. Innym przykładem zadania wykonywanego przez frontend jest prezentacja danych, np. w formie wykresów na podstawie danych otrzymanych z backendu.
Backend zajmuje się zapisem, przechowywaniem oraz dostarczaniem danych z bazy danych na stronę lub do aplikacji frontowej. Treść tego zdania została dostarczona do bloga przez backend z bazy danych umieszczonej na naszym serwerze w chmurze.
Frontend zajmuje się wyświetlaniem użytkownikom wyników otrzymanych z backendu. Gdy na tym blogu wybierasz artykuł do przeczytania klikając na jego tytuł, to właśnie frontend generuje zapytanie do backendu o wyświetlanie treści wybranego przez Ciebie artykułu.
Back-end jest odpowiedzialny za logikę kryjącą się za daną aplikacją. Upraszczając odpowiada on za to, co wydarzy się na serwerze np. po kliknięciu na przycisk „Zapisz”, „Wyślij”, „Zamów”, „Usuń”, „Anuluj” itp. Może to być na przykład zapisanie się do newslettera, wysłanie wiadomości poprzez formularz kontaktowy, złożenie zamówienia, usunięcie produktów z koszyka, czy anulowanie określonego działania w aplikacji.
Front-end odpowiada za wygląd danej aplikacji, stron internetowych, aplikacji mobilnych, czy innych systemów IT. Dodatkowo frontend jest odpowiedzialny za interakcję z użytkownikiem, np. zmianę koloru przycisku po najechaniu na niego kursorem itp.
Programiści backend najczęściej zajmują się takimi zadaniami, jak np. pisanie kodu odpowiedzialnego za logikę działania aplikacji, tworzenie API, tworzenie baz danych, komunikację z bazami danych, wykorzystywanie zewnętrznych baz danych (integracja z bazami danych), bezpieczeństwo danych, wydajność itp.
Programiści frontend koncentrują się najczęściej na technologiach odpowiedzialnych za warstwę wizualną aplikacji takich, jak HTML, CSS i JavaScript wraz z różnymi jego modyfikacjami. Upraszczając HTML odpowiada za strukturę i zawartość elementów na stronie, czy w aplikacji, CSS odpowiada za styl i wygląd, a JavaScript za interakcje z użytkownikami.
Po czym poznać dobrej jakości kod występujący po stronie backendu? Kryteriami oceny backendu są m.in.:
- wydajność systemu
- szybkość działania aplikacji
- skalowalność systemów IT
Dobrze przygotowaną warstwę frontendową cechuje przede wszystkim:
- wysoka ergonomia
- intuicyjna obsługa
- nowoczesna i lekka szata graficzna
- wysoki poziomem estetyki
- wysoka użyteczność
- dostępność i…
- to, że jest po prostu ładna
Spójrzmy na podsumowanie 7 różnic pomiędzy backendem, a frontendem przedstawionych w poniższej tabeli.