W poprzedniej części zajęliśmy się podstawami. Zaczęliśmy od zera i przeanalizowaliśmy czego warto się nauczyć, jeśli myślisz o karierze Front-End Developer’a. Skończyliśmy na zgłębianiu CSS, JavaScript zostawiając na kolejny artykuł.
To dziś.
Zapiski pochyłą linią to moje preferencje i uwagi, moje wybory na tej ścieżce, dygresje 😉
W artykule jest sporo nieprzetłumaczonych pojęć. Nie tłumaczę ich ponieważ sama używam angielskich odpowiedników. Nie chce wprowadzać nowych tłumaczeń.
Jeśli myślisz poważnie o programowaniu – angielski to nie dodatek, to obowiązek (o czym już wspominałam na blogu). Owszem, jeśli będziesz usilnie szukać, znajdziesz kilka osób, które powiedzą, że angielski nie jest potrzebny, że znajdziesz wiele materiałów po polsku. Ale wierz mi, wcześniej czy później to Ciebie zaboli, nie te osoby. Czytanie, pisanie, słuchanie – im lepiej opanujesz te umiejętności tym lepiej dla Ciebie.
Ja już nawet nie próbuje szukać odpowiedzi po polsku. Dla mnie najlepszym źródłem rozwiązań, pomocy jest angielskojęzyczne Stack Overflow. Jeśli odpowiedzi nie ma na Stack Overflow – dopiero wtedy możemy mówić o problemie 😉
Sama kiedy zaczynałam nie miałam angielskiego na wysokim poziomie. To było straszne. Wiem, że teraz jest dużo więcej przetłumaczonych treści. Ale nikt mnie nie przekona, że angielski nie jest potrzebny. Jest. I będzie.
Update 11.2020: Jeśli interesuje Cię kierunek Front-end, polecam się ze świeżo wydanym ebookiem w tym temacie! Więcej informacji znajdziesz klikając w poniższy obrazek 🙂
A teraz przejdźmy do sedna. Zgłębiamy…
JavaScript
W przypadku JavaScript jest jeszcze więcej zabawy (tj. wyborów). JavaScript bardzo szybko się zmienia. Żeby zrozumieć problem warto zajrzeć do artykułu „How it feels to learn JavaScript in 2016” albo jego podsumowania obrazkowego 😉
Na dzień dobry warto zapoznać się z czymś takim jak…
ECMAScript (ES)
Jest to standard obiektowego języka programowania, implementowany m.in. przez JavaScript.
Najnowszą, dostępną wersją jest już ECMAScript 7 (ES2016+). Jednak jej wsparcie wynosi na chwilę obecną 76% – także trzeba mocno uważać. Dużo szerzej wspieraną aktualnie wersją jest ECMAScript 6 (97% wsparcia).
Warto być na bieżąco ze zmianami wprowadzanymi przez ECMAScript.
Wszystkie zmiany wprowadzane przez ECMAScript 6
W przypadku ES 6 zdecydowanie warto zapoznać się z takimi zmianami jak:
- block-scoped variables
- arrow functions
- spread operator
- rest parameter
- destructuring assignment
- export/import
Package Manager
Jeśli myślisz na poważnie o Web Development’cie nie obędziesz się bez menadżerów paczek. Tutaj na pewno warto poznać npm. Coraz popularniejszy staje się również Yarn.
Pare artykułów w temacie (na start):
Prywatnie korzystam z npm, ale mam zamiar sprawdzić Yarn przy najbliższej możliwej okazji. Yarn jest (podobno) 3-4 razy szybszy niż npm. Nawet jeśli zdecydujesz się na Yarn warto poznać npm.
Task runners
Prędzej czy później będziesz potrzebować również pewnych narzędzi automatyzacji zadań. Wpisywanie dziesięciu komend za każdym razem gdy chcemy coś wykonać… mija się z celem. Dzięki narzędziom takim jak gulp, Grunt, npm scripts, możemy zautomatyzować część zadań. Uruchamiamy projekt jedną komendą, nie zastanawiając się, czy po drodze projekt będzie zbudowany, przetestowany, a kod zminifikowany i sprawdzony, itd.
Bo tak. Pisząc większy projekt nie siadasz tylko i nie kodujesz. To dużo więcej pracy. Piszesz dla niego testy, kod musi być zminifikowany (m.in. ze względu na szybkość działania aplikacji), przetestowany pod kątem działania, ale także pod kątem poprawności kodu (JSLint, CSSLint). Wyobrażasz sobie teraz uruchamiać to ręcznie przy każdej zmianie w aplikacji?
Co więcej – możesz tak skonfigurować te narzędzia (i nie tylko te), by przy każdym zapisie plików strona Twojej aplikacji odświeżała się. Możesz dzięki temu od razu zaobserwować rezultat wprowadzonych zmian i ewentualne problemy.
To wszystko i dużo więcej oferują narzędzia automatyzacji zadań.
Chcesz się dowiedzieć więcej nt. tych narzędzi?
Prywatnie korzystałam z wszystkich. Preferuje Gulp’a i jego chyba znam najlepiej. Ale w aktualnym projekcie korzystam z npm scripts. W połączeniu z Webpack’iem (o którym będzie za chwilę) jest to świetne rozwiązanie.
Module Loader/Bundler
W skrócie:
Module Loader jak nazwa wskazuje odpowiada za ładowanie modułów niezbędnych do działania bądź developmentu (tworzenia) aplikacji. Module Bundler – działa idealnie na odwrót – pakuje pliki naszego projektu do jednego (ew. kilku) pliku wynikowego.
Wśród nich chyba najpopularniejszy jest aktualnie Webpack (warto sprawdzić!). Poza tym mamy m.in. Require JS oraz Browserify.
Prywatnie zaczęłam swoją przygodę z Webpackiem dopiero przy okazji pisania aplikacji w ramach konkursu Daj się poznać. Ale raczej się zaprzyjaźnimy 😉
Testy
Niezbędne zwłaszcza w przypadku większych systemów.
Wyobrażasz sobie, że po każdej zmianie w kodzie masz teraz przeklikać całą aplikację, wszystkie scenariusze testowe i szukać czy wszystko na pewno działa? Ja też nie. Dlatego warto poznać środowiska testowe.
Wśród najpopularniejszych znajdziesz: Jest, Mocha, Jasmine, Enzyme.
Moim zdaniem testy to nie jest takie MUST HAVE dla Front-End Developer’a. Być może nie będziesz musiał ich nawet pisać. Nie mówię, że to nie jest ważne. Są nawet podejścia typu Test Driven Development (TDD), gdzie testy piszesz zanim napiszesz pierwszą linijkę kodu aplikacji. I takie podejście ma naprawdę wiele plusów.
Powiedzmy, że testy to coś co możesz zostawić na sam koniec nauki 😉
Wzorce projektowe
Rozwiązania pewnych typowych problemów. Zamiast odkrywać koło na nowo – korzystasz z pewnego sprawdzonego schematu rozwiązania. Oszczędzasz czas, poprawiasz jakość kodu. Ich poznanie może ułatwić Ci życie.
W temacie wzorców projektowych w JavaScript’cie polecam:
- Stoyan Stefanov, JavaScript. Wzorce (Helion, ceneo)
- Addy Osmani, Learning JavaScript Design Patterns (z darmowym dostępem online, Helion – ebook, ceneo)
No i w końcu …
Frameworki JS
Warto poznać przynajmniej jeden. Przy czym aktualnie kierowałabym się popularnością.
Moim zdaniem na starcie warto poznać podstawy, niekoniecznie wdrażać się mocno w dane rozwiązanie. Po pierwsze frameworki szybko się zmieniają. To nie jest tak, że jeśli teraz wejdziesz w Angular 2 i pójdziesz do pracy, gdzie nie będziesz z niego korzystać – tylko np. z React’a – to za dwa lata przejdziesz do pracy w Angular 2, bo go znasz. Do tego czasu wiele może się zmienić.
Wierzę, że jeśli będziesz na etapie wyboru framework’ów do nauki sam znajdziesz informacje w temacie: co wybrać. To nie jest łatwe pytanie.
Wśród najpopularniejszych framework’ów JS znajdziesz:
Przy czym zaryzykuje stwierdzenie, że może już nie opłacać się uczyć Angular JS 1.x. Choć na pewno migracja projektów jeszcze chwilę potrwa. Dobrym pytaniem jest: migracja gdzie? Kilka miesięcy temu wyszedł Angular 2, a niecały miesiąc temu Angular 4.
Często porównywany z Angularem. Raczej w kontekście Angular vs React. W sumie nie wiem dlaczego ponieważ są nieporównywalne. No dobra, wiem. Ponieważ wiele osób poprzez React rozumie idący za nim ekosystem, m.in. Redux czy MobX.
Na temat React’a oraz Redux’a pisałam już trochę na blogu (tagi: react, redux). Wykorzystuje go w mojej aplikacji konkursowej – Social Media Planner (DSP 2017).
itd.
Framework’ów JavaScriptowych jest naprawdę wiele. Pojawiają się i znikają. Ciężko za tym nadążyć.
Na starcie warto nauczyć się podstaw wybranego framework’a – może stworzyć jakąś własną aplikację w oparciu o niego? Nie warto się specjalizować, jeśli jeszcze nie wiesz w jakim kierunku pójdziesz, do jakiego projektu trafisz.
Bonus:
No dobra, no to jak teraz wybrać czego mam się uczyć? Jest tyle opcji!
Pewną podpowiedzią dla Ciebie może być kilka stron i dokumentów.
- The State of JavaScript 2016
- Stack Overflow Developer Survey Results 2017 – zwłaszcza zakładka Technology (jednak musisz ją odfiltrować od pozycji w innych językach programowania niż JavaScript)
Możesz np. zajrzeć do Correlated Technologies i zobaczyć jak łączą się pewne technologie.
Nie powiem, że ze wszystkim się tu zgadzam, ale został on wygenerowany na podstawie odpowiedzi wielu respondentów tegorocznej ankiety przeprowadzonej przez Stack Overflow (pisałam trochę na jej temat w artykule: „Zaczynasz naukę programowania? Na co warto zwrócić uwagę w Stack Overflow Developer Survey Results 2017”).
Widzimy np. że JavaScript (język programowania) łączy się z takimi frameworkami jak Angular JS, React czy Node JS. Angular i Node łączą się z kolei z bazą danych – MongoDB. W zasadzie MongoDB + Angular / React + Node + Express (którego akurat nie widzimy na rysunku) tworzą dwa z popularniejszych frameworków Full Stack’owych (odpowiednio MEAN oraz MERN).
Z drugiej strony widzimy, że JavaScript łączy się z PHP (język programowania), który łączy się z kolei z WordPressem. W zasadzie jeśli chcesz pisać coś pod WP (np. motyw) nie obędziesz się bez znajomości PHP.
Dziś opisywałam Frontend. Node JS oraz PHP zostaną jeszcze poruszone w ramach artykułu o Backendzie. Bo to dwie spośród technologii Backend’owych 😉
W temacie nauki Frontend’u polecam również Front-End Developer Handbook 2017. Nie przerażajcie się jednak ilością treści. Zacznijcie. Reszta przyjdzie z czasem.
Ciekawie wygląda również strona JavaScript The Right Way. Dużo przydatnych materiałów!
To tyle na dzisiaj! Mam nadzieję, że wpis okaże się pomocny!
Jeśli masz jakieś pytania – śmiało zadaj je w komentarzu 🙂
Wszelkie uwagi odnośnie treści artykułu mile widziane.
