Ten artykuł jest częścią serii Kierunek: Web Developer (2 / 2)

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.

 

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:

 

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:

 

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:

Angular

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.

React JS

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).

Vue JS

Ember JS

Backbone JS

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.

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.

Series Navigation<< Kierunek: Web Developer – Wstęp do serii + Frontend (cz. I)
  • Adam Pi

    Mimo, że chcę zostać jr. Front-end developerem, to duża część wiedzy z artykułu jest dla mnie nowa. Bardzo podoba mi się struktura twojego posta, jasno i przejrzyście. Bardzo sprawnie przechodzi się do rzeczy ważniejszych i adekwatnie trudniejszych. Cykl tych artykułów jest więc dla mnie bezcenny w pierwszych krokach. Pozwolę sobie dodać twojego bloga do ulubionych – tylko pisz regularnie 🙂