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
