W poprzednich wpisach poruszyłem kwestie wyboru narzędzi IDE. Opisałem także aplikacje wspomagające współpracę projektanta z programistą w procesie tworzenia stron www. Mamy zatem wybrane narzędzia do pisania kodu, mamy także projekt graficzny. Czas na development!
Spis treści
Praca nad stylami i kodem js – początki
W starożytnych czasach (jakieś 10 lat temu ;)), frontend developer musiał stworzyć ręcznie pliki css i to w nich pisać kod, który zaciągany był bezpośrednio na stronę. Podobnie w przypadku skryptów js – konieczne było ściąganie zewnętrznych bibliotek (lub ryzykowne poleganie na dostępności ich online i wczytywanie do kodu). Dopiero jako jeden z ostatnich plików dołączany był plik z naszym kodem. Dość żmudna praca szczególnie, że był to dopiero początek pracy. Napisany kod należy później scalić do możliwie małej liczby plików wynikowych, najlepiej w postaci zminifikowanej aby zaoszczędzić na transferze danych. Do tego, używając grafik, zalecana jest ich optymalizacja. Modyfikując kod (css lub js) czy zmieniając grafikę, musieliśmy czynność wykonywać ponownie, każdorazowo ręcznie. W skrócie: syzyfowa praca.
Task runnery i bundlery – a komu to potrzebne?
Na szczęście, w miarę rozwoju technologii pojawiło się wiele udogodnień:
- Package managery (bower, npm, w końcu yarn), pozwalające pobierać zewnętrzne biblioteki do naszego kodu
- rozszerzenia składni CSS – SCSS, LESS, Stylus, PostCSS
- narzędzia do kompresji JS – YUI compressory, UglifyJS
- narzędzia automatycznie konwertujące nowe elementy składni JS do wersji zgodnych ze starszymi przeglądarkami.
Oprócz wyżej wymienionych, najistotniejszym udogodnieniem w tworzeniu stron www stała się możliwość automatyzacji wszystkich wymienionych wcześniej procesów. W chwili, gdy światło dzienne ujrzały takie narzędzia jak Grunt, Gulp, a później Webpack, programista wreszcie mógł skupić się wyłącznie na developmencie. Pozostałe zadania mogły zostać oddelegowane automatom.
Grunt
GruntJs
Jest to najwolniejsze narzędzie spośród tu wymienionych. Po każdej zmianie w kodzie odczytuje wszystkie pliki i zapisuje je ponownie. Pozwala na podłączenie preprocesorów stylów, livereloading, minifikację plików i wiele innych zadań. Umożliwia także tworzenie zadań w zależności od tego, czy pracujemy w środowisku testowym czy produkcyjnym. W naszym zespole wykorzystujemy grunta przede wszystkim do zadań związanych z konwersją i generowaniem swoich fontów do późniejszego użytku na stronie www.
Link do narzędzia: https://gruntjs.com/
Gulp
Gulp
Dzięki wykorzystaniu pamięci RAM do generowania plików wynikowych, Gulp jest narzędziem znacząco szybszym od Grunta. Także ten task runner pozwala na tworzenie swoich zadań. Umożliwia także kompilację kodu JS ES6 i nowszych do wersji ES5. Minusem jest kompilacja całego kodu do plików wynikowych, przez co musimy importować na stronę wszystko co wyprodukowaliśmy. Niezależnie od tego, że na stronie potrzebujemy wyłącznie jednego skryptu.
Link do narzędzia: https://gulpjs.com/
Webpack
Webpack
Najbardziej zaawansowane narzędzie, którego zastosowań w developmencie znajdziemy naprawdę wiele. Podstawowym zadaniem Webpacka jest zarządzanie kodem i dzielenie go na moduły. Ze względu na swoje możliwości konfiguracyjne, stosowany jest bardzo często jako lepsza wersja Grunta i Gulpa. Narzędzie to, w odróżnieniu od poprzedników, analizuje cały projekt wraz z zależnościami i generuje wynikowy plik lub pliki, zwiększając tym samym znacząco wydajność aplikacji.
Oprócz swojej podstawowej funkcjonalności, Webpack posiada bardzo bogatą bibliotekę wtyczek i rozszerzeń. Umożliwia także tworzenie własnych “loaderów”, obsługujących niestandardowe formaty. Pomaga w zarządzaniu obrazami, fontami czy stylami. Umożliwia łatwą kompilację kodu do dowolnej wersji, zapewniając kompatybilność nawet ze starszymi wersjami IE (choć łatwe to nie jest ;)).
Nie można też zapomnieć także o jednej z kluczowych funkcjonalności jaką jest dev-server. Jest to wbudowany serwer posiadający możliwość automatycznego przeładowywania przeglądarki po zapisaniu zmian w kodzie.
Warto zapoznać się z pełną listą funkcjonalności korzystając z oficjalnej dokumentacji: https://webpack.js.org/
