Frontend – omówienie

Frontend – omówienie

Cześć!

     W poprzednim poście dotyczącym programowania omówiłem stronę backendową (aby przeczytać ten post, kliknij tutaj) bardziej szczegółowo oraz w podsumowaniu obiecałem Wam, że kolejnym tematem, który poruszę będzie frontend. W związku z tym zapraszam na szczegółowe omówienie frontendu.

Definicja

     Pozwolę sobie skopiować definicję z postu, gdzie omawiałem ogólnie wszystkie warstwy, czyli frontend, backend oraz fullstack (aby przeczytać ten post, kliknij tutaj):

Frontend jest częścią oprogramowania która jest widoczna jako strona, np. interfejs strony, menu czy układ strony. Innymi słowy jest to warstwa, która odpowiedzialna jest za przyjmowanie danych z backendu i wyświetlanie jej w odpowiedni sposób na stronie.

Najpopularniejsze języki programowania (frontend)

  • HTML (HyperText Markup Language) – podstawa podstaw. Jest to hipertekstowy język znaczników, do tworzenia stron internetowych. Początki języka HTML miały miejsce już w 1980 roku.
  • CSS (Cascading Style Sheets). Język ten jest uzupełnieniem języka HTML, służący do opisu formy prezentacji stron WWW. Oficjalnie został opracowany w 1996 roku. 
  • JS (JavaScript) – jest to skryptowy język programowania, opracowany w połowie lat 90. Język ten umożliwia nie tylko wyświetlanie statycznych informacji, ale również obsługę zmiany treści odpowiednio do sytuacji. 
  • React.js – tak, wiem – to nie jest osobny język oprogramowania. Jest to biblioteka języka programowania JavaScript. Niemniej jednak React.js stał się na tyle popularnym rozszerzeniem, że bez problemowo znajdziemy go jako jedno z wymagań na część ogłoszeń o pracę frontendowca.
  • Angular – podobnie jak React.js, jest rozszerzeniem języka JavaScript, a konkretniej TypeScript. Bardzo popularny framework powstały w 2016 roku. 

Jak nauczyć się frontendu?

Podstawy (HTML, CSS)

     Powtórzę się, lecz by zbudować dom, trzeba fundamentów. Tak jest również w przypadku warstwy frontendowej. Jeżeli chcesz być dobrym frontend developerem – zacznij od podstaw, a mianowicie od nauki HTML oraz CSS. Moim zdaniem nie ma nic lepszego na rozpoczęcie nauki frontendu, jak rozpoczęcie od stworzenia prostej strony za pomocą HTML oraz wystylizowania jej w języku CSS. Powtórzę się po raz kolejny, ale młodzi programiści motywowani chęcią szybkiego zdobycia pracy często rozpoczynają naukę od JavaScriptu bez solidnej znajomości jego HTML oraz CSS, co osobiście uważam za dość duży błąd. Tak jak w przypadku backendu, dobrych samouczków do nauki jest tyle, ile grzybów po deszczu. Polecam wejść na YouTube czy inna platformę streamingową i znaleźć sobie odpowiedni kurs, kierując się np. recenzjami. Dopiero po zdobyciu solidnej wiedzy podstawowej zalecam iść krok dalej, czyli w…

JavaScript

     Kiedy zaczynałem swoją przygodę z programowaniem, myślałem, że JavaScript jest jakimś rozszerzeniem Javy…słyszałem również, że (uwaga, suchar):

„Żeby nauczyć się Javy, wystarczy nauczyć się JavaScriptu i oduczyć Scriptu”.

…nic bardziej mylnego 🙂 Są to totalnie dwa inne języki programowania. I to właśnie JavaScript będzie najlepszym, kolejnym, naturalnym krokiem po nauce HTML oraz CSS. Język ten umożliwi przechowywanie wartości w zmiennych, operowanie na porcjach tekstu, reagowanie na różne przypadku użycia np. przycisku, zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie i wiele, wiele innych. Możliwości jest naprawdę wiele i by poznać wszystkie funkcje, potrzeba cierpliwości i przerobienia dużo samouczków. Po solidnej nauce języka JavaScript nadszedł czas na jego rozszerzenia, czyli…

Angular/React.js

     React.js są rozszerzeniem języka JavaScript. Z kolei Angular jest rozszerzeniem języka TypeScript – który jest nadzbiorem języka JavaScript. Brzmi skomplikowanie? Spójrzcie na grafikę.

     No to mam nadzieje, że grafika rozwiała wątpliwości 🙂 Biorąc pod uwagę obecne ogłoszenia o pracę uważam, że Angular oraz React.js są najpopularniejszymi frameworkami frontendowymi. Ich największą różnicą jest to, że Angular – nazywany często frameworkiem oferuje kompletne narzędzia programistyczne. Wielu programistów postrzegało to jako wadę, ponieważ musieli obejść domyślne rozwiązania. React pojawił się jako odpowiedź na te problemy, dając programistą swobodę, ale kosztem konieczności samodzielnego wybierania/tworzenia rozwiązań. Które rozszerzenie jest lepsze? Opinie są podzielone. Dawna wada Angulara, czyli jego słaba wydajność została poprawiona. Jeśli chodzi o React, nie każdy programista czuje się komfortowo z jego elastycznością. Osobiście uważam, że zamiast szukać na siłę lepszej technologii, lepiej znaleźć technologię bardziej pasującą do Twojego konkretnego projektu. W tym pomogą już źródła internetowe które nieco bardziej rozszerzają terminologię Angulara czy Reacta. Być może w przyszłości poświęcę osobne wpisy na temat tych rozszerzeń. Niemniej jednak uważam, że po nauce JavaScriptu warto znać bynajmniej jeden z tych rozszerzeń, by nazwać się spełnionym frontend developerem.

Czy do frontendu wystarczy mi sam HTML/CSS?

     Nie. Niestety frontend developer często mylnie kojarzony jest z kimś, kto tylko tworzy dba o stylizację oraz wygląd strony. Nic bardziej mylnego. Frontend developer powinien znać język JavaScript. Co za tym idzie, powinien umieć przyjąć danę z serwera (np. backendu), odpowiednio te dane obrobić i je na stronie wyświetlić. Dla samej znajomości HTML czy CSS często są osobne ogłoszenia o prace, jako grafik czy UI Designer.

Podsumowanie

     Myślę, że podobnie jak w przypadku backendu – dostatecznie rozwinąłem temat. Jeśli przychodzi Ci na myśl temat, którego nie poruszyłem – daj znać w komentarzu. Najważniejsze jest to, by być po prostu cierpliwym, Rzymu w dwa dni nie zbudowano. W kolejnym poście o tematyce programowania możecie spodziewać się rozwinięcia terminu fullstack.

Pozdrawiam serdecznie
biegajacyprogramissta.pl

Dodaj komentarz

2 × two =

Close Menu