Front-end 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.

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 ez megvan, következhet a konkrét eszközök telepítése:

# 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:

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