TSM - THE WEB’S SCAFFOLDING TOOL FOR MODERN WEBAPPS – Yeoman

Răzvan Ciriclia - Software engineer

Inițierea unui proiect poate fi de cele mai multe ori plictisitoare când deja nu mai e o provocare. Atunci când începe un proiect nou, pentru a îmbunătăți productivitatea și plăcerea de a lucra, Yeoman are la bază trei tool-uri:

Yo

Ajută la crearea structurii de fişiere şi defineste deja configurări generale pentru Grunt şi Bower.

Grunt

Nu ţi s-ar părea interesant să știi dacă CSS-ul este valid și aşa va rămâne într-o vineri seara când tocmai te pregăteşti să pleci de la serviciu şi pe diagonală citești "not working" într-un mail de la șeful / clientul tău?
Ţi-ai dori ca CSS-ul, JS-ul HTML-ul să fie deja optimizat înainte cu cel puțin o zi de a ajunge în producţie?
Ai testat codul tău fără să-ţi aduci aminte să verifici load time-ul? Cu dev environmentul legat la aceeaşi reţea? Ai uitat că România întrece SUA, Germania, Norvegia, Japonia şi multe alte ţări dezvoltate în topuri internaţionale privind viteza de conectare la Internet? Grunt te va ajuta să-ţi optimizezi dimensiunea imaginilor fără să afecteze calitatea acestora!
Îţi place să-ţi structurezi munca pe module; iar fiecare să aibă propriile fişiere CSS sau JS? Îţi place să vezi fişiere mai mari de 100 de linii doar în producţie, unde este necesar să ai cât mai puţine resurse încărcate?Grunt poate face asta pentru tine compactând CSS sau minificând JS.

LESS or SASS - fiecare dintre noi poate alege ori unul, ori celălalt - Grunt le ştie pe amândouă.

Puţin cam rapidă introducerea despre Grunt - dar o parte din calitățile unui "task runner" nu puteau fi prezentate decât scurt şi la obiect.

Bower

Economiseşte din timp, download-ând librăriile necesare noului proiect precum şi dependinţele acestuia.

Utilizarea, instalarea și funcționarea corectă YEO este condiționată de instalarea în prealabil a Node.JS și Git. De asemenea, generator-webapp trebuie instalat via npm (npm install -g generator-webapp).

Instalare YEOMAN

YEOMAN va fi instalat asemnenea generator-webapp folosind npm

npm install -g yo

PROJECT STARTUP

Odată YEOMAN şi dependinţele acestuia instalate, putem da start noului proiect. Pentru aceasta trebuie să navigaţi în folder-ul (unul nou creat sau fără alte directoare sau fişiere în el) unde doriţi să dezvoltaţi noul proiect şi lansaţi din linia de comandă:

yo webapp

În acest moment jQuery, Gruntfile.js şi HTML5 Boilerplate sunt instalate automat, iar pe lângă acestea, mai aveți la dispoziţie să includeţi în aplicaţia abia începută, framework-uri precum: Bootstrap, Sass sau Modernizr. Timpul total de aşteptare pentru a putea avea acces la cod şi a începe editarea cu specificaţiile proiectului este de aproximativ două minute.

Caz concret

npm install -g generator-angular

Instalează generatorul pentru aplicaţiile bazate pe AngularJs

yo angular:app imdbApp

Creează structura de bază pentru aplicaţia curentă "imdbApp"

yo angular:route movies

Creează un nou path în aplicaţie, un view şi controller-ul asociat. Rezultatul acestei comenzi este:

Creează movies.js, varianta iniţială a unui controller în app/scripts/controllers

Creează movies.js, varianta iniţială a unui test în test/specs/controllers

Creează movies.html - template în app/views

Adaugă path-ul movies în modulul de bază app/scripts/app.js

Generează automat codul pentru a include movies.js în index.html

yo angular:controller movie

Creează movie.js, varianta iniţială a unui controller în app/scripts/controllers

Creează movie.js, varianta iniţială a unui test iîn test/specs/controllers

yo angular:directive
	   sampleDirective

Creează sampleDirective.js, varianta iniţială a unei directive în app/scripts/directives

Creează sampleDirective.js, varianta testului unei directive în test/specs/directives

yo angular:filter boldRed

Creează boldRed.js, varianta iniţială a unui filtru în app/scripts/directives

Creează boldRed.js, varianta testului unui filtru în test/specs/directives

yo angular:service getepisode

Creează getepisode.js, varianta iniţială a unui service în app/scripts/services

Creează getepisode.js, varianta a testului unui service în test/specs/services

yo angular:factory getseasons

Creează getseasons.js, varianta iniţială a unui factory în app/scripts/services

Creează getseasons.js, varianta a testului unui factory în test/specs/services

yo angular:provider getmovies

Creează getmovies.js, varianta iniţială a unui filtru în app/scripts/services

Creează getmovies.js, varianta a testului unui filtru în test/specs/services

yo angular:view seasons

Creează un view în app/views.

Pentru rularea proiectului, din rădăcina proiectului se rulează:

grunt serve

În cazul în care proiectul a fost clonat din Git, datorită faptului ca fișierele din node_models sunt adăugate în .gitignore, înainte de rularea acestei comenzi vor trebui rulate:

npm install
bower update
grunt build

Creează folderul cu fișierele pentru producție. În acest pas Grunt rulează task-urile definite în Gruntfile.js, fișier aflat în rădăcina proiectului.

Un exemplu de aplicație realizată cu Yeoman poate fi descarcată de aici https://github.com/razvancg/yeomanDemo

Concluzii

Pentru cineva care nu a mai lucrat cu un generator de cod este posibil să fie mai greu să se obişnuiască cu YEOMAN. Opţiunea de a nu mai căuta ultimele versiuni ale unor framework-uri de care ai nevoie în proiect, de a le download-a, dezarhiva şi copia în locaţia proiectului, pe lângă crearea automată a structurii de fişiere şi task-urile pe care le putem seta pentru Grunt, pot spune ca YEOMAN este "ce nu am avut până acum"!