2014. február 23., vasárnap

Frontend tooling Yeoman segítségével

Minden fejlesztőnek megvan a maga kedvenc eszközkészlete, melyet szívesen használ valamilyen fejlesztéshez, jelentsen ez egy IDE-t, egy szövegszerkesztőt, verziókezelőt, build rendszert vagy bármi hasonlót. A következőkben a Yeoman eszközkészletet, vagyis még inkább egy munkafolyamatot fogok bemutatni, melyet front-end fejlesztéshez lehet használni.

Úgy tűnik az előző kicsit elméleti cikk után, mostantól néha fognak megjelenni kevésbé step-by-step leírások. A mostani is részben ilyen, hiszen egy technológiát fogok bemutatni, amely szinte módszertanként is használható a webes fejlesztések során.

Eredetileg megjelent a Kir-Dev oldalán

A Yeoman nevű programcsomag rendkívül megkönnyíti a front-end fejlesztők életét. Köszönhető ez a nagyon gazdag funkcionalitásának, mely könnyen kiegészíthető, konfigurálható, így tényleg a segédünkként tud szolgálni az eszköz. Alapvetően három, különállóan fejlesztett, de együttműködő NodeJS-ben írt alkalmazásról van szó, melyek különbözőképpen segíthetik munkánkat:

  • Yo: scaffolding eszköz
  • Bower: függőségkezelő eszköz
  • Grunt: feladatfuttató eszköz

Egyesével bemutatom mire képesek és hogyan kell őket használni. A könnyebb érthetőség érdekében egy komplett példán keresztül fogom bemutatni a Yeoman-t: egy AngularJS alapú kezdő alkalmazást fogunk készíteni.

Előkövetelmények és telepítés

Először is szükség lesz egy NodeJS telepítésére, ugyanis ez fogja futtatni a fenti programokat. Linuxon lehet csomagkezelőből, vagy forrásból telepíteni. Windows-hoz és Mac OSX rendszerre elérhetőek bináris formátumban is. Ha a NodeJS-t sikeresen feltelepítettük következhet a programok telepítése a NodeJS csomagkezelőjével.

# NodeJS letöltése
$ wget http://nodejs.org/dist/v0.10.26/node-v0.10.26.tar.gz
# kicsomagolás
$ tar -xvzf node-v0.10.26.tar.gz
# fordítás
$ cd node-v0.10.26.tar.gz
$ ./configure && make
# telepítése
$ sudo make install
# Yo, Bower, Grunt telepítése
$ sudo npm install -g yo bower grunt

Yo

Mit is jelent a scaffolding? Alapvetően ezzel a fejlesztés sebességét tudjuk növelni. Sablonokat generálhatunk, melyekből kiindulva állhatunk neki egy program elkészítésének. Ezek a sablonok sokfélék lehetnek, az egyszerű konfigurációs fájloktól kezdve, melyeket más programok használnak, egészen a saját elkészítendő programunk vázáig. Lehetnek ezek fejlesztést segítő szkriptek, komplett szoftverstack vagy más boilerplate kódok, melyeket előre generálhatunk az alkalmazásunkhoz.

Ahhoz, hogy sablonokat tudjunk készíteni a Yo-val generátorokra lesz szükség. Egyrészt vannak hivatalos és még több a közösség által készített generátorok, melyekkel teljes alkalmazás vázakat és hozzájuk tartozó környezetet tudunk generálni. Például készíthetünk teljes AngularJS környezetet (ami integrálja a Bower és Grunt eszközöket is), mobil first weboldalt, Wordpress alapkörnyezetet, RevealJS vázakat, de készíthetünk szerver oldali alkalmazás szkeletonokat is, például ExpressJS-hez. Kezdjük el tehát az AngularJS kiinduló programunkat:

$ sudo npm install -g generator-angular
$ mkdir angularapp && cd angularapp
$ yo angular example

Elsőként telepítettük az AngularJS-hez szükséges generátort, majd egy mappában legeneráltuk a teljes kiinduló alkalmazás sablont. Az AngularJS egy MVVM keretrendszer, így tudunk olyan sablonokat generálni, mint az MVC-ből is ismert Controller, vagy a View elemeket valósítják meg.

$ yo angular:controller myController
$ yo angular:view myView

Bower

Senki nem szereti az alkalmazásának a függőségeit kézzel letölteni és azok minden újabb verziójánál újra eljátszani ezt a folyamatot. Az egyszerű megoldás valamilyen függőségkezelő eszköz (dependency management tool) használata, mellyel mindezt megtehetjük. A program intelligensen feloldja és telepíti a kívánt CSS, vagy JavaScript könyvtár saját függőségeit is. Például így kereshetünk a jQuery projektek között és telepíthetjük, a jQuery UI-t, majd frissítjük az összes telepített függőségünket:

$ bower search jquery
$ bower install jquery-ui
$ bower update

Grunt

Az utolsó eszköz amit bemutatok a Grunt, mely egy parancssoros feladat futtató (task runner tool). Ez sokat nem mond el magáról, de egy elég általános célú eszköz, ezért konkrétabban nem is lehet definiálni. Legjobban JavaScript alapú fejlesztéseink során alkalmazhatjuk, és temérdek feladatot végeztethetünk el vele nagyon egyszerűen. Néhány példa a sokrétű használhatóságára:

  • JavaScript fájlok minimalizálása, kódtömörítés (minify)
  • JavaScript kód obfuszkálása (uglify)
  • képek tömörítése a webre
  • JavaScript és CSS fájlok összefűzése
  • livereload Web szerver indítása teszteléshez, melyben az alkalmazásunk fut
  • szintaktikai ellenőrzések futtatása
  • egység és integrációs tesztek futtatása (előzővel együtt használva continuous integration-re is használható)

Ezek csak a beépített és gyakran használt funkciók, az eszköz ennél sokkal többre képes és egyszerűen kiegészíthető a közösség által készített újabb taszkokkal. Példa a használatára:

## livereload webszerver indítása
$ grunt serve
## tesztek futtatása
$ grunt test
## alkalmazás buildelése (kódtömörítés, obfuszkálás, stb.)
$ grunt build

Ezzel a Yeoman bemutatásának végére értünk, remélem hasznosnak találtátok, és sikerült bemutatni, mivel tudják kiegészíteni a front-end fejlesztők eszközparkját ezek a programok.