Package manager

Uvod

frontend

Današnji web development se zasniva na skupu različitih tehnologija koje se istovremeno koriste na jednom projektu, kao što je: Typescript (jezik), Sass (CSS ekstenzija), JSCS (code style linter and formater), JSHint ili TSLint (alat za detekciju grešaka i potencijalnih problema), BrowserSync (alat za sihronizaciju promena u kodu i u browser-u – Live reload )… Za jedan projekat je potrebna instalacija svakog od navedenih programa ali i svih programa (dependencies) od kojih zavise isti a prethode njihovoj instalaciji.
Package manager eliminiše potrebu za ručnim instaliranjem softvera sa svim neophodnim pratećim softverom (dependencies) kao i za ažuriranje svih tih komponenti. Package manager je skup alata zaduženih da automatizuju procesa instaliranja, konfigurisanja i uklanjanja programa. Package manageri rade sa packages tj. sa softwerom ili podacima koji se nalaze u arhivnim fajlovima. Package sadrže meta-data koji opisuju dati softver kao što je naziv softvera, verzija i lista svih dependencies (drugi softver neophodan za rad datog sofvera). Najpoznatiji package menadžeri su:

  • npm
  • bower
  • JSPM (JavaScript Package Manager)
  • Yarn

Organizacija zavisnosti

Tip organizacije zavisnosti tzv. “dependencies tree type” je jedna od osobina package managera koja čini razliku medju njima. Osnovna dva tip su:

  • Nested dependency tree podrazumeva da se za svaki package instalira njegov dependencies, tako da jedan isti dependencies (npr.Jquery) može biti učitan više puta ali za različite programe. Ovakav tip organizacije zahteva više prostora ali omogućava da aplikacije koriste različite verzije istog softvera u jednom projektu.
  • Flat dependency tree učitava jedan program (dependencies) samo jednom u root folderu, tako da zauzima malo prostora i brzo se učitava u browser. Medjutim u slučaju da su za različite dependecies potrebne različite verzije sofvera flat dependency tree nema rešenje.
Primer (Nested dependency tree):

Primer (flat dependency tree):

npm3 dependecies tree small

npm3 dependecies tree ×

Bower i JSPM koriste flat dependency tree , dok npm koristi ugnježedjno drvo zavisnosti (eng. nested dependency tree). Treba napomenuti da najnovija verzija npm-a (npm3) pokušava da spreči “dependencies hell” i njegov stil sve više liči na “flat way”. Više o dependencies tree kod npm3 pogledajte na njihovom sajtu.

Zaključak

Bower logo

Najveći package menadžer je npm ali moramo napomenuti da je primarno pravljen za node.js (serversko) okruženje, stoga da bi radio u browser-u potrebno je da se pored njega koristi neki module load-er (browserify ili webpack). JSPM dolazi u paru sa SystemJS modul loader-om i nema svoje package već dozvoljava da se instaliraju package koji su hostovani na npm-u ili github-u. Bower se smatra da je “outdated”, ali je često spakovan sa drugim tehnologijama tzv. “workflow wrappers for front-end” kao što je Yeoman koji mu daju na popularnosti. Treba napomenuti da Bower može koegzistirati i sa “npm-om”, i sa “JSPM” u istom projektu zahvaljujući time što čuvaju podatke o modulima u različitim fajlovima. JSPM i npm čuvaju podatke u package.json dok bower čuva podake o modulima u bower.json fajlu. Od pre neki dan je “novi klinac je u gradu”, Yarn package manager, facebook-ovo čedo, kažu da je bolji i brži od npm-a, ali to će tek vreme pokazati.

Task runner

Grunt logo

Nakon što su instalirane sve aplikacije za frontend koristeći neki od pomenutih package manager-a, potrebno je konfigurisati svaki a zatim ih pokrenuti svaki put kada je potrebno (najčešće pri svakom čuvanju promena). Task runner-i se koriste da automatizuju sve ove procese (npr. kompajliraju sass u css, transpiliraju Typescript u JavaScript, optimizuju slike, minifikuju fajlove…). Najpoznatiji task runner-i su:

Funkcije koje izvršava Grunt se dodaju instalacijom odredjenog dodatka (plugin-a) a svi procesi u Grunt-u su “zapisani” u okviru jednog fajla (Gruntfile), koji je lociran u root-u projekta. Gulp ima fleksibilniju konfiguraciju od Grunt-a sa manje koda ali ima manju zajednicu. Gulp radi slično kao Grunt jer ima Gulpfile a funkcije se takodje dodaju sa plugin-ima.

Modul loaders i bundlers

webpack logo

Ukoliko se odlučimo za modularni način programiranja aplikacije, susrećemo se sa problemom organizovanja učitavanja modula i modula od kojih oni zavise tzv. dependencies. Modul loaders i bundlers su nepohodna podrška programeru za jednostavniji i efikasniji rad sa modulima.

Modul loaders

“Modul loaders” omogućavaju dinamičko učitavanje modula pazeći na raspored učitavanja. Najpoznatiji modul loader-i su:

  • RequireJS – implementira AMD modularni sistem.
  • SystemJS – je univerzalni loader i može učitavati module u bilo kom popularnom formatu (CommonJS, UMD, AMD, ES6). Najčešće se koristi zajedno sa jsmp.io koji je više od običnog package manager-a, pa može transpilovati ES6 kao i TypeScript ili CoffeeScript.

Šta su CommonJS, AMD i UMD?

  • Asynchronous Module Definition (AMD) kao što mu i samo ime kaže, podržava asihrono učitavanje modula što je pogodno za rad sa modulima u browser-u.
  • CommonJS učitava module sinhrono i zbog toga se najčešće koristi za rad sa modulima na serverskoj strani u okruženju node.js. Iako nije planiran za rad u browser-u, uz pomoć “modul bundler-a” je moguće da prilagoditi CommonJS radu u browser-u.
  • Universal module definition (UMD) je kompatibilan i sa AMD i sa CommonJS definicijom i koristi se uglavnom ukoliko ima potrebe da se isti modul učitava na serveru i u browser-u.

Više p ovome pogledajte u članku Modularno programiranje – eksterna sintaksa (AMD & CommonJS)

Module bundlers

“Modul bundlers” rešavaju problem tako što kompajliraju sve module u jedan fajl prema odredjenom redu pazeći da neki modul koji je zavisnost drugome bude učitan na vreme. Najpoznatiji modul bundler-i:

  • Browserify – implementira CommonJS i u browser okruženju. Može da se nadogradjuje raznim plugin-ima i uz pomoć task runner-a (Gulp ili Grunt) može da završi različite poslove.
  • Webpack – može učitavati module u bilo kom popularnom formatu (CommonJS, UMD, AMD, ES6). Pored osnovne namene vezane za učitavanje modula, webpack može da izvrši i poslove task runner-a kao što su transpilovanja ES6(Typescript) u ES5, transpilovanje SASS-a u CSS… Na osnovu grafikona google trends se zaključuje da postoji ogromno interesovanje za Webpack kao predstavnika modul bundler-a. Više o webpacku možete pročitati u članku “Webpack osnove”

Zaključak

Izbor tipa podrške za rad sa modulima najviše zavisi od same aplikacije. Stoga ukoliko se aplikacija sastoji od manjeg broja većih modula, smatra se da je bolji izbor “modul loader”, dok se smatra da je “modul bundler” pogodniji ukoliko se aplikacija sastoji od većeg broja manjih modula. U svakom slučaju najsigurnije je isprobati oba tipa pa videti koji daje bolje rezultate.

SAVET:
postoje aplikacije koje objedinjuju više pomenutih aplikacija u jednu. Jedna od takvih je Yeoman koja uz pomoć aplikacije zvane Yo objedinjuje rad package manager-a (npm ili bower) i task managera (grunt ili gulp) u okviru jedne aplikacije. Po instairanju Yeomana možem da instaliramo a zatim i pokrenemo veliki broj generatora koji su namenjeni raznim vrstama projekata. Spisak svih Yeoman generatora možete pogledati ovde.

Podelite:

Ostavite komentar