ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 149
Numărul 148 Numărul 147 Numărul 146 Numărul 145 Numărul 144 Numărul 143 Numărul 142 Numărul 141 Numărul 140 Numărul 139 Numărul 138 Numărul 137 Numărul 136 Numărul 135 Numărul 134 Numărul 133 Numărul 132 Numărul 131 Numărul 130 Numărul 129 Numărul 128 Numărul 127 Numărul 126 Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ LISTĂ EDIȚII ▼
Numărul 43
Abonament PDF

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.

Bibliografie:

[1].http://conferences.oreilly.com/fluent/fluent2014/public/schedule/detail/32532

[2]. https://speakerdeck.com/addyosmani/automating-front-end-workflow

[3]. https://gruntjs.com

[4]. https://www.npmjs.com/

[5]. http://gruntjs.com/plugins

NUMĂRUL 149 - Development with AI

Sponsori

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • P3 group
  • Ing Hubs
  • Cognizant Softvision
  • Colors in projects

Raluca Oanca-Boca a mai scris