W tym wpisie chciałem zająć się czymś troszkę luźniejszym ale też związanym z programowaniem i pracą programisty. Narzędzia z jakimi pracuję wydawają mi się właśnie takim luźniejszym tematem.
Zacznijmy od JS -a
Na co dzień zajmuję się tworzeniem różnych rozwiązań w JavaScripcie co mam nadzieję jest oczywiste dla kogoś, kto nie trafił tutaj pierwszy raz. Dlatego też większość używanych przeze mnie narzędzi dotyczyło będzie właśnie JS -a.
Ale na początek…. Git
Pokuszę się o stwierdzenie, że jest to najpopularniejszy obecnie system kontroli wersji. Na jego bazie powstało mnóstwo serwisów do przechowywania repozytoriów online. Jak ogromna ilość ludzi korzysta z tego systemu można zobaczyć na przykład po statystykach serwisu GitHub za 2017 rok, które można znaleźć tutaj. Jest to podstawowe narzędzie każdego programisty. Nie tylko frontendowca. Nie ważne w jakim języku piszesz, jakich bibliotek używasz czy co robisz. Zawsze w pewnym momencie Twojej kariery trafisz na gita. Lepiej dla Ciebie żeby było to jak najwcześniej. W Internecie można trafić na wiele dobrych kursów jednak ja polecam dokumentację gita. Jest w miarę przejrzysta i dobrze napisana. A przynajmniej ja nie mam problemu z jej zrozumieniem.
Edytor – VSC
Visual Studio Code to świetny, lekki edytor nie tylko do JavaScriptu. Wiele rzeczy można powiedzieć o Microsofcie ale przy Visual Studio Code odwalił kawał na prawdę dobrej roboty. Edytor jest stabilny, przemyślany i przyjemnie się z niego korzysta. Gdy „wpadł w łapy” społeczności, jego potencjał się jeszcze zwiększył. A to wszystko dzięki setkom jak nie tysiącom różnych wtyczek i motywów, które na każdym kroku ułatwiają nam życie. Na uwagę zasługuje fakt, że jest to całkowicie darmowy edytor. Wersja, którą otrzymujemy zaraz po zainstalowaniu może nie powala, ale gdy zaglądniemy do spisu pluginów to jasne staje się, że jest to kombajn o niezwykłych możliwościach, jeżeli tylko poświęcimy trochę czasu na konfigurację. Taka ciekawostka. VSC jest napisane w JavaScripcie przy wykorzystaniu frameworka ElectronJS, który jest oparty o silnik Chromium. Dlatego też, zjada tyle ramu co Google Chrome.
A teraz konkrety
Powyższe narzędzia stosują lub mogą stosować wszyscy programiści. Teraz czas na te, które ja wykorzystuję stricte przy tworzeniu frontendu.
Babel – kompilator do JS -a
Określenie kompilator jest może troszeczkę na wyrost chociaż ma swoje uzasadnienie. Babel służy do „tłumaczenia” nowej składni ES6 + (ten plus to wszystkie nowsze wersje. Obecnie mamy EcmaScript 2018.) do takiej, którą zrozumieją starsze przeglądarki. Bardzo wielu użytkowników korzysta ze starszych wersji przeglądarek a nawet takich reliktów przeszłości jak Internet Explorer 9. Dlatego też kod pisany przez frontendowców musi być z nimi kompatybilny. Tutaj wkracza właśnie Babel zamieniając nową, ładną składnie na starą i zrozumiałą dla większości przeglądarek. Więcej o Babelu możecie dowiedzieć się tutaj.
Webpack – bundler
Przez pewien czas nie mogłem się przekonać do Webpacka. Przecież miałem inne narzędzia, które praktycznie robiły dla mnie to samo. No i właśnie nie do końca. Webpack zbiera pliki, które mu wskazujemy, wykonuje na nich pewne działania, jak na przykład „kompiluje” pliki js, zbiera je wszystkie do kupy i zwraca jako jeden, działający plik. Webpack ma też mnóstwo przeróżnych pluginów, które pozwalają mu wykonywać takie zadania jak optymalizacja obrazków, „kompilowanie” styli Sass lub Less, tworzenie własnego serwera testowego i wiele, wiele innych. Webpacka można poznać lepiej z jego oficjalnej dokumentacji. Zachęcam bo to ważne narzędzie w codziennej pracy.
Gulp/Grunt – task runnery
Mimo, że Webpack może za nas zrobić bardzo dużo rzeczy to jednak do tego nie służy. Z definicji jest tylko, lub aż bundlerem. Gulp i Grunt są natomiast task runnerami. Oznacza to, że wykorzystuje się je aby zaoszczędzić czas na prostych, powtarzalnych czynnościach. Wystarczy napisać task i na przykład nasłuchiwać na zmianę w pliku. Bardzo przydatne narzędzia. O tym, które z tych dwóch wybieram do projektu decyduje tak na prawdę przypadek lub na przykład inni współpracownicy. Dla mnie oba te narzędzia dają taki sam efekt przy takim samym nakładzie pracy więc nie ma znaczenia, który z nich wybiorę.
Sass – lepszy CSS
Lubię używać narzędzi, które sprawiają że moja praca jest łatwiejsza. Sass na pewno należy do tej kategorii. Pozwala korzystać z takich pomocy jak zmienne, mixiny czy funkcje w kodzie CSS. Jest to świetna pomoc przy tworzeniu layoutów i opisywaniu wyglądu różnych stron. Polecam nauczyć się chociaż podstaw tego narzędzia. Bardzo ułatwia i przyspiesza pracę. Oficjalna dokumentacja znajduje się tutaj.
Lintery – dbajmy o nasz kod
Dla każdego programisty najważniejsze powinno być dbanie o to aby jego kod był czysty, czytelny i zrozumiały. Czasem w natłoku różnych zadań chciałoby się coś zrobić z pozoru prościej lub szybciej, nie koniecznie zwracając uwagę na dobre praktyki. Nie jest to dobra droga. Najlepiej gdy przed takimi błędami strzeże nas coś innego niż my sami. Po to właśnie są lintery. Konfigurujemy je podając zbiór zasad, których zawsze mamy się trzymać. Na przykład w konfiguracji możemy podać, że ciągi znaków będziemy zawsze umieszczać między pojedynczymi apostrofami a nie cudzysłowami. Ja zazwyczaj korzystam z dwóch linterów. EsLint jest chyba najpopularniejszym linterem do JavaScriptu a TsLint służy do lintowania TypeScriptu.
Narzędzia – co pominąłem
Nie przytoczyłem tutaj żadnych frameworków ani bibliotek. Uznałem, że to krótkie przedstawienie kilku podstawowych narzędzi rozrosło mi się już trochę za bardzo aby opisywać tutaj jeszcze biblioteki i frameworki. Dla nich powstanie osoby post w bliżej nie określonym czasie. Chciałbym aby było to jeszcze w tym miesiącu ale czy mi się uda to się dopiero okaże. Nie ma tutaj także narzędzi używanych do testowania kodu. Nie dopisałem ich ponieważ sam jeszcze nie jestem z nimi zbyt dobrze zaznajomiony.
Tyle podsumowania
Podsumowanie mam za sobą a więc zostało mi tylko zaprosić was do dyskusji w komentarzach. Może coś chcielibyście dodać do tej listy? A może coś wcale nie zasługuje na miano narzędzia? Wreszcie, może widzicie jakieś błędy w tekście? Dajcie znać w komentarzach!