JavaScript logo (openclipart.org)

Jak zostać programistą JavaScript?

Na początku 2015 roku (ponad 4 lata temu) starałem się w moim poście odpowiedzieć na pytanie Jak zostać programistą Java? Niedawno zostałem wywołany do odpowiedzi na podobne pytanie, tylko dotyczące języka JavaScript. I muszę przyznać, znalazłem się w sporym kłopocie…

Stało się tak z kilku powodów. Po pierwsze JavaScript na początku swojego istnienia traktowany był jak uproszczona „wersja” języka Java, przeznaczony tylko do „ożywiania” statycznych stron w języku HTML. Jednak obecnie zakres jego zastosowań może już przewyższać zastosowania Javy, łącznie z implementacją systemów serwerowych (tzw. backend). Dzisiejsze bardzo wygodne działanie popularnych dużych serwisów internetowych (np. FaceBook) czy aplikacji WWW (np. Gmail) zawdzięczamy właśnie JavaScript’owi.

Po drugie, obecna forma wyrazu języka JavaScript i wsparcie podejścia funkcyjnego dorównała, a nawet wyprzedziła na pewien czas Javę, która z opóźnieniem dodała te elementy do swojej składni (dopiero w wersji 8).

Po trzecie, mnogość frameworków, systemów budowania i innych bibliotek przytłacza ilością, w szczególności w stosunku do najpopularniejszego i prostego stosu w Javie: Spring, Hibernate i Gradle lub Maven.

Po czwarte, i to jest przedmiotem tego artykułu, ta cała mnogość wersji i narzędzi sprawa że ciężko określić zestaw wiedzy, dzięki której można by powiedzieć że zna się cały JavaScript…

Krótka historia JavaScript (przydługi wstęp)

Gdy JavaScript powstawał, to do jego opanowania wystarczyła znajomość struktury języka HTML (elementów DOM) i znajomość polecenia document.getElementByID(...), bo pozwalało na wykonanie większości operacji na stronie internetowej. Umiejętność rozróżnienia pomiędzy wyrażeniami == i === oznaczało już bycie ekspertem :-).

Nadal działający produkcyjnie kod JavaScript z początku lat dwutysięcznych :-)
Nadal działający produkcyjnie kod JavaScript z początku lat dwutysięcznych 🙂

Później pojawiła się biblioteka jQuery, która przykrywała różnice pomiędzy rodzajami i wersjami przeglądarek i dodała funkcje upraszczające popularne zastosowania. Jednak kilka lat temu nastała era przenoszenia logiki renderowania interfejsu użytkownika ze strony serwerowej (JSP, WebMacro, Velocity, Thymeleaf, itp.) na stronę przeglądarki w postaci tzw. SPA (ang. Single Page Applications). Wtedy nagle JavaScript stał się pierwszoplanowym językiem implementacji aplikacji WWW, a wraz z nim pojawił się szereg frameworków, które miały ułatwić to zadanie. Po różnych perturbacjach i okresie w którym „codziennie powstawał jeden nowy framework JS” rynek został zdominowany przez trzy wiodące rozwiązania, które można dzisiaj postrzegać jako pewien standard branżowy: Angular (promowany przez Google), React (promowany przez FaceBook) i Vue.js.

Logika aplikacji webowej we współczesnym frameworku Angular zaimplementowana w języku TypeScript.
Logika aplikacji webowej we współczesnym frameworku Angular zaimplementowana w języku TypeScript.

W międzyczasie JavaScript stał się na tyle ogólnym językiem, że możliwe było zastosowanie go poza przeglądarką. W szczególności używający go ambitniejsi Front-End Developerzy (wcześniej nazywani „webmasterami”) uznali że można by użyć go do pisania logiki biznesowej po stronie serwera (zastępując np. PHP czy Java), bo właściwie wystarczyło dodać bibliotekę do komunikacji z bazą i serwer aplikacyjny – tak powstał Node.js. Dzięki temu Ci sami ludzie mogli pisać kompletną aplikacje webową.

Po co uczyć się JavaScript?

Zanim przejdę do sposobów nauczania, trzeba sobie zadać pytanie co już umiemy i po co chcemy się uczyć.

Stan umiejętności można podzielić na dwa zasadnicze przypadki: gdy znamy jakiś inny język programowania (np. Java), mamy wykształcenie techniczne i mamy doświadczenie w inżynierii oprogramowania (algorytmy, programowanie obiektowe / funkcyjne, repozytoria kodu, obsługa IDE, systemy budowania, czysty kod, itd.) i chcemy tylko poznać różnice i odpowiedniki stosowane w JavaScript. Drugi przypadek, gdy dopiero zaczynamy uczyć się programować, jest trudniejszy, bo mimo że JavaScript jest postrzegany jako język prosty to nauczenia, to żeby znaleźć pierwszą płatną pracę, to i tak trzeba opanować podstawy inżynierii oprogramowania – poruszę ten temat na końcu artykułu.

Druga ważna kwestia, to po co chcemy się uczyć. Najczęstszymi przypadkami z którymi się spotkałem to:

  • w projekcie w którym pracujemy jest już cześć front-end’u, którą z jakiś powodów musimy lub chcemy zacząć rozwijać lub chociaż wiedzieć co się tam dzieje,
  • planujemy przejść do nowego projektu, gdzie będziemy pracować także przy części front-end’owej,
  • wcześniej nie programowaliśmy, chcemy posiąść tą kompetencje i znaleźć pracę w tym zawodzie.

W dwóch pierwszych przypadkach sytuacja jest dosyć prosta, bo wybór technologii został już pewnie podjęty i trzeba rozpocząć naukę ścieżką uczenia wybranego frameworku. W ostatnim przypadku sytuacja jest nieco trudniejsza, bo nieefektywnie jest uczyć się wszystkich frameworków – trzeba dokonać strategicznego wyboru do czego chcemy zmierzać.

Który framework JavaScript wybrać?

Jak wspomniałem wcześniej, na rynku dominują trzy popularne frameworki: Angular, React i Vue.js. Jeżeli nie mamy żadnych preferencji wstępnych (np. że firma w której pracujemy lub znajomi używają), to moim zdaniem decyzje można podjąć na jeden z poniższych sposobów:

  • sprawdzić czego szuka większość programistów przez Google przy pomocy usługi Google Trends – na czołówkę wysuwa się React:
Wyniki wyszukiwania nazw popularnych frameworków w Google.
Wyniki wyszukiwania nazw popularnych frameworków w Google.
  • sprawdzić jakie są statystyki lubienia, nielubienia lub chęci nauczenia (tzw. „wanted”) w poszczególnych technologiach, np. przy pomocy raportu stackoverflow Developer Survey Results 2018 – na czołówkę wysuwa się React:
Raport stackoverflow Developer Survey Results 2018
Raport stackoverflow Developer Survey Results 2018
  • sprawdzić czego najłatwiej się nauczyć – tutaj nie ma jednoznacznej odpowiedzi, wiele głosów wskazuje na Vue.js. Ja z kolei wskazywałbym na Angulara ze względu na kompletność i spójność rozwiązania, w przeciwieństwie do React’a, w którym trzeba umiejętnie wybrać i zrozumieć więcej niezależnych komponentów,
  • sprawdzić jakie są oczekiwania lokalnego rynku pracy :-), np. dzisiaj na moim ulubionym nofluffjobs.com wybierając typ pracy „front-end” i miasto „Warszawa” dostajemy 49 ofert, w których wymagania znajomości jako must-have lub nice-to-have pojawiają się odpowiednio Angular 35 razy, React: 30 razy i Vue.js 8 razy:
Oferty pracy front-end w Warszawie na portalu https://nofluffjobs.com
Oferty pracy front-end w Warszawie na portalu https://nofluffjobs.co

Dla chętnych polecam jeszcze doczytanie ciekawego artykułu The Ultimate Guide to JavaScript Frameworks, w którym bardziej szczegółowo opisane są wymienione przeze mnie popularne frameworki oraz bardzo dużo innych – mniej popularnych lub ważnych ze względów historycznych.

Ścieżki uczenia (tzw. road map)

Przy ambitnym podejściu powinniśmy zapoznać się z kolejnymi road-mapami, czyli ścieżkami jakie elementy i w jakiej kolejności powinniśmy poznać. Najlepszym wstępem jaki znalazłem jest „Frontend Path & Courses for Learning Front End” z artykułu The 2019 Web Developer Roadmap:

„Frontend Path & Courses for Learning Front End” z artykułu The 2019 Web Developer Roadmap

Na powyższej grafice idealnie widać że wybór właściwego frameworku (lewy dolny róg) to dopiero daleki element na ścieżce uczenia. Taki scenariusz możemy wybrać jeżeli najpierw chcemy nauczyć się podstaw, a dopiero potem skupić na konkretnym rozwiązaniu.

Ze swojego doświadczenia wiem, że dobrze jest szybko mieć „namacalny efekt” swojej nauki, czyli poznać podstawy któregoś z frameworków i szybko stworzyć jakąś prostą aplikacje, a dopiero potem pogłębiać podstawy. Lubię tak robić, ponieważ zauważyłem że zbyt długa nauka podstaw powoduje spadek entuzjazmu ;-), więc uznaję że lepiej przerwać naukę mając coś działającego ale braki w podstawach, niż mieć podstawy i nie zrobić niczego działającego (pewnie wiele osób tu się ze mną nie zgodzi…).

Przyjmując jako ważniejszy cel nauczenie się konkretnego frameworku można przyjrzeć się ich własnym road-mapom:

React Developer Roadmap (Adam Gołąb)
Roadmap to become a Vue.js developer in 2019 (Flavio Copes)
Roadmap to become a Vue.js developer in 2019 (Flavio Copes)

Co ciekawe, nie udało mi się znaleźć podobnego road-map dla Angulara, więc trzeba przyjąć ścieżkę z pierwszej mapy „Frontend Path & Courses for Learning Front End” odrzucając pozostałe frameworki.

Jak się uczyć

Jak pokazałem wyżej, ilość wiedzy z którą należy się zapoznać jest ogromna. Żeby było jeszcze trudniej, to wersje oraz zależności pomiędzy poszczególnymi narzędziami i bibliotekami bardzo szybko się zmieniają i materiały sprzed roku potrafią być już nieaktualne.

Sposoby uczenia się które ja znam i preferuję, to w tej kolejności:

  • Książki – wychodzę z założenia że ktoś pisząc książkę zadał sobie trud aby dobrze przemyśleć i zorganizować treść, a wydawca jeszcze to sprawdził. Osobiście preferuję książki wydawnictwa Manning znanego z serii „… in Action” (również w wersji „MEAP”, czyli dostępnych już w czasie pisania), np. „Angular Development with TypeScript”, którą opisałem w tej recenzji. Drugim wydawnictwem które mogę polecić jest O’reilly, w szczególności książkę Learning React Functional Web Development with React and Redux. Książką której (jeszcze) nie przeczytałem ale gorąco polecał mi kolega który znając wcześniej Javę uczył się JavaScript jest Functional Programming in JavaScript. Zaletą książek jest że można je czytać wszędzie (szczególnie używając Kindle’a lub podobnego czytnika), minusami są szybka nieaktualność, trudność przepisywania fragmentów kodu, obszerność oraz mnogość oferty i konieczność samodzielnego wyboru ścieżki uczenia.
  • Tutoriale – każdy framework ma swój zestaw dokumentacji w wersji online. Zaletami takiego rozwiązania jest najlepsza ścieżka uczenia do wybranego frameworku, aktualność (jeżeli jest utrzymywana), przykłady online, możliwość kopiowania fragmentów kodu, hiperlinki pomiędzy tematami i często komentarze innych czytelników. Wadami częstą są: niespójność (różne obszary są rozwijane w różnym tempie, niektóre w ogóle nie utrzymywane i stają się nieaktualne), trudność w przeczytaniu od początku do końca, konieczność czytania online, często brak dobrego wytłumaczenia szerszego kontekstu.
  • Kursy online – popularne platformy e-learningowe, takie jak Udemy czy Coursera posiadają szeroką ofertę szkoleń także dla JavaScript i frameworków. Zaletą jest że takie platformy zapewniają spójną metodykę i logiczną ścieżkę kursów w zależności od poziomu wiedzy, ponadto niektóre kursy kończą się certyfikatem który dla osób bez innego doświadczenia może być ważnym (bo jedynym) wpisem w CV. Wadą jest konieczność nauki zgodnie z wybraną metodyką, koszt oraz mnogość oferty, w której może być trudno znaleźć wartościowe pozycje.
  • Bootcampy – w ostatnich latach, jako odpowiedź na olbrzymią ilość ofert pracy oraz zarobki w IT pojawiło się wiele firm, które w obiecują wyszkolenie także programisty front-end w trybie stacjonarnym (wieczorowym lub weekendowym) lub wyłącznie on-line, np.: InfoShare Academy (10 900 zł, 320h), Coders Lab (11 700 zł, 470h), Kodilla (6 495 zł, 360h) , Coders Trust (6 200 zł, 260h) czy Kodołamacz (9 600 zł, 256h). Jest to oferta zdecydowania najdroższa, w niektórych przypadkach wymagająca osobistego uczestnictwa w warsztatach (kłopotliwe dla uczestników z mniejszych miejscowości) ale z drugiej strony to metoda obiecująca najlepsze uporządkowanie materiałów i dyscypliny uczenia przez wyznaczonego osobistego mentora. Poza tym zainwestowanie takiej sumy niemal gwarantuje motywację ;-). Takie rozwiązanie sugerowałbym osobom dopiero zaczynającym przygodę z programowaniem, w szczególności dlatego że w zakresie szkolenia są podstawy inżynierii oprogramowania, współpracy w zespole, zarządzania projektem – elementy znacząco ułatwiające przejście procesu rekrutacyjnego oraz przeżycie pierwszych tygodni w prawdziwym zespole.

Podsumowanie

Ilość i szybkość zmian technologii i skomplikowanie ścieżek uczenia powodują że „nauczenie się JavaScript” jest zdecydowanie trudniejszym zadaniem niż nauczenie się programowania w języku Java. Jest to trochę jak jadący pociąg: trzeba się rozpędzić, podbiec, wskoczyć i jechać w nim próbując nie wypaść. Czyli po nauczeniu się wybranej technologii trzeba szybko zacząć prace w projekcie który ją wykorzystuje, na bieżąco douczać się i – jeżeli projekt się nie rozwija – wyczuć moment w którym trzeba uczyć się nowych rzeczy i angażować w kolejny projekt. Bo z drugiej strony nauczenie się technologii w której od razu nie zaczniemy pracować spowoduje że szybko zapomnimy tą wiedzę i/lub szybko stanie się nieaktualna.

O autorze

Marek Berkan Marek Berkan: programista, entuzjasta tworzenia oprogramowania, zarządzania zespołami technicznymi. Prywatnie motocyklista, kolarz MTB, biegacz, żeglarz, rekreacyjny wspinacz, zamiłowany turysta. Witryny: , , .

Jeden komentarz do “Jak zostać programistą JavaScript?

  1. Adam

    Gdybym wiedział wcześniej jak dużo różnych technologi musi znać web Developer napewno bym pozostał na ścieżce C#

    Odpowiedz

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *