Frontend i backend - co jest przodem a co tyłem?
Bardzo często możemy usłyszeć, backend to, frontend tamto. Niestety wszyscy zakładają, że każdy wie o co w tym podziale chodzi i jesteśmy zmuszeni pojednawczo kiwać głową. A o co w tym chodzi?
Kogo widzimy w restauracji?
Gdy wchodzimy do restauracji, możemy korzystać z określonych rzeczy. Możemy usiąść, obejrzeć menu, zamówić coś u kelnera lub wziąć wodę z ogólnodostępnej szafki. Są to rzeczy, z którymi możemy wchodzić w interakcję jako klient. Nie są to schowane rzeczy, można nawet powiedzieć, że ustawione są tak, byśmy mogli łatwo je zobaczyć i skorzystać. Stoją frontem do nas.
Ale wiemy, że to nie całość restauracji. Spodziewamy się, że gdzieś, w miejscu do którego nie mamy dostępu, jest kuchnia, spiżarnia, biuro i wiele innych rzeczy. Nie mamy dostępu do kuchni, nawet go nie potrzebujemy. Jedyne co potrzebujemy to złożyć zamówienie, a na zapleczu zadzieje się magia i otrzymamy to o co prosiliśmy. Gdzie wydarzy się magia? Na zapleczu, czyli z tyłu.
Rozrysujmy zależności i pobawmy się chwilę tym przykładem.
Na froncie restauracji możemy zobaczyć ladę, stoliki oraz złożyć zamówienie u kelnera. Wtedy on poprosi kuchnię o przygotowanie posiłku. Jak widzimy, nie tylko nasza restauracja składa zamówienia w kuchni. Są inni, którzy korzystają z zaplecza restauracji, jak na przykład katering i inne zamówienia.
Restauracja jest podzielona na kilka funkcjonalnych części. Jest kuchnia, która przyjmuje i wydaje zamówienia. Spiżarnia, w której dostępne są produkty spożywcze, z której kuchnia pobiera składniki. Mamy biuro, które sprawdza, czy w spiżarni jest wystarczająco dużo rzeczy. Jeśli czegoś brakuje, zamawiają coś od innego dostawcy.
Frontend
Frontend będzie odpowiednikiem tego, czym jest jadalnia w restauracji. To tutaj wchodzimy w interakcje, nie z rzeczywistymi elementami, ale z ich wirtualnymi odpowiednikami.
Frontend jest tym co widzimy w przegladarce. Widzimy listę artykułów, formularz kontaktowy oraz listę produktów. Wszystko co robimy na frontendzie jest ograniczone do naszej przeglądarki. Zatem frontend odpowiada za to jakie treści są wyświetlone na stronie, w jaki sposób są zaaranżowane oraz jak wyglądają dla użytkownika.
Dla małego pedantyzmu i rozjaśnienia niektórzy rozróżniają:
ui - user interface. To co jest widoczne dla użytkownika i w co klikają, czyli nasz frontend
ux - user experience. To w jaki sposób użytkownik korzysta i czy jest to dla nich wygodne
Jeśli chodzi o technikalia to frontend będzie składał się z plików html(szablonu), css(styli, ustawienia i ozdób), javascriptu(magii) oraz multimediów(czcionek, zdjęć i filmików). Wyświetlaniu stron przez przeglądarkę poświęce osobny artykuł.
Natomiast wiele rzeczy nie możemy robić wyłącznie z przeglądarki np. nie możemy zapisać danych tak, by były dostępne niezależnie od przeglądarki. Nie możemy wysłać maila, ani udostępnić zdjęcia. Nie możemy zrobić czegokolwiek, co wpłynie na cokolwiek innego od naszej przeglądarki. Jeśli chcielibyśmy wysłać do kogoś wiadomość, opublikować post na blogu lub złożyć zamówienie w sklepie, musimy wyjść poza ramy naszej przeglądarki. Nasz frontend umożliwi nam złożenie prośby u odpowiedniej osoby. Możemy poprosić kelnera, by poszedł na zaplecze, gdzie zadzieje się co powinno.
Backend
Posługując sie dalej metaforą restauracji możemy zauważyć, że na backendzie może dziać się więcej niż na frontendzie. W restauracji jako klienci prosimy tylko o przygotowanie potrawy, natomiast na zapleczu wykonywany jest ogrom pracy. Trzeba wyjać produkty, pokroić, usmażyć, ułożyć, potem jeszcze umyć i prawdopodobnie sporo rzeczy, o których nie myślimy. O to też chodzi w restauracji - chcemy przedstawić nasze potrzeby, złożyć zamówienie i dostać oczekiwany rezultat.
Podobnie w przypadku naszych aplikacji internetowych, robimy prostą rzecz np. wypełniamy formularz i przesyłamy dane, a całą złożoność związaną z wysyłaniem maila, dodawaniem posta na blogu chowamy za zapleczem, na backendzie. Komunikujemy się jedynie z tym, co backend nam udostępnia - interfejsem api. Post o interfejs api w trakcie tworzenia.
Backend, mocno upraszaczając, może składać się na przykład z:
api - lady przez którą możemy składać zlecenia
bazy danych - archiwum z płatnościami i zamówieniami
file storage - spiżarką z marchewką, herbatami i cukrem
osobnego serwera do wysyłki maili - komputer do wysyłania maili w biurze
Niestety potrzeb, możliwości i niuansów związanych z backendem jest ogrom. Mamy kwestie związane z nawiązywaniem połączeń, autoryzacją użytkowników, bezpieczeństwem, wydajnością i całą masą innych problemów. Niektóre kwestie na pewno będę rozwijać w kolejnych artykułach. Jest jednak jedna kwestia, którą chciałbym poruszyć jeszcze teraz.
Serwer
Często słyszymy również o serwerze. Serwer jest przeciążony, serwer nie jest dostępny, serwer padł, jest coś na serwerze itd. Serwer po angielsku to kelner. I w naszym kontekście jest to bardzo trafne określenie.
Pomijając dodatkowy ogrom pracy wykonywany przez kelnerów w gastronomii, z perspektywy klienta restauracji kelnerzy robią dwie rzeczy - przyjmują zlecenia oraz przynoszą to co zostało zamówione.
W przypadku komputerów jest właśnie tak jak opisane powyżej. Serwer to komputer, który jest dostępny przez internet i w odpowiedzi na zapytanie… odpowie. Możemy poprosić(request lub zarikłestować jak niektórzy mówią) o różne zasoby np. pliki html, css, js, zdjęcia, filmiki i inne pliki. Możemy również prosić o dane jak np. listę artykułów, profil naszego użytkownika czy temperaturę dla określonego miasta.
Kelner nie zawsze odpowiada tak samo. Może nie zrozumieć naszej prośby, odmówić nam wstępu, powiedzieć że tego dania już nie ma lub że kuchnia jest przepracowana i nie nadążają z zamówieniami. Widziałaś kiedyś odpowiedź “404 - nie znaleziono strony”? To jedna z możliwych odpowiedzi.
Może być nieco mylące, że strona składająca się jedynie z frontendu i tak potrzebuje serwera. Bo nawet jeśli mamy stronę, składającą się jędynie z tekstu musimy być w stanie ściągnąć ją przez internet. A do tego potrzebny jest serwer. Dlatego często w podziale na frontend i backend, kwestię serwera albo się pomija(bo jest oczywista), przypisuje się ją do backendu(bo poza przeglądarką) lub przypisuje do osobnej kategorii(infrastruktury, devops, admin).
Sprawy nie ułatwia fakt, że obecnie możliwe jest tworzenie jedynie frontendu wypożyczając backend(podejście serverless lub jamstack). Koniec końców i tak gdzieś stoi komputer, który przez internet musimy poprosić o pliki.
Czy zawsze jest frontend i backend?
Niektórze rzeczy są na tyle nieskomplikowane, że nie ma potrzeby by je rozdzielać. Broszurka reklamowa, bądź słup ogłoszeniowy nie potrzebują wielkiego zaplecza. Można nawet powiedzieć, że składają sie tylko z części stojącej frontem do nas.
Są również rzeczy, które są definicją skomplikowania, ale jako użytkownicy nie wchodzimy bezpośrednio w interkacje z nimi. Transformator elektryczny lub przepompownia ścieków nie są bezpośrednio dla nas dostępne(i nie powinne). Natomiast możemy z nich korzystać w sposób pośredni np. przez włącznik światła lub spuszczając wodę.
Podobnie z aplikacjami - są takie, które nie potrzebują frontendu lub backendu. Nawet taką samo funkcjonalność możemy uzyskać na różne sposoby! Spójrzmy na przykładowe sposoby wyświetlenia bloga.
Server side rendering
Wchodzę na www.nazwa-bloga.com
Przeglądarka wykonuje zapytanie do backendu
Wordpress odpytuje bazę danych, skłąda stronę
Wordpress odpowiada do przeglądarki z gotową stroną, a zatem backend zwraca frontend.
Przeglądarka wyświetla stronę
SPA - single page application
Wchodzę na www.nazwa-bloga.com
Przeglądarka ściąga mi javascript potrzebny do wyświetlenia strony
Przeglądarka przy pomocy javascriptu pyta backend o treść strony
Przeglądarka otrzymuje treść i ją wyświetla
Statycznie wygenerowana strona
Wchodzę na www.nazwa-bloga.com i ściągam od razu gotową stronę
Jeśli ktoś chce wprowadzić zmianę na stronie to przy pomocy backendu(np. panelu admina) przygotowuje nową, gotową wersję strony, która składa sie jedynie z frontendu.
Wejdziemy bardziej w szczegóły przy innej okazji, chcę tylko pokazać, że niestety nie jest to zawsze prosta sprawa i dosłownie wszystko jest jakąś decyzją z wadami i zaletami.
Podsumowanie
Frontend jest tym, z czym jako użytkownik wchodzimy w interakcję. Tekst, przyciski i inne przyjemności, które wyświetlają nam się w przeglądarce.
Backend to wszystko co umożliwia frontendowi funkcjonowanie - dostarcza dane, umożliwia edycję i utrwalanie treści, komunikuje się z innymi serwisami.
Serwer nasłuchuje i odpowiada na nasze zapytania. Jest to inny komputer dostępny przez internet.
I jak doskonale wiesz, jest mnóstwo niuansów między tym wszystkim :)