Frontend Mashup

Raluca Oanca-Boca
Full Stack Developer @Self-Employed

PROGRAMARE

Mulți dintre programatorii web au nevoie ca timpul de randare a unei pagini web să fie cât mai scurt. Cu aceasta problemă te confrunți în primul rând atunci când se aleg uneltele cu care se va lucra la un proiect nou.

La începutul unui proiect nou este întotdeauna greu să alegem uneltele care vor ușura munca fiecărui membru din echipă. Trebuie să fim atenți atunci când alegem aceste unelte, deoarece ele vor fi folosite până la finalul proiectului dar și în procesul de deployment. În acest articol am încercat să evidențiez operațiile care formează automatizarea frontend-ului. Acestea sunt: scrierea de css cu un framework preprocesat, minificarea și testarea css-ului cât și minificarea și testarea js-ului și , de asemenea, automatizarea acestora sub forma de procese atât pentru mediul de dezvoltare local dar și pentru producție.

Pentru proiectul prototip inițial s-a folosit ca backend limbajul de programare PHP fără a se utiliza nici un alt framework, iar ca framework de frontend am ales AngularJS. Când vine vorba de alegerea unui limbaj de stilizare putem alege unul dintre LESS, SASS/SCSS sau Stylus. Acestea sunt limbaje de stilizare preprocesate ceea ce au un avantaj fața de limbajul CSS pur. Avantajele principalele sunt posibilitatea de a avea variabile, moștenire, nesting și mixins. După ce am făcut alegerile dorite, provocarea este cum reușim să combinăm aceste unelte astfel încât să ne ușurăm în primul rând munca noastră, munca unui operator de dezvoltare, și să avem un timp de randare a paginii cât mai mic.

Avem la dispoziție : nodejs, ruby, dar și managerul de pachete ce se bazează pe nodejs: npm. Ca o practică bună în utilizarea managerului de pachete se folosește un fișier package.json în directorul rădăcină al proiectului.

În acest fișier vom lista toate pachetele de care avem nevoie cât și câteva din dependințele pentru mediu de lucru local. După crearea acestui fișier sau după modificarea acestuia, trebuie să rulam comanda:

     npm install

În urma comenzii se creează directorul node_modules, după care avem nevoie de npm - g intall grunt grunt-cli

Se va instala limbajul de programare ruby și câteva din dependințele acestuia dintre care : sass, sass-globing și compass.

sudo apt-get install ruby-full
      sudo gem install sass compass sass-globbing

Odată ce avem acestea instalate putem să începem să ne construim fișierul Gruntfile.js, fișier care, de asemenea, este creat pe același nivel ca și fișierul package.json. Avem nevoie de acest fișier deoarece de fiecare dată când comanda grunt este rulată va lua în considerare acest fișier.

Partea de configurare a comenzii se face prin fișierul de configurare cât și prin câteva dintre comenzile inițiale.

Următorul pas este de face load la task-urile inițiale de care depind task-urile customizate de către noi.

După ce s-a făcut load la task-urile inițiale, vom folosi task-ul compass pentru proiectul nostru. Dacă se va rula comanda grunt compass:dev vom vedea că în fișierul destinație scss vor fi concatenate toate fișierele sass folosite. Se va transforma apoi în format css cu format de afișare expandat. Pentru mediul de lucru în producție stilul este compact.

Pentru concatenarea fișierelor js am folosit task-ul uglify. Pentru mediul de lucru local am ales opțiunea ca după concatenarea fișierelor rezultatul să fie expandat, iar pentru mediul de lucru în producție să fie minified.

Avem o problemă dacă dorim să schimbăm orice fișier sass sau js, prin modificări pe care le dorim . Pentru acestea am creat task-ul watch care va verifica orice fișier sass sau js după care le va transforma și minifica după caz. Acest task este util pentru mediul de lucru local.

Spre final, scopul este înregistrarea task-urile customizate pentru mediile de lucru diferite. În acestă ordine se poate observa și task-ul browserSync care se bazează pe task-ul watch astfel că orice modificare pe care o vom face se va vedea automat în pagina web nemaiavând nevoie de a face reload la pagină manual.

O diferență care se poate observa este că în mediul de lucru în producție am ales ca la final să rulez comanda pentru a adăuga un hash la finalul fișierului și a evita astfel o problemă de cache. În același timp se poate face și o versionare.

Pentru testarea css-ului se poate folosi PhantomCSS pentru care am ales scrierea de teste folosind CasperJS. Pentru testarea js-ului se poate folosi Karma pentru unit testing și Jasmine pentru behaviour testing.

"karma-chrome-launcher": "^0.2.0",
"karma-jasmine": "~0.1.5",
"karma-script-launcher": "~0.1.0",
"karma-firefox-launcher": "~0.1.3"

Pentru coding standards se poate folosi grunt.loadNpmTasks('grunt-contrib-jshint'); dar am preferat să folosesc un pre-commit hook pentru git.

Folosind o singură comandă putem să ne automatizăm munca într-un mediu local cât și într-un mediu de producție. În același timp ne folosim de principiile DRY, avem mai puține erori și putem să facem modificările mai ușor.

În concluzie, avantajul constă în faptul că nu vom mai adăuga fiecare fișier css sau js, ci în final, prin utilizarea grunt vom avea doar un fișier care trebuie adăugat în pagina HTML.