Jak zostać programistą front-end w 2022 roku?

Cześć, w tym wpisie przedstawię plan działania który ułatwi Ci zostanie frontendowcem :). 

Trochę o zawodzie

Frontendowiec zajmuje się warstwą wizualną aplikacji webowych... ale nie tylko. Standardowe zadania w pracy są związane z tworzeniem interface użytkownika. Składają się na nie:

• Implementowanie nowych funkcjonalności i poprawianie / zmienianie już istniejącego kodu
• Stylowanie - czyli używanie CSS do nadawania odpowiedniego wyglądu
• Opracowanie logiki związanej z wyświetlaniem danych pobranych z backendu
• Dbanie o to, by do backendu trafiały odpowiednie dane przez wprowadzanie walidacji
• W bardziej świadomych firmach - dbanie o dobry UX i ułatwianie korzystania z aplikacji osobom niepełnosprawnym

Z tym wszystkim wiąże się też współpraca z innymi osobami w teamie i praca z systemem zarządzaniem zadaniami, a także uczestniczenie w spotkaniach. Praca na froncie daje dużo satysfakcji, ponieważ można od razu oglądać rezultaty swoich prac na ekranie. Wymagana jest znajomość angielskiego pozwalająca przynajmniej na czytanie dokumentacji.

Dopiero zaczynam i chcę zostać frontendowcem - co robić?

Powinieneś w bardzo dobrym stopniu opanować trzy technologie - CSS, HTML i JS. 

CSS

Wstępem do stylowania może być tutorial od MDN lub od FreeCodeCamp. CSS nie jest językiem programowania i charakteryzuje go bardzo duża ilość reguł, które należy poznać by z nim skutecznie pracować. Pracując w JS, możesz zdebuggować kod, w CSS niektóre rzeczy musisz po prostu wiedzieć. Koniecznie musisz przyłożyć się do poznania takich zagadnień, jak:

• Specyficzność
• Typografia
• Responsive Web Design
• FlexBox i Grid (które zastępują tworzenie layoutu za pomocą float)
• Różne sposoby określania box-sizing

HTML

HTML to "szkielet" strony, który zawiera odpowiednio podzielone na sekcje dane. W praktyce znajomość HTML to głównie wiedza na temat najczęściej używanych znaczników, umiejętność pobierania danych z formularzy, linkowania zasobów, skryptów. Wydaje mi się, że HTML to najprostsza technologia z tych trzech. Dobry wstęp znajdziesz na FreeCodeCamp czy na MDN. Nie zaszkodzi też przeczytać książki na temat HTML, która ugruntuje Twoją wiedzę. 

JS

Wchodzimy w "prawdziwe" programowanie. Javascript pozwala na sterowanie logiką aplikacji. Jest to język który dynamicznie się rozwija, posiada mnóstwo frameworków i bibliotek. Niemniej jednak powinieneś skupić się na nauce podstaw Javascriptu i opanować go przynajmniej w takim stopniu, który pozwoli Ci rozwiązywać problemy programistyczne na przykład na exercism.org czy Codewars.

Wejście w JS będzie znacznie prostsze, jeśli programowałeś już w jakimś innym języku. 

Proponuję Ci przerobienie od deski do deski jakiejś nowej książki wprowadzającej do JS. Może to być na przykład cykl YDKJS (You don't know JS) od Kyle'a Simpsona, albo książka Head First, ale uzupełniona wiedzą o nowych rzeczach które weszły do JS po 2015 roku. Możesz też przerobić duży tutorial https://javascript.info, który jest de facto książką online.

Dlaczego proponuję Ci przerobienie całej książki? Tylko w taki sposób, będziesz miał pełny wgląd na temat tego co oferuje język.

Dodatkowo wypada znać:

Git

Konieczny do pracy z kodem. Praca z gitem jest prosta, do podstawowych zadań wystarczy obejrzeć kilka nagrań dotyczących commitowania.

Biblioteki CSS

Ułatwiają stylowanie, jednocześnie wymuszając określoną strukturę strony zdefiniowaną przeważnie przez klasy css. Przykłady - Bootstrap, Bulma. Polecałbym zapoznanie się z nimi po tym, jak opanujesz przynajmniej część teorii dotyczącej CSS. 

Projekty do wykonania

Sama nauka teorii nie ma większego sensu, dlatego równolegle powinieneś pracować nad swoimi projektami. Załóż konto na Githubie i wrzucaj tam kod, na forach programistycznych możesz poprosić o pomoc w rozwiązywaniu problemów czy o code review.

Aby dobrze poznać HTML i CSS proponuję Ci wpisanie w Google frazy 'free adobe xd website templates' i następnie zakodowanie kilku z nich tak, aby dobrze wyświetlały się zarówno na dużym, jak i małym ekranie. Gdyby ten tutorial powstawał w 2015 roku, polecałbym ściąganie darmowych plików psd, jednak od wielu lat nie spotkałem się z designem zrobionym w Photoshopie.

To co zakodujesz, umieszczasz na Githubie i dajesz społeczności na grupach Facebookowych lub forach do sprawdzenia. Błędy poprawiasz, robisz kolejne, coraz lepsze projekty.

Gdy zrobisz projekt wykorzystujący tylko CSS i HTML, możesz przejść na wyższy poziom skomplikowania, używając w kolejnym SCSS, dodając jakieś walidacje do formularzy czy obsługując ich wysyłkę w JS.  

Ogólnie, polecam robienie projektów wykorzystujących formularze, zakładki, okna dialogowe, sekcje zwijane, czyli wszystko co jest bardziej skomplikowane niż zwykłe divy z tekstem.

Warto popróbować dodawanie i usuwanie elementów do drzewa dom z użyciem "zwykłego" JS. 

Jak już sobie dobrze radzisz z projektami tego typu, możesz spróbować się z technologiami ułatwiającymi tworzenie dynamicznych stron, czyli aplikacji webowych. Tutaj 3 główne technologie do wyboru:

• React
• Angular
• Vue

Wydaje mi się, że najłatwiejsze jest wejście w Reacta. Angular posiada bardzo dużo funkcji, wykorzystuje też TS i RXJS, które to technologie też powinieneś poznać. Aby ułatwić sobie pracę z wyżej wymienionymi technologiami, zainstaluj sobie z NPM narzędzia angular-cli lub create-react-app. Na temat Vue się nie wypowiem bo pisałem w nim tylko hello worldy :)

Reacta i Angulara najlepiej jest uczyć się z oficjalnej dokumentacji, oraz przez robienie projektów. 

Najbardziej oklepane to lista todo czy aplikacja pogodowa, która łączy się z wystawionym api. Ogólnie każdy projekt wykorzystujący api będzie ok. Być może zechcesz nauczyć się też Node (lub innej technologii backendowej) i baz danych, co pozwoli Ci na stworzenie "prawdziwego" projektu od A do Z. 

Najwięcej nauczysz się podczas tworzenia rozbudowanego projektu, zawierającego na przykład logowanie (przez hasło i login lub Facebooka, Google), wyświetlanie paginowanych danych, obsługę ról, walidację formularzy, ustawienia użytkownika i tak dalej. Dobrym pomysłem jest próba stworzenia aplikacji klonującej funkcje strony już istniejącej, na przykład Reddita. Można też napisać aplikację rozwiązującą jakiś codzienny problem. Jeśli taki projekt realizowałbyś np. z backendowcem, byłby to świetny wpis w CV.

Tych informacji jest strasznie dużo, jak spamiętać wszystko czego się nauczyłem i jak dzielić czas na naukę?

Jeśli poważnie myślisz o pracy jako frontendowiec, Twoim celem powinno być znalezienie pracy. Z tego powodu, warto podczas nauki zapisywać sobie rzeczy, które mogą paść podczas rozmowy o pracę. Co to znaczy zapisywać? Gdy napotykasz na nową rzecz, zrób sobie fiszkę w programie Anki. Więcej na ten temat tutaj. Początkowo podczas nauki będziesz robił bardzo duży progres, jednak pojawią się też problemy z tym, że wszystko Ci się miesza. 

Jak mówili Rzymianie, repetition est mater studiorum - powtarzanie jest matką nauki. Regularnie wracaj więc do materiałów, które przerobiłeś jakiś czas temu.

Aby się nie pogubić aż tak bardzo w nauce, rzeczy przerobione w sieci zapisuj sobie w formie mind-mapy. Poniżej moja mapa z MindMeister.

Warto uczyć się ze źródeł dobrej jakości, takich, jak MDN, oficjalne tutoriale od twórców bibliotek czy frameworków, dobre książki. Złe źródła to np. W3Schools, www.tutorialspoint.com i inne strony przedstawiające tematy "po łebkach". Polecam też zapisanie się na kilka newsletterów dotyczących przerabianych technologii, co pozwoli Ci być na bieżąco z nowościami.

Czy powinienem kupować płatne kursy?

Moim zdaniem to strata pieniędzy. Kursy bardzo często przedstawiają tą samą wiedzę jaką znajdziesz w zwykłej dokumentacji lub tutorialu, którą możesz równie łatwo znaleźć w kursie za darmo na YouTube.