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 danych 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 do 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.
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
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.