Droga frontend-developera w 2017r.

Dzisiajszy wpis miał być o czymś innym, ale kilka dni temu jeden z czytelników bloga napisał do mnie wiadomość z pytaniem (w skrócie) „jaką drogą iść jako frontend-developer?„.

Okej, zróbmy w takim razie mały przegląd obecnych technologii, które cieszą się na rynku pracy większym zainteresowaniem. Jest 6 styczeń, więc pod uwagę weźmy „trendy” z 2016 roku, które dobrze się zapowiadają.

Edytor

Temat trochę drażliwy ponieważ każdy ma swój ulubiony. Osobiście polecam kilka (chyba, że działasz nad wielkimi projektami i zwykły edytor nie wystarczy, wtedy bez problemu możesz szukać jakiś IDE):

Atom – który opisałem dosyć szczegółowo w 3 filmach -> Atom – najlepszy edytor dla Web Developerów [wideo]
Brackets.io
Sublime Text (płatny przy komercyjnym zastosowaniu)

Krok 1 – podstawy Frontend-developera

Zacznijmy od podstaw. Dopiero bierzesz się za naukę frontendu? Oto co musisz umieć, całkowite podstawy:

• HTML5 – myślę, że już nikt nie uczy się xHTML ale jeśli nie jesteś pewny to wróć do wpisu Podstawy HTML5 oraz Czy HTML5 jest naprawdę taki fajny?
• CSS 
• JavaScript – czyli coś co wprowadza na stronę troche dynamiki. Tutaj zaczyna dziać się magia.

Wiele osób mówi, że czyste JS jest niepotrzebne, że lepiej od razu wziąć się za jQuery. Ja nie jestem do tego przekonany. JS będzie z pewnością istniało dłużej niż jQuery, zresztą znająć czysty JS nie musisz angażować różnych bibliotek/frameworków do prostych czynności.
Nawet jeśli myślisz, że będziesz pracować na samych frameworkach, to warto znać JS chociaż na jakimś niewygórowanym poziomie.

Krok 2 – kilka usprawnień:

Usprawniamy CSS: Less/Sass

Różnice pomiędzy nimi opisałem tutaj -> CSS, LESS, SASS/SCSS, który wybrać? W skrócie, dobrze zacząć do Lessa ponieważ jest prosty i maksymalnie zbliżony budową do CSS, następnie do większych projektów dobrze zaprząc Sassa, który ma znacznie większe możliwości.

Usprawniamy HTML/CSS/JS: Bootstrap

mega popularny i wcale się nie dziwię ponieważ znacznie przyśpiesza pracę. Nawet nie chodzi o wszystkie klasy, ostylowane przyciski czy tabele. Bardzo istotne jest tutaj budowanie strony na siatce (tak jak się je zazwyczaj projektuje w Photoshopie), oraz załatwienie 80% jeśli chodzi o przystosowanie do urządzeń mobilnych.

Usprawniamy JS: jQuery

czyli najpopularniejsza biblioteka JS. Zawiera gotowe funkcje najczęściej wykonywanych operacji. Dzięki temu zamiast pisać 50 linijek kodu aby coś obsłużyć, możesz skorzystać z kilku funkcji, które prawdopodobnie są już napisane.

__

Sprawa z jQuery w niektórych kręgach zaczyna robić się trochę kłopotliwa. Ostatnimi czasy powstało tyle świetnych frameworków, że o jQuery mówi się z mniejszym entuzjazmem. W dalszym ciągu jest używane przez ogromną ilość osób i firm, szczególnie u nas, dlatego warto go znać. Jednak nie byłbym takim fanem, aby próbować wyuczyć się go do perfekcji, zaniedbując przez to inne biblioteki/frameworki.

Krok 3 – frameworki JS

Ostatnimi czasy frameworki wprowadzające wzorzec MVC do języka JavaScript zrobiły furorę. Bardzo dobrze ponieważ jeszcze bardziej oddziela to stronę kliencką od serwerowej, ułatwia testowanie kodu czy niejako oddziela samą warstwę DOM od części, która nią manipulują.

AngularJS – obecnie bardzo popularny framework wspierany przez Google. Bardzo uproszczając, można powiedzieć, że posiada taki lepszy kompilator HTMLa, dzięki czemu możemy budować w łatwiejszy sposób, bardziej dynamiczne aplikacje.

ReactJS – co prawda jest to biblioteka jednak jej działanie często jest porównywane do wzorca MVC. Rozwijany przez developerów znanych portali (Facebook, Instagram), co daje nam jakąś pewność, że będzie rozwijany (podobnie jak Angular). Stosowany tam gdzie wymagana jest dynamiczana zmiana danych (znowu tak samo jak Angular), przede wszystkim na większych stronach. Obecnie jest to chyba nawet lepsza alternetywa dla Angulara, jednak na naszym rynku pracy raczej Angular jest częściej wymagany.

Krok 4 – testy

Wspomniałem wcześniej, że nowe frameworki i biblioteki JS wspomagają testy to warto z czasem te testwy wprowadzić. Tutaj bez rozpisywania. Wybrać możemy kilka popularniejszych rozwiązań:

Enzyme
Mocha
Karma

Dodatkowo: automatyzacja pracy i zarządzanie kodem

Warto dorzucić kilka technologii, które będą bardzo przydatne. Umieściłem je na końcu ponieważ nie ma najlepszego momentu na ich naukę. Dobrze jest się za nie wziąć wtedy gdy będziesz czuł, że coś takiego będzie już przydatne.

Gulp.js, Grunt.js – niezależnie który wybierzesz, oba służą do automatyzacji pracy (chociaż Gulp jest raczej prostszy). Czyli… potrafią wykonywać takie zadania jak, np. minifikowanie i łączenie skryptów oraz plików css, kompilować pliki Sass, odświeżać okno przeglądarki przy wprowadzaniu zmian na stronie czy uruchamiać serwer do podglądu pracy.

Webpack (JS), Browserify  (JS) – przede wszystkim pozwala zachować porządek w kodzie i rozbić go na mniejsze moduły, które są ładowane na żądanie. Dzięki temu możemy ładować na stronie tylko wybrane części kodu w mniejszych ilościach plików (co przyśpiesza ładowanie strony).

A co z Node.js?

Postanowiłem, że nie opiszę tutaj Noda, mimo iż opiera się na języku JavaScipt to jednak  w dalszym ciągu należy pamiętać, jest to coś, co ma działać po stronie serwera – czyli w backendzie.
Samego Node.js oczywiście dobrze znać, ponieważ w wielu wspomnianych wcześniej technologiach jest on potrzebny.

Jesteście innego zdania? Piszcie śmiało w komentarzach czego wg was, warto uczyć się w rozpoczynającym się roku! 🙂