Jaka jest różnica między frontendem a backendem? Szczegółowe wyjaśnienie
Zarówno web development, jak i cały świat IT opierają wiele działań o podział na frontend i backend. I chociaż oba pojęcia możemy usłyszeć bardzo często, nie każdy (szczególnie osoby spoza branży) zdaje sobie sprawę, czym się różnią i charakteryzują. Aby ułatwić Ci zrozumienie tych zagadnień, w tym artykule omówimy frontend i backend, pokazując najważniejsze różnice, a także popularne języki i frameworki, z których można korzystać w pracy nad stroną internetową.
Co to jest frontend?
Wyobraźmy sobie zegar na ścianie. Tarcza z godzinami i minutami wskazuje nam aktualny czas. Jako użytkownicy widzimy przed sobą tylko prezentację danych (w tym przypadku godzinę), czyli frontend, ale nie mamy wglądu w to, co ukryte pod obudową (odkryjemy to wspólnie w dalszej części artykułu).
Przekładając ten przykład na serwisy internetowe, możemy określić frontend jako podaną użytkownikowi wizualną część strony, czyli jej projekt, ogólny wygląd lub cały interfejs. Co więcej frontend odpowiada za to, w jaki sposób użytkownik wchodzi w interakcje z witryną lub aplikacją internetową oraz jak ona reaguje na jego działania.
Języki frontendowe
Języki frontendowe umożliwiają tworzenie interfejsu użytkownika, a także interaktywną obsługę funkcjonalności strony, jak wyszukiwanie czy zmiany treści w czasie rzeczywistym. Bez nich użytkownik nie zobaczyłby reprezentacji jakichkolwiek treści w witrynie. Przyjrzyjmy się przykładom tych języków.
HTML
Zdecydowanie najpopularniejszym językiem frontendowym jest HTML, który odpowiada za strukturę strony internetowej. Pozwala umieszczać na niej odpowiednie znaczniki, takie jak nagłówki (np. H1, H2, H3, które są kluczowe pod względem SEO), obrazki, linki, tabele czy listy. Od HTML wszystko się zaczyna – ten prosty język organizuje stronę i nadaje jej właściwy układ.
CSS
Teraz możemy przejść do określenia podstawowego wyglądu naszej strony internetowej, a to oznacza, że do gry wchodzi CSS. Dzięki niemu możemy nadawać odpowiednie style dla witryny. Ściśle łączy się to ze strukturą stworzoną wcześniej w HTML. To tutaj definiujemy takie parametry jak: wielkość fontów, ostateczny układ elementów czy ich kolorystykę.
JavaScript
Do powyższego zestawu technologii możemy również dołączyć JavaScript (wbrew obiegowej opinii z Javą ma on wspólną tylko i wyłącznie część nazwy). Z użyciem tego języka frontendowego piszemy skrypty wykonywane po stronie użytkownika. Możemy dodawać interaktywne elementy oraz zarządzać ich dynamicznym zachowaniem w serwisie lub w aplikacji internetowej.
To właśnie dzięki tej technologii po kliknięciu w ikonę z trzema paskami, z boku strony wysunie nam się mobilne menu. Responsywne slidery czy rozwijalne listy to inne podstawowe elementy, które możemy obserwować na stronie właśnie dzięki JavaScriptowi.
Co ciekawe – praktycznie ten sam język programowania pojawi się również w dalszej części artykułu przy omawianiu języków backendowych.
Frameworki frontendowe
Omawiając języki programowania, nie sposób nie wspomnieć o frameworkach, czyli zestawie narzędzi i bibliotek, które pomagają programistom w tworzeniu oprogramowania. Większość aplikacji zawiera podobne funkcjonalności, takie jak połączenie z bazą danych czy renderowanie strony. Dostarczając te elementy, frameworki pozwalają zaoszczędzić dużo czasu ze względu na brak konieczności pisania tych samych podstawowych elementów. Dodatkowo narzucają one często dobre programistyczne praktyki, co zwiększa jakość kodu.
Najpopularniejsze frameworki frontendowe obejmują takie pozycje jak AngularJS, React i Vue.js. Zapewniają one zestaw gotowych komponentów i narzędzi do JavaScript, które wspierają programistów w tworzeniu złożonych i interaktywnych interfejsów użytkownika. Przyjrzyjmy się każdemu z tych frameworków.
Angular
Angular to kompleksowe rozwiązanie opracowane i utrzymywane przez Google. Wykorzystuje architekturę opartą na komponentach i dwukierunkowe wiązanie danych. Przez swoją dużą złożoność i ogrom możliwości dobrze nadaje się do budowania skomplikowanych aplikacji na szeroką skalę, a jednocześnie jest wykorzystywany również w przypadku stron typu SPA (Single Page Application).
React
Na stronach Netflixa, PayPala czy Walmartu widzimy, jak dobrze radzi sobie popularny framework React. To wydajne i elastyczne narzędzie wykorzystuje wirtualny model DOM (Document Object Model). Jest to koncepcja programistyczna oparta na tym, że „wirtualna” reprezentacja interfejsu użytkownika jest przechowywana w pamięci i synchronizowana z „prawdziwym” modelem DOM (bardziej dociekliwych czytelników odsyłamy do dokumentacji Reacta, szczegółowo opisującej to zagadnienie). Na tym nie kończą się jednak zalety Reacta. Wśród najważniejszych warto wyróżnić także: jednokierunkowy przepływ danych, dużą stabilność i – w połączeniu z Next.js – pozytywny wpływ na SEO.
Vue.js
Kolejnym frameworkiem wartym uwagi jest Vue.js. Rozwiązanie stworzone w 2014 roku przez byłego pracownika Google, Evana You, również bazuje na komponentach, ale różni się od Reacta i Angulara mniejszym rozmiarem bibliotek, większą intuicyjnością oraz konfigurowalnością. Będąc niezwykle elastycznym narzędziem jest stosowany zarówno w mniejszych, jak i bardziej zaawansowanych serwisach. Vue jest również najchętniej wykorzystywanym frameworkiem przez duże chińskie firmy, takie jak Alibaba czy Baidu.
Biblioteki frontendowe
Obok języków i frameworków frontendowych, na uwagę zasługują także biblioteki frontendowe, czyli wstępnie napisany kod, który można łatwo dodać do strony lub aplikacji internetowej. Ich przykłady to: jQuery, Bootstrap i Material-UI. Biblioteki te mogą być używane do szybkiego dodawania funkcjonalności i poprawienia ogólnego wyglądu witryny. Główną zaletą ich stosowania jest oszczędność czasu, zwłaszcza podczas wykonywania powtarzających się elementów.
Co to jest backend?
Wiemy już, jak działa frontend, więc pora odpowiedzieć na pytanie, co to jest backend. W tym celu wróćmy do przykładu zegara – tym razem jednak zdejmujemy go ze ściany i odwracamy. Teraz możemy obserwować to, co przez większość czasu jest niewidoczne dla oczu, czyli mechanizm, który odpowiada za podanie godziny. Na podobnej zasadzie funkcjonuje właśnie backend.
Ta część strony internetowej obejmuje serwer, bazę danych i interfejsy API. Backend jest więc odpowiedzialny za obsługę żądań użytkowników, zarządzanie danymi i komunikację z innymi systemami. To kod, który jest w stanie wyciągnąć informacje z bazy danych, procesować je i przekazać do wyświetlenia, czyli do frontendu.
Języki backendowe
Backend może być obsługiwany przez takie języki jak PHP, Ruby czy wcześniej wspomniany JavaScript. Każdego z nich używamy do pisania logiki po stronie serwera oraz do obsługi danych. Poznajmy bliżej ich charakterystykę.
PHP
PHP to język skryptowy działający po stronie serwera, wykorzystywany przez wiele popularnych systemów zarządzania treścią (CMS), takich jak Drupal czy WordPress. PHP istnieje od 1995 roku i do dziś gromadzi wokół siebie dużą społeczność programistów, co oznacza, że dostępnych jest wiele bibliotek i frameworków. Podczas regularnych aktualizacji zaangażowani developerzy wprowadzają do niego cały szereg nowoczesnych udogodnień, dzięki czemu przy pracy z PHP w ogóle nie odczujemy, że istnieje już prawie 30 lat.
Ruby
Ruby ma prostą, elegancką składnię i jest znany ze swojej filozofii „konwencja ponad konfiguracją”, co ułatwia programistom rozpoczęcie pracy. Opiera się to na pewnych założeniach dotyczących tego, co i jak chcemy osiągnąć, dlatego nie wymaga od nas ustawiania każdej drobnej opcji w plikach konfiguracyjnych. Ten język idealnie nadaje się do pisania backendu dla zaawansowanych projektów. Jeśli planujemy np. aplikację mobilną czy stronę opartą na systemie CMS typu headless, to Ruby będzie świetnym wyborem. Jest również używany w wielu innych obszarach, takich jak tworzenie gier, analiza danych i rozwijanie sztucznej inteligencji.
JavaScript
JavaScript jest na tyle wszechstronnym język programowania, że może być stosowany zarówno do tworzenia frontendu, jak i backendu. W przypadku programowania backendu JavaScript może być używany z Node.js, środowiskiem wykonawczym JavaScript, które umożliwia programistom uruchamianie go po stronie serwera, co daje nam możliwość wykorzystywania go do stworzenia własnego serwera HTTP lub innych usług sieciowych. Dzięki temu możliwe jest budowanie pełnych aplikacji w jednym języku i udostępnianie kodu między frontendem a backendem.
Frameworki backendowe
Frameworki backendowe to zestaw narzędzi do konkretnego języka programowania. Zapewniają programistom gotowe rozwiązania, takie jak narzędzia do obsługi baz danych czy do zarządzania sesjami użytkowników, co pozwala skupić się na budowaniu logiki biznesowej aplikacji zamiast na tworzeniu podstawowych funkcjonalności od zera.
Symfony
Symfony musimy przywołać szczególnie w kontekście stron internetowych pisanych w oparciu o CMS Drupal, a więc przy wykorzystaniu PHP.
Ten framework powstał, aby pomóc programistom w tworzeniu solidnych, skalowalnych i łatwych w utrzymaniu aplikacji internetowych. Został zaprojektowany w zgodzie ze wzorcem architektonicznym Model-View-Controller (Model-Widok-Kontroler), opartym na podziale aplikacji na trzy główne części, i zapewnia zestaw narzędzi oraz komponentów do typowych zadań związanych z budowaniem stron, takich jak routing, obsługa formularzy i dostęp do bazy danych. Jedną z kluczowych cech Symfony jest wykorzystanie wstrzykiwania zależności i kontenera usług, co pozwala uzyskać bardziej elastyczny i oddzielony kod.
Z Symfony korzysta nie tylko Drupal, ale również takie systemy jak Pimcore do zarządzania informacją produktową, danymi klientów i zasobami cyfrowymi, a także platforma e-commerce Magento.
Laravel
Pozostając przy PHP, nasz wzrok możemy skierować także w kierunku frameworka Laravel, który posiada masę wbudowanych funkcji ułatwiających wdrażanie typowych zadań związanych z tworzeniem stron internetowych, takich jak routing, uwierzytelnianie i buforowanie. Laravel zapewnia również nieskomplikowaną i elegancką składnię, a dodatkowo posiada prosty mechanizm interakcji z bazami danych.
Korzystając z tego frameworka, możemy zaoszczędzić dużo czasu, wykorzystując gotowe elementy, takie jak autentykacja przy stronach rejestracji i logowania, szablony Blade czy wbudowany harmonogram zadań.
Next.js
Wykonując backend w JavaScripcie, możemy użyć np. Next.js. To framework zbudowany w TypeScript i mocno inspirowany wspomnianym Angularem. Zapewnia modułową strukturę do budowania skalowalnych i łatwych w utrzymaniu aplikacji na serwerze. Next.js powstał na bazie Express.js i rozszerza go o dodatkowe funkcje. Dzięki niemu możemy wyrenderować stronę internetową już po stronie serwera, co nie tylko znacząco przyspiesza ładowanie aplikacji i serwisów, ale także pozytywnie wpływa na SEO.
Frontend a backend – różnica
Jaka jest główna różnica między frontendem a backendem? Frontend odpowiada za interfejs użytkownika i sposób jego interakcji ze stroną internetową, podczas gdy backend stoi za logiką i danymi strony internetowej lub aplikacji.
Taką zależność najlepiej oddaje przykład formularza kontaktowego. Elementy, które użytkownik widzi i może uzupełnić, są efektem działania frontendu, a proces wysyłania danych z formularza do bazy – to backend.
Kolejnym bardziej kompleksowym przykładem jest serwis sklepu internetowego. Każdy element, który klient widzi na stronie, taki jak siatka produktów, zdjęcia i treści, to frontend. Natomiast procesy takie jak obsługa koszyka zakupów, realizacja płatności, obsługa zamówień, interakcja z bazą danych sklepu czy generowanie raportów, to zadania wykonywane przez backend.
Frontend i backend – zależne lub niezależne od siebie
W naszych rozważaniach może pojawić się pytanie, czy oba działy mogą istnieć niezależnie od siebie. Odpowiedź nie jest wcale jednoznaczna i należy ją rozpatrywać w kilku kontekstach.
Obie części systemu są od siebie zależne, ponieważ współpracują ze sobą, tworząc kompletną aplikację internetową. Frontend wysyła i odbiera dane z backendu, a backend przetwarza je i przechowuje. Bez backendu frontend nie mógłby funkcjonować, a bez frontendu backend nie byłby w stanie zapewnić interfejsu użytkownika.
Z innym przypadkiem mamy do czynienia, gdy projektujemy jedną architekturę do dostarczania danych, np. do aplikacji mobilnej i kilku stron internetowych. Wtedy można określić to jako samodzielny system i potrzebny jest do tego jedynie backend.
Czasem możemy też spotkać się z odwrotną sytuacją i wykonywać stronę internetową, która nie wymaga większej logiki biznesowej. Wystarczą tylko i wyłącznie elementy frontendu. Żadne dane nie będą procesowane, nigdzie nie będą się zapisywać, a witryna będzie prezentować jedynie stałe treści dla użytkownika. Za idealny przykład może posłużyć tutaj prosta strona reklamowa produktu, typu single page.
Nasz zespół programistów każdego dnia pracuje nad serwisami internetowymi z wykorzystaniem frontendu i backendu. Realizujemy zarówno proste strony, jak i złożone witryny z wieloma funkcjonalnościami, dlatego bez problemu pomożemy Ci z rozwinięciem jednej i drugiej części strony, a także obu na raz.
