Podręcznik
2. Podstawowy podział na warstwy: frontend i backend
2.3. Nieostra granica backend-frontend
Historycznie podział architektoniczny aplikacji internetowych na frontend a backend był bardzo czytelny i jednoznaczny, gdyż za rozdzielnym zakresem odpowiedzialności szły także zupełnie odmienne technologie i języki wykorzystywane w obydwu tych obszarach. W ostatnich latach obserwuje się zacieranie tej do niedawna bardzo wyraźnej granicy. Wynika to z kilku przyczyn.
1. Rozwój frameworków JavaScript po stronie klienta i serwera
Frameworki JavaScript, takie jak Node.js oraz frameworki frontendowe typu React, Vue.js czy Angular, odegrały kluczową rolę w zacieraniu się granicy między frontendem a backendem. Node.js umożliwił programowanie po stronie serwera w JavaScript, czyli języku, który wcześniej był zarezerwowany niemal wyłącznie dla warstwy frontendowej. W ten sposób pojawiła się możliwość używania jednego języka w całym stosie technologicznym, co sprawiło, że granice między backendem a frontendem stały się bardziej płynne.
2. Wzrost popularności aplikacji typu SPA (Single-Page Application)
Aplikacje typu SPA (Single-Page Application), takie jak te budowane w React, Vue lub Angular, zacierają granicę między frontendem a backendem, ponieważ frontend przejmuje coraz więcej zadań związanych z logiką aplikacji. Odpowiada za pobieranie danych, ich przetwarzanie i dynamiczne wyświetlanie zawartości bez konieczności przeładowywania całej strony. W takich aplikacjach frontend bardzo często korzysta z API (np. REST lub GraphQL), a backend staje się bardziej wyspecjalizowanym "serwerem danych", dostarczającym tylko surowe dane w odpowiedzi na żądania klienta.
3. Popularność architektury mikroserwisowej i API-first
Wzrost popularności mikroserwisów i podejścia API-first przyczynia się do zmniejszenia wyraźnej granicy między frontendem a backendem. W architekturze mikroserwisowej:
- Backend jest podzielony na mniejsze, niezależne serwisy, które komunikują się za pośrednictwem API. Każdy mikroserwis jest odpowiedzialny za konkretną funkcjonalność i często może być rozwijany w różnych językach programowania.
- Frontend, dzięki dostępowi do API, może w bardziej elastyczny sposób korzystać z danych i funkcji backendu. W takim modelu backend dostarcza tylko dane w formie API, a cała logika wyświetlania, obsługi zdarzeń i przetwarzania danych dzieje się w przeglądarce.
Przykładem są architektury typu JAMstack, gdzie frontend może być hostowany osobno, a backend jest serią rozproszonych usług, które dostarczają dane za pośrednictwem API.
https://www.cloudflare.com/learning/performance/what-is-jamstack/
4. Wzrost popularności tzw. "Full-stack developerów"
Jeszcze kilka lat temu specjalizacje frontend i backend były wyraźnie rozdzielone, a osoby pracujące nad jednym z tych obszarów rzadko przekraczały granicę drugiego. Obecnie jednak wzrasta popularność roli full-stack developera, który zna zarówno technologie backendowe, jak i frontendowe. Full-stack developerzy są w stanie pracować nad wszystkimi warstwami aplikacji, co naturalnie zmniejsza dystans między obiema stronami.
Dzięki narzędziom takim jak Node.js, Express.js (backend) oraz React czy Vue (frontend), full-stack developerzy mogą tworzyć kompletne aplikacje od początku do końca, mając pełną kontrolę nad przepływem danych i interakcjami między frontendem a backendem.
5. Pojawienie się narzędzi do renderowania po stronie serwera (SSR) w aplikacjach frontendowych
Nowoczesne frameworki frontendowe, takie jak Next.js (dla Reacta) i Nuxt.js (dla Vue.js), wprowadziły łatwo dostępne mechanizmy renderowania po stronie serwera (ang. SSR - Server-Side Rendering). Umożliwia to tworzenie aplikacji, które są renderowane zarówno na serwerze (poprawiając SEO i szybkość ładowania), jak i w przeglądarce (zapewniając interaktywność i elastyczność). Dzięki temu podejściu jedna aplikacja może obsługiwać zarówno logikę serwerową, jak i klientową, co dodatkowo zmniejsza podział na backend i frontend.