Programowanie i WWW

Co front-end developer musi wiedzieć o backendzie? 👀

Pracując jako front-end developer prędzej czy później spotkasz się z back-endem. Zła wiadomość jest taka, że zrozumienie tego co dzieje się po drugiej stronie…

Pracując jako front-end developer prędzej czy później spotkasz się z back-endem. Zła wiadomość jest taka, że zrozumienie tego co dzieje się po drugiej stronie jest potrzebne a dobra – że za chwilę opowiem Ci o 20% wiedzy, która da Ci 80% zrozumienia.

Czym jest back-end?
W uproszczeniu: część aplikacja działająca po stronie serwera. Jej rola polega m.in. na przekazywaniu z bazy danych do klienta i odwrotnie.

Czym jest baza danych?
Otwórz Excela lub Google Spreadsheet. Arkusz który zobaczysz, bardzo przypomina bazę danych. Np. w mySQL również mamy tabele, kolumny oraz wiersze (przynajmniej w bazach takich jak mySQL/postgreSQL). Pomiędzy nimi dochodzi do tzw. relacji, czyli połączeń na podstawie unikatowych kluczy (np. identyfikatorów).

Inaczej mówiąc: baza danych przechowuje informacje zgodnie z określoną strukturą.

Czym jest API?
API to skrót – Application Programming Interface. Interfejs to sposób umożliwiający komunikację (np. klawiatura jest interfejsem umożliwiającym komunikację człowieka z komputerem). Zatem API to programistyczny interfejs aplikacji, czyli sposób komunikacji wewnątrz aplikacji oraz pomiędzy aplikacjami.

Więcej o API dowiesz się pod hasłem REST API i GraphQL.

Jak wymieniać dane z back-endem?
Wszystko odbywa się z pomocą endpointów. Przykładowo back-end "wystawia" nam adres, np. /api/users. Wysyłając na niego żądanie, otrzymujemy odpowiedź, w tym przypadku zawierającą informacje o użytkownikach.

To jak wyglądają endpointy zależy od tego jak zaprojektowany jest back-end.

Czym są metody HTTP?
Z pewnością spotkałeś się ze słowami GET / POST / PUT / PATCH / DELETE. Są to metody które możemy wykorzystać do wysłania zapytania na wskazany adres. Dzięki nim możemy np. wysłać zapytanie GET /users aby otrzymać informacje o użytkownikach lub POST /users aby dodać informacje o nowym użytkowniku.

Więcej o nich przeczytasz tutaj.

Nagłówki zapytania
Wraz z każdym zapytaniem i odpowiedzią HTTP przesyłane są tzw. nagłówki. Czyli dodatkowe informacje na temat przeglądarki, serwera lub tego konkretnego zapytania. Nagłówki często wykorzystywane są w celu autoryzacji połączenia np. z pomocą OAUTH. Zwykle instrukcje dotyczące nagłówków znajdziesz w dokumentacji wybranej aplikacji.

Obsługa formularzy
Formularze zwykle przesyłają dane z pomocą zapytania POST. Jest to o tyle ważne, że: dane te nie są przekazywane w adresie URL strony (i nie zapisywane w historii przeglądarki) oraz sama przeglądarka jest w stanie odpowiednio reagować np. w sytuacji gdy dojdzie do przeładowania strony (zapyta o chęć ponownego wysłania zapytania). Zatem pamiętaj: większą ilość danych lub dane formularzy, przesyłaj z pomocą zapytania POST / PUT / PATCH

Przeglądarka i komunikacja z back-endem
Za każdym razem jak otwierasz przeglądarkę i wchodzisz na określoną stronę, wykonujesz zapytanie GET na wpisany adres. W odpowiedzi otrzymujesz kod strony, który jest interpretowany i wyświetlany przez przeglądarkę. Dokładnie w ten sam sposób możesz z poziomu kodu JavaScript wykonywać zapytania, dzięki którym pobierzesz dane bez konieczności przeładowania okna przeglądarki.

Walidacja danych
Zawsze gdy przesyłasz dane do serwera, warto sprawdzać ich poprawność po stronie przeglądarki i KONIECZNIE po stronie serwera. Tym drugim zajmuje się back-end developer a Ty otrzymujesz tylko informacje o tym czy informacja została przetworzona poprawnie czy też nie.

*Czym są statusy odpowiedzi? *
Pracując z back-endem spotkasz się z tzw. kodami odpowiedzi. Np. kod 200 oznacza, że wszystko poszło okey, kod 404 oznacza że podana strona nie została odnaleziona a kod 500, że serwer przestał działać lub wystąpił na nim jakiś błąd i nie był w stanie obsłużyć zapytania.

Dla Ciebie oznacza to tyle, że w zależności od kodu statusu możesz odpowiednio reagować, zwracając informacje dla użytkownika.

Informacja zwrotna
Po wysłaniu danych na serwer zawsze otrzymujesz jakąś informację zwrotną (kod odpowiedzi lub informację np. w formacie JSON). Zawsze wykorzystuj je do tego aby informować użytkownika (w naturalny, ludzki sposób) o tym co się wydarzyło (lub nie wydarzyło) i co może zrobić dalej.

To wszystko! Jak widzisz samej wiedzy o back-endzie wymaganej po stronie front-endu jest trochę, natomiast najważniejsze jest to abyś miał świadomość możliwości i wymagań oraz widział to "z lotu ptaka". Taka perspektywa pomoże Ci się lepiej odnaleźć w swojej roli bez konieczności wchodzenia w świat back-endu.

Lista linków z Newslettera:

Measure – wydajność strony w oczach Google



W 2021 roku wydajność stron w oczach Google odegra dużą rolę w kontekście SEO. Z pomocą Measure uzyskasz raporty wydajności Twojej strony na przestrzeni czasu.

Chrome is Bad (on OSX)



Ostatnie aktualizacje Chrome, bardzo negatywnie wpływają na wydajność systemu OSX. Zmiana np. na Brave jest bezbolesna (rozszerzenia działają) a różnica jest ogromna!

Product Management for Engineers



Myślisz o dalszym rozwoju w roli Product Managera? Tutaj znajdziesz listę wysokiej jakości materiałów na ten temat. Ja dorzucam od siebie książkę: Inspired

Najlepsze praktyki w Node.js



Jeżeli pracujesz w node.js, warto obserwować to repozytorium. Masa dobrych praktyk dotyczących struktury aplikacji, obsługi błędów i nie tylko

Lista publicznych API – idealna dla nauki



Publiczne API świetnie sprawdzają się na potrzeby nauki i projektów do portfolio. Tutaj znajdziesz listę tych najpopularniejszych.

UDOSTĘPNIJ ARTYKUŁ:

Powiązane artykuły

Programowanie i WWW

Programiści „10x” oraz „1000x”

Słyszałeś określenie "10x programmer"? Chodzi o programistów, którzy są w stanie rozwiązywać problemy w czasie 10x krótszym niż pozostali. Często mówi się, że to mit. Czy na…

Programowanie i WWW

Minimalistyczna konfiguracja Visual Studio Code

Visual Studio Code to obok narzędzi JetBrains, najpopularniejszy edytor kodu dla web developerów. Według mnie jest to w pełni zasłużone. Problem w tym że jego podstawowa konfiguracja,…

Programowanie i WWW

Czy webdev kręci się w kółko? ♻️

Cześć 👋Początek roku to czas kiedy zasypują nas różnego rodzaju podsumowania tego co było i przewidywania tego co będzie.Podczas gdy w podsumowaniu nie ma nic złego, tak…

Pozostań na bieżąco!

Już nigdy nie przegapisz ważnych informacji, promocji oraz nowych kursów. Zapisz się na newsletter już teraz!

Zapisując się do newslettera akceptujesz naszą politykę prywatności