• Oskar Kowalów

Jak zostać programistą front-end?

Aktualizacja: wrz 1

W poprzednim wpisie opowiedziałem moją historię związaną z wyborem zawodu programisty. Teraz chcę Ci przedstawić, jak wygląda droga edukacji do zostania front-end developerem.


Warunki wstępne


Każdy etap nauki powinien cieszyć! To ma być przyjemność. Jeżeli chcesz pracować jako programista, to musisz przygotować się na naukę każdego dnia. Kto się nie rozwija, ten się zwija 🧻 - jest to bardzo widoczne w branży IT. Kolejną rzeczą, na którą chcę mocno zwrócić uwagę to motywacja. Motywacja jest kluczowa do nauki. Myślę, że bez chęci nauki mimo różnych przeciwności, takich jak zmęczenie po pracy, czy lenistwi, nie udało by mi się niczego zrobić.


Poniżej znajdziesz dziedziny nauki i technologie, które trzeba poznać, najlepiej w takiej kolejności, w jakiej je umieściłem. Myślę, że nauka front-endu, powinna się odbywać etapami. Przykładowo, nie polecam nauki React'a bez poznania JS'a. Tak samo nie polecam nauki Bootstrapa, bez znajomości CSS'a. Niektóre z tych technologii opisałem bardziej obszernie, a inne tylko zdawkowo, ponieważ o wybranych technologiach, będę pisał więcej w następnych wpisach.


Język angielski


Cóż, bez angielskiego będzie bardzo ciężko w tej branży. Na pewno trzeba umieć swobodnie czytać, i słuchać ze zrozumieniem. Jak zaczynałem naukę programowania, to umiałem angielski, ale nie używałem go na codzień, i miałem problemy z płynnym czytaniem tekstu, lub słuchaniem filmów na YT. Zacząłem czytać wiele przeróżnych artykułów na temat programowania w języku angielskim (bo jest ich w sieci po prostu najwięcej). Podczas czytania blogów, czy dokumentacji, często miałem odpalony translator i słownik, dzięki czemu z czasem zacząłem czytać materiały dużo szybciej i swobodniej. W artykułach o programowaniu jest używany żargon, który na początku trzeba przyswoić, ale później staje się on naturalny.


Devtools


Inaczej - narzędzia deweloperskie. Na codzień używam przeglądarki Google Chrome i bardzo lubię Google Chrome Devtools. Dzięki Devtoolsom można badać jak zbudowana jest strona WWW, którą aktualnie przeglądasz. Możesz najechać na elementy i zobaczyć strukturę strony, stylowanie i wiele innych. W konsoli (taka zakładka w Devtoolsach) możesz pisać Javascript, czyli np.: łapać dowolne elementy na stronie i manipulować nimi. Ciężko mi sobie wyobrazić pracę, gdyby nie instaniały Devtoolsy w przeglądarce. Więcej na ten temat w następnych wpisach 😉.


Command Line Interface


W zasadzie dużo umieć nie trzeba, ale konieczne będzie poznanie kilku komend w wierszu poleceń. Przychodzi mi na myśl kilka głównych, bardzo podstawowych komend, które używam na codzień: cd, ls, mkdir, pwd.


Polecam film od Hello Roman na temat terminala - https://www.youtube.com/watch?v=DZtFbMoDGK0


GIT / GitHub


Git, czyli system kontroli wersji. Dzięki Gitowi, tworzysz historię kodu swojego projektu. Załóżmy, że chcesz stworzyć swoją stronę internetową. Dzięki Gitowi, każdą nową zmianę, którą wprowadzisz do kodu swojej strony, możesz opisać i zachować lokalnie lub w wybranym serwisie, takim jak GitHub. Masz możliwość śledzenia całej historii swojego kodu i przywracania wszystkich zmian w projekcie w razie potrzeby. Dlaczego to jest przydatne? Przykładowo, mogłeś przez przypadek usunąć potrzebną część kodu, lub chcesz przywrócić kod, który stworzyłeś wcześniej, ale gdzieś po drodze usunąłeś, bo wydał Ci się niepotrzebny.


Co więcej Git jest bardzo przydatny w pracy zespołowej nad projektem. Każda wprowadzona zmiana w kodzie, zawiera informacje dotyczące osoby, czasu wprowadzenia zmiany, ilości dodanego i usuniętego kodu oraz opis zmian i niezbędne komentarze.


Git jest nieoceniony i używany przez wszystkich programistów na codzień. Warto nauczyć się Git'a już na początku, bo się po prostu bardzo przydaje. Warto mieć wszystkie swoje projekty, oraz ćwiczenia na GitHubie, bo wtedy widać czarno na białym, że ciężko pracujesz nad każdym projektem, a nie robisz kopiuj-wklej 💾.


Więcej o Git i GitHubie napiszę w przyszłych wpisach.


HTML/CSS


Moim zdaniem nauka HTML powinna iść w parze z nauką CSS. HTML to struktura strony internetowej, czyli tzw. tagi z których zbudowana jest strona (tekst, linki, przyciski inputy), a CSS to stylowanie - nadawanie tym tagom wyglądu. Żeby łatwiej to sobie wyobrazić, spójrz na poniższe zdjęcia.


Tak wygląda strona główna Wikipedii (z CSS):


a tak wygląda ta sama strona Wikipedii, ale już bez CSS:


Także widzisz, że można napisać stronę bez przyjaznego wyglądu, ale nie robi się czegoś takiego dla celów komercyjnych.

Jako etap nauki, HTML i CSS warto znać na tyle, aby umieć zbudować własną stronę internetową. Chodzi o pewny rodzaj biegłości w myśleniu HTMLem i CSSem - gdy spojrzysz na dowolną stronę to domyślasz się, lub wiesz jakie tagi są zastosowane, jakie stylowanie może być użyte itd.


Osobiście HTML'a uczyłem się głównie poprzez praktykę. Najpierw poznałem techniczne podstawy, jak zbudowany jest tag, poznałem różne tagi i atrybuty, i zacząłem robić strony. Najpierw przepisywałem strony, które oglądałem podczas kursu na YT, dzięki czemu wiedzia przeradzała się umiejętności. Dodatkowo Devtoolsy są bardzo przydatne podczas nauki HTML i CSS. W wolnej chwili odpalałem Devtoolsy i badałem jak dana strona, którą aktualnie przeglądam, gdzieś w internecie, jest zbudowana (co za element został użyty, jak jest ostylowany itd). To jest bardzo owocna droga nauki.


Polecam zatem kursy na YT do nauki HTML i CSS, a przy okazji oficjalną dokumentację tych obu języków, czyli MDN.


Uwaga!

Wiem, że część osób się ze mną nie zgodzi co do zaprezentowanych materiałów do nauki HTML i CSS, a w szczególności, jak chodzi o materiały od Pasja Informatyki. Materiały te mogą być uznawane za przestarzałe, ale od razu chcę powiedzieć, że nie zgadzam się z określeniem, że te materiały są przestarzałe lub złe. Osobiście nauczyłem się na tych materiałach bardzo dużo, i pomimo, że już nie piszę takiego kodu jaki tam jest, to bardzo szanuję prezentowany na tym kanale sposób i podejście nauki do programowania dla początkujących.


Materiały do nauki HTML:


Responsive Web Design (RWD)

Dostosowywanie się wyglądu strony internetowej do urządzeń mobilnych, to absolutnie kluczowa sprawa. Strona musi dobrze wyglądać na telefonie (mobile first), na tablecie, na laptopie i na dużym ekranie komputera. Dzisiaj urządzenia mają przeróżne rozmiary, gęstości pikseli itd.


Dostosowywanie się strony do różnych rozmiarów ekranów, uzyskamy dzięki media queries. Ta dziedzina należy do CSS i to głównie za pomocą CSS dodajemy responsywność strony.


W zasadzie RWD sprowadza się do nadawania styli dla określonych rozmiarów ekranów. Dla ekranów o szerokości 1280px nadajemy konkretne style, dla telefonów z ekranami do szerokości 748px nadajemy inne style itd.


Materiały o RWD:


Dobre praktyki pisania CSS


Dobre praktyki w CSS to świadome używanie id oraz klas, grupowanie styli, znajomość specificity, BEM. Polecam przeczytać ten artykuł o dobrych praktykach w CSS.


Flexbox, Grid


Flexbox to nowa technologia, która bardzo ułatwia tworzenie elastycznego layoutu strony. Elementy układa się wzdłuż osi pionowej lub poziomej, dzięki czemu łatwo i szybko możemy wyśrodkować elementy, wyrównać je do prawej, do dołu, itp. Flexbox ma już duże wsparcie w przeglądarkach, więc na ogół można śmiało go używać. Osobiście używam flexboxa zawsze, gdy pojawia się jakakolwiek potrzeba pozycjononowania elementu na stronie.


CSS Grid Layout to układ oparty na siatce wierzy i kolumn. Za pomocą grid'a łatwiej zaprojektujesz stronę i nie będziesz musiał używać elementów pływających i pozycjnonowania jak w Flexboxie.


Materiały do nauki Flexboxa:

Materiały do nauki CSS Grid:

A tutaj film od Traversy Media, gdzie tworzą stronę internetową z RWD, używając Flexboxa i CSS Grid (pyk, projekt do portfolio!):

https://www.youtube.com/watch?v=moBhzSC455o

Bootstrap

Bootstrap to najbardziej popularna biblioteka do tworzenia stron internetowych. Istnieje wiele innych bibliotek do tworzenia stron, ale nie sądzę, że trzeba znać wszystkie. Warto poznać w niewielkim stopniu jedną bibliotekę CSS.


Bootstrap zawiera gotowe elementy do wykorzystania na stronie, takie jak: przyciski, formularze, tabele i wiele innych. Bootstrap powinien ostatnim elementem na etapie nauki CSS'a, bo tutaj już praktycznie nie piszemy własnego CSS'a, tylko uczymy się wykorzystywać i dopasowywać do naszej strony gotowe, ostylowane elementy.


Materiały do nauki Bootstrapa:


Javascript


Przyszła pora na Javascript 🔥🔥🔥! Teraz się dopiero zacznie przygoda z programowaniem. O Javascripcie można powiedzieć bardzo dużo. Jest to skryptowy język programowania, który jest używany głównie w przeglądarkach, ale nie ogranicza się tylko do przeglądarek. W sporym uogólnieniu, dzięki JS'owi, możesz się zalogować do wybranej strony, możesz oglądać filmy na Youtubie lub słuchać muzyki na Spotify w przeglądarce. Wszystkie aplikacje internetowe takie jak, wspomniany już YouTube, lub Spotify zostały napisane w JS'ie. Za pomocą JS'a możesz łapać elementy na stronie, np. przycisk, i sprawić żeby zmienił on tekst kiedy w niego klikniesz. W tym języku można zrobić mnóstwo przeróżnych rzeczy i głównym ograniczeniem jest nasza wyobraźnia (no i oczywiście wiedza 😄).


Początki nauki JS'a to podstawy programowania - zmienne, pętle i intrukcje warunkowe. Później będzie to znajmość DOM i manipulacja drzewem DOM - łapanie elementów, wywoływanie gotowych metod. Następnym krokiem będzie przetwarzanie struktur danych - praca na tablicach i obiektach. Kolejnym etapem będą podstawy programowania obiektowego, prototypy, klasy, a na końcu moduły i destrukturyzacja.


Znajomość Javascriptu to po prostu must-have. O Javascripcie chcę napisać więcej w następnych wpisach.


Clean code, refactoring


Warto wiedzieć trochę o pisaniu czystego kodu i o refaktoringu. W ogóle pisanie czystego kodu to temat rzeka i zgłębia się go przez całe życie zawodowe. O czystym kodzie można powiedzieć, że jest czytelny, rozszerzalny, testowalny, samo dokumentujący się, nie duplikujący się, aplikujący najlepsze wzorce/zasady i dobrze sformatowany.


Refaktoryzacja to wprowadzanie zmian w projekcie, w wyniku którego nie zmienia się funkcjonalność, a jedynie struktura kodu. Chodzi o to, żeby zrobić porządek w kodzie, zrobić go bardziej czystym - zmienić nazwy zmiennych, podzielić dużą część kodu na mniejsze funkcje itp.


O pisaniu czystego kodu napiszę w następnych wpisach.


NodeJS, NPM


Czym jest NodeJS? Tak jak wspomniałem wcześniej, Javascript uruchamia się w przeglądarce, ale od jakiegoś czasu można go uruchomić poza przeglądarką, czyli można tworzyć aplikacje typu server-side. Dzięki temu możemy również pisać aplikacje mobilne i aplikacje desktopowe.


NPM to node package manager, czyli menedżer pakietów dla Node. Na NPM składają się dwa składniki, CLI (command line interface) o nazwie npm oraz baza pakietów npm registry zawierająca publiczne oraz prywatne pakiety. Za pomocą NPM'a możemy pobrać i zainstalować wybraną paczkę do naszego projektu. Przykładowe paczki NPM to React, momentJS, chart-js i miliony innych 😄.


React + Redux


React to aktualnie najbardziej popularna biblioteka Javascriptowa, dzięki której stworzysz nowoczesną aplikację internetową. Sama biblioteka została stworzona i jest utrzymywana przez twórców Facebook'a.


Polecam naukę Reacta, ponieważ próg wejścia nauki tej biblioteki jest dość niski, tzw. łatwo zaczniemy pisać w nim aplikacje. Do budowania komponentów w React'cie jest używana składnia JSX, która wyglądem przypomina HTML (a w istocie JSX to czysty Javascript).


Znajomość React'a pozwoli Ci pisać nie tylko aplikacje internetowe ale również mobilne (React Native) i desktopowe (Electron).


Redux to biblioteka służąca do zarządzania stanem w aplikacji. Redux jest bardzo często używany w aplikacjach napisanych w React'cie, poprzez bibliotekę React-Redux. Redux jest dalej bardzo popularny i często używany w aplikacjach. Na początkach nauki React'a nie widziałem sensu używania Reduxa do momentu, gdy napisałem swoją pierwszą aplikację, elektroniczny śpiewnik - https://github.com/Osky772/app-songbook. Pisząc tą aplikację, nie znałem jeszcze Reduxa, i im dalej szedłem w las z pisaniem kodu, tym było coraz ciężej zapanować nad stanem w aplikacji 🤯


W React'cie można zarządzać stanem na wiele innych sposóbów, używając np. biblioteki MobX lub React Context.


HTTP REST API


HTTP (ang. Hypertext Transfer Protocol), czyli protokół przesyłania dokumentów hipertekstowych w sieci WWW. Na stronach internetowych publikujesz informacje, ale dzięki protokołowi HTTP jest to możliwe. Jakie zagadnienia, związane z HTTP trzeba znać? Poniżej kilka z nich:

  • podstawowa komunikacja HTTP klient-serwer (ogólne funkcjonowanie HTTP),

  • metody HTTP - najczęściej używane to GET, PUT, POST, DELETE,

  • składnia URI (rozróżnienie między URL a URI).

API (ang. Application Programming Interface), czyli sposób w jaki programy powinny się ze sobą komunikować. I tyle. Każdy program ma swoje API, a więc określa w jaki sposób możemy komunikować się z tym programem. REST API to styl architektury oprogramowania. A więc REST nie oznacza, żadnego programu, czy oprogramowania. REST to tylko określony sposób, w jaki możemy tworzyć API dla oprogramowania. RESTowe API ma określone zasady, o których przeczytasz np. tutaj - https://devszczepaniak.pl/wstep-do-rest-api/. Możesz jeszcze sobie objerzeć filmik od Overment na temat REST API - https://youtu.be/P9b8-BrWdYs.


Testy


Warto znać pojęcie testów jednostkowych, integracyjnych i E2E. Polecam zaznajomić się trochę z jakąś popularną biblioteką do testowania, np. Jest lub Jasmine. W pracy korzystamy również z Cypress, biblioteką do testów E2E. Testowanie aplikacji jest ważne. Testowanie daje nam pewność, o ile dobrze napiszemy testy, że wprowadzone nowe zmiany do kodu, nie popsują działających funkcjonalności.


Polecam poniższe materiały do zaznajomienia się z testowaniem:

Webpack


Webpack to narzędzia wspomagające proces budowania aplikacji. Webpack tworzy sieć powiązań między modułami, i finalnie tworzy z nich jedną lub więcej paczek (ang. bundle). Załóżmy, że mamy aplikację z mnóstwem modułów JS, plikami .scss, obrazkami. Webpack zrobi z tych luźno rozsianych plików gotowe paczki, które będziemy mogli wrzucić na serwer, dzięki czemu będziemy cieszyć się aplikacją dostępną online 😀. Webpack oferuje również serwer programistyczny, który ułatwia rozwój aplikacji w trakcie developmentu. Webpack używany jest np. w bibliotece create-react-app.


Moim zdaniem, na początek wystarczy wiedza ogólna o Webpacku. Narzędzie jest zbyt rozbudowane dla początkującego programisty, i nie ma sensu tracic czasu na zaawansowane bundlowanie aplikacji. Poza tym instnieje kilka innych rozwiązań na rynku, między innymi Parcel, który jest znacznie prostszy w obsłudze 👶. Za pomocą Parcela łatwo zbudujemy aplikację pisaną w React'cie.


Polecam poniższe materiały o Webpacku:


Typescript / Flow

Obecnie Typescript cieszy się bardzo dużą popularnością. Ale co to jest Typescript? Jest to nad-zbiór Javascript, który jest opcjonalnie statycznym typowanym językiem programowania. Pliki z kodem napisanym w Typescript'cie mają rozszerzenie .ts. Kod napisany w JS'ie będzie tak samo działał w TS'ie.


Spójrz na poniższy napisany w JS'ie:

const myAge = 26;

a tak może wyglądać kod napisany w TS'ie:

const myAge: number = 26;

Javascript jest to dynamiczny język programowania. JS nie wymaga, aby z góry określać typ wartości w zmiennej, ale TS już tego wymaga. Jeśli w TS'ie chciałbym przypisać do zmiennej, w której był string, np. number, to w tym komencie kompilator TS wywali błąd, że takie zachowanie jest niedopuszczalne. Ważna uwaga - błąd pojawi się już w kompilatorze, a nie dopiero w przeglądarce. Jest to najważniejsza zaleta TS'a. O błędzie dowiedmy się my, programiści, w trakcie pisania aplikacji, a nie klient w przeglądarce, który w piątek po południu zadzwoni do nas i powie, że w aplikacji coś wybuchło 💣. Takie bezpieczeństwo umożliwia Typescript 🎉.


Film na YT od Codeevolution o Typescript - https://youtu.be/WBPrJSw7yQA.


Projekty, projekty, projekty!


Projekty to najważniejsza część programowania i Twojej drogi zawodowej. Szczerze mówiąc, to projekty na Githubie mogą zagwarantować Ci pracę. Nie ma nic cenniejszego, od przekucia wiedzy w praktykę, robiąc własne projekty i wrzucając je na Githuba. Udostępnianie swoich projektów na Githubie, oraz tym samym swojej pracy (commity), jest najważniejsze co można zrobić, na początku swojej drogi do zostania programistą.


Polecam zrobić co najmniej 4 projekty, każdy z nich byłby jakby zakończeniem pewnego etapu nauki:

  1. Własna strona internetowa portfolio. Ten projekt polecam zrobić po opanowaniu HTML'a i CSS'a. Swoją stronę polecam zbudować tylko przy pomocy tych technologii*. Moim zdaniem nie ma sensu uczyć się preprocesora CSS ani tym bardziej Bootstrapa i przy ich pomocy zrobić własne portfolio, bo zwyczajnie szkoda na to czasu. Lepiej dobrze opanować podstawowe technologie, które nigdy nie wyjdą z mody. Fascynujące jest szukanie inspiracji. Nie spiesz się z tym. Poszukaj dokładnie w internecie i zbierz pomysły. Warto wzorować się na kimś, szczególnie, gdy na początku ma się małą wiedzę i umiejętności. Projekt mojej strony portfolio, został prawie w całości przekopiowany (design nie jest łatwy). Mimo wszystko i tak napisałem całą stronę od 0, dzięki czemu bardzo dużo się nauczyłem. Swoją gotową stronę internetową możesz wrzucić na Githuba, który oferuje darmowy hosting. Tak zrobiłem ze swoją stroną portfolio - https://github.com/Osky772/Portfolio. * - czy warto na tym etapie już znać Flexbox'a lub Grid'a? Nie wiem. Osobiście nie pisałem swojej strony portfolio, ani z Flexbox'em, ani z Grid'em. Jak chcesz możesz najpierw nauczyć się, którejś z tych technologii (Flexbox jest łatwiejszy i częściej używany).

  2. Strona internetowa z użyciem Flexbox'a i/lub Grid'a. Warto zrobić ładną stronkę z użyciem Flexbox'a i/lub Grid'a. Możesz wejść sobie na stronę https://dribbble.com/ lub https://www.awwwards.com/ wybrać coś, co Ci się spodoba i napisać taką stronę. Flexbox'a i tak trzeba znać, więc może warto użyć Grid'a?

  3. Projekt w czystym JS. Jak już ogarniesz trochę JS'a, łapanie elementów na stronie, pętle, kilka metod z przeglądarkowego API, to aby opanować te podstawowe umiejętności, trzeba napisać swój projekt. Przykładowe pomysły na aplikacje: zegar, kalkulator, gra (najbardziej ambitne i rozwijające), to-do lista, quiz. Osobiście napisałem grę, i na tej grze nauczyłem się programowania - https://github.com/Osky772/Speed10-JS-Game.

  4. Projekt z użyciem React'a. Aplikacja napisana w Reacie to kolejny must-have w twoim portfolio. Warto od razu napisać apkę z użyciem Reduxa, ale nie jest to konieczne (jak wcześniej wspomniałem, Redux Ci pomoże, jeśli twoja aplikacja będzie zawierała podstrony, wyskakujące okienka itd.). Warto też użyć bazy danych Firebase. Tutaj najlepiej dać ponieść się wyboraźni. Ja napisałem aplikację elektroniczny śpiewnik (https://github.com/Osky772/app-songbook), bo czegoś takiego potrzebowałem dla samego siebie. Połączyłem przyjemne z pożytecznym 🥳. Możesz też pomyśleć, o jakiejś aplikacji, którą sam chciałbyś używać. Jeśli nie wymyślisz nic kreatywanego, to wpisz sobie w Google, lub na YT: react projects, react projects firebase.

Wszystkie projekty musisz mieć na Githubie - twój profil musi mieć prawie codziennie zielone kwadraciki, to jest najlepsze i jedyne istotne CV.


Na zakończenie


Myślę, że nie wyczerpałem tematu, bo jest wiele do powiedzenia na każdy z nich, ale podzieliłem się tym co uważam za najistotniejsze, i co w moim przypadku zadziałało 💪.


Jeśli masz jakiekolwiek pytania, chcesz o coś zapytać, potrzebujesz pomocy w czymkolwiek, napisz do mnie na FB, lub w komentarzu, chętnie porozmawiam i pomogę 🙂. Życzę powodzenia i widzimy się w moich następnych wpisach! ✋


©2020 by DevDepends Oskar Kowalów