Strona główna Programowanie Frontend vs. backend… o co chodzi?

Frontend vs. backend… o co chodzi?

przez Mateusz Michalski

W całym tym oceanie wiedzy i technologii jakie towarzyszą branży IT można się szybko pogubić. Osoby stawiające swoje pierwsze kroki w programowaniu, mogą czuć się nieco zdezorientowane nadmiarem informacji. Dlatego postaram się uporządkować to wszystko, a zacznę od fundamentów, które będą bazą do kolejnych artykułów i projektu! 🙂

Frontend

Przeglądając strony internetowe widzisz grafiki, kolory, animacje oraz tekst różnych rozmiarów i z różnymi czcionkami. Frontend to warstwa wizualna strony, która powinna być przejrzysta, czytelna, użyteczna i przyjazna użytkownikowi (User Friendly).

Składają się na nią w zasadzie 3 podstawowe technologie (dokładniej scharakteryzuje je w kolejnym artykule):

  • HTML – tutaj definiuje się szkielet strony. Zbiór wielu znaczników określa w jaki sposób strona ma być zbudowana, jakie sekcje ma posiadać oraz z jakich plików CSS oraz JS korzysta.
  • CSS – arkusze stylów umożliwiają nadawanie wyglądu elementom strony, np. kolorystyka, rozmiar, ułożenie. Łączy się je z HTML, poprzez podanie ścieżki do plików, w dedykowanych znacznikach.
  • JS – definiuje w jaki sposób działa strona. W tej części można realizować komunikację z częścią backendową (API) systemu lub kontrolować elementy na stronie, np. ukrywać/pokazywać przyciski, zmieniać klasy CSS, tworzyć animacje, itd. Podobnie jak pliki CSS, JS również „podpina” się do HTML poprzez podanie ścieżki w specjalnych znacznikach.

Technologie te idealnie wpisują się w charakterystykę budowy człowieka. HTML – szkielet, CSS – wygląd, a JS – mięśnie. Oczywiście technologii jest znacznie więcej, jednak jest to baza, która na początek wystarczy i którą warto znać oraz opanować.

Jak możesz się już domyślać, programista frontend dużo współpracuje z grafikami oraz projektantami interfejsów. Developer otrzymuje od nich zestawy grafik, paletę barw i kolorów oraz makiety, które wizualizują jak strona WWW ma wyglądać, a następnie przerzuca to wszystko do kodu.

Są też przypadki (i to bardzo często), kiedy programista sam jest odpowiedzialny za koncept graficzny i projektuje wygląd strony podczas developmentu. Można wykorzystywać do tego gotowe biblioteki, komponenty lub szablony, żeby przyspieszyć i ułatwić sobie pracę. 🙂

Backend

To tutaj skrywa się główna logika aplikacji, jej „mózg”. Backend odpowiada za integracje między różnymi systemami, obróbkę danych, uruchamianie algorytmów oraz połączenia z bazą danych.

Wyobraź sobie, że posiadasz aplikację WWW, która służy do robienia listy zakupów. Prosta sprawa, użytkownik przez kilka dni wpisuje co musi kupić, a po zrobionych zakupach usuwa pozycje z listy. Jeżeli aplikacja nie korzystałaby z technologii backendowej, użytkownik musiałby za każdym razem modyfikować kod aplikacji aby zarządzać listą… Chyba niezbyt dobre rozwiązanie, prawda? 🙁

Żeby to wszystko miało ręce i nogi, potrzebna jest baza danych, w której będą przechowywane informacje oraz technologia, która będzie łącznikiem między danymi, a miejscem gdzie są wyświetlane. To właśnie w tym łączniku odbywają się procesy, które weryfikują, przeliczają, modyfikują i analizują dane. Nie będziemy zagłębiać się w szczegóły jak to technicznie jest realizowane, to nie ten moment. Teraz chciałbym, żebyś zrozumiał/a ideę.

Pamiętaj, że frontend i backend nie zawsze muszą występować razem, można ich używać oddzielnie. To wszystko zależy od wymagań i przeznaczenia realizowanego projektu. Są aplikacje, które nie mają warstwy graficznej i zarządza się nimi z poziomu wiersza poleceń. Ich przeznaczeniem może być na przykład zbieranie danych z systemu operacyjnego i zapisywanie ich do bazy danych/pliku lub integracja z inną aplikacją WWW.

Backend developer w przypadku stron WWW, zajmuje się dostarczaniem danych do warstwy wizualnej oraz ich odbieraniem, a następnie przetwarzaniem. Dba o to żeby dane były poprawne, odpowiednio przetrzymywane w bazie oraz bezpieczne. Ustala z programistą frontend co jest potrzebne, aby po kilku godzinach lub nawet dniach realizowanego zadania wszystko zadziałało. 🙂

Do najpopularniejszych języków backendowych należą: PHP, Java, Kotlin, Python, Node.js, Go, Ruby.

Na koniec

Wiem, że dla bardziej doświadczonych osób, mogą to być tylko formalności, zero nowości i nuda. Wiem też jednak, że jest sporo osób, które dopiero „raczkują” w temacie programowania i takie uporządkowanie wiedzy będzie dla nich na +. 🙂

W kolejnym artykule pójdziemy o krok dalej i omówimy oraz pogrupujemy różne technologie. Zmierzamy w kierunku fajnej (mam nadzieję) serii wpisów i filmów z programowaniem w roli głównej. 😉

Daj lajka i czytaj dalej!

Jeżeli chcesz być na bieżąco z artykułami i jesteś ciekawy co będzie dalej, daj lajka na naszym profilu FB, a przede wszystkim zapisz się do newslettera! Spodobał Ci się artykuł? Może zaciekawią Cię inne wpisy na naszym blogu.

Dzięki za Twój czas, widzimy się niebawem 🙂

Źródło grafiki: comic.browserling.com

4.7 12 votes
Oceny

Powiązane wpisy

guest
4 komentarzy
Inline Feedbacks
View all comments

Strona wykorzystuje cookies i przetwarza dane zgodnie z zasadami opublikowanymi w Polityce Prywatności. Jeżeli nie wyrażasz zgody na przetwarzanie danych, zmień ustawienia swojej przeglądarki. Wybierając "OK", zgadzasz się na warunki przetwarzania. OK Więcej