Akonáhle začnete vyvíjať trochu väčšiu webovú aplikáciu, narazíte na potrebu (znovu)používať cudzie i vlastné knižnice a pluginy. Napríklad už len v zdrojákoch tohto portálu nájdete vložených 39 rôznych javascriptových pluginov.

Udržiavať takéto množstvo knižníc stále aktuálne, mať v nich poriadok a neodrovnať polovicu z nich pri upgrade na novú verziu jQuery – to vôbec neznie ako triviálna úloha (kamaráti zo slido by vedeli rozprávať). Našťastie, existuje jednoduché a osvedčené riešenie – packages a package managers.

Jedným z najlepších pomocníkov frontend developera je node.js. Množstvo užitočných nástrojov na vývoj frontendu (napr. testovanie, buildovanie) je napísaných v javascripte a bežia v prostredí node.js. V rámci seriálu si predstavíme viacero takýchto nástrojov, preto sa teraz pozrime node.js bližšie na zúbok.

node.js

Ak ešte nemáte node.js nainštalovaný, odporúčam to rýchlo napraviť. Pre Windows a OS X sú dostupné inštalátory ako aj zdrojové kódy na stiahnutie. Linuxáci pravdepodobne nájdu balíček v repozitároch svojej obľúbenej distribúcie, v prípade Ubuntu sa balík volá nodejs.

Po inštalácií si môžeme node vyskúšať v interaktívnej konzole:

$ node
> 5+5;
10
> console.log('Hello world!');
Hello world
undefined
> for(var i = 0; i < 10; i++) {
... console.log(i);
... }
0
1
2
3
4
5
6
7
8
9
undefined
>

Rovnako by sme mohli kód napísať do súboru helloworld.js a spustiť cez

$ node helloworld.js

node package manager

Spolu s node.js sme ako darček dostali aj balíčkovací systém. Základom je päť príkazov

• npm install <package-name> nainštaluje balíček z npm registry
• npm uninstall <package-name> odinštaluje balíček
• npm update nainštaluje nové verzie všetkých balíčkov
• npm list vypíše zoznam nainštalovaných balíčkov
• npm search <search-string> vyhľadá balíček v npm registry

Balíky sa predvolene inštalujú do práve aktívneho adresára, dôvodom je zabezpečiť nezávislosť viacerých projektov, ktoré sa na jednom systéme môžu nachádzať. Ak chceme balík inštalovať pre celý systém, treba použiť

$ npm install -g <package-name>

Netreba zabudnúť na rootovské oprávnenia (na Ubuntu sudo).

V npm registry sa nachádza množstvo balíčkov užitočných pre server alebo vývojára, no nie sú vhodné pre použitie v browseri. Trochu mätúce môže byť, že v npm registry nájdeme aj balíky ako jquery a backbone, pri detailnejšom preskúmaní však zistíme, že sa jedná skutočne o serverové verzie balíkov bežiace za pomoci emulátora DOMu.

Bower

Dieru na trhu vypĺňa Bower, package manager pre frontend komponenty vyvinutý Twitterom. Nainštalujeme ho jednoducho:

# npm install -g bower

Bower nám ponúka nasledovné užitočné príkazy:

• bower install <package-name>
• bower uinstall <package-name>
• bower update
• bower list
• bower search <search-string>

Vyskúšajme si to!

$ mkdir hello_world && cd hello_world
$ bower install jquery backbone requirejs

Vytvorili sme si adresár projektu hello_world a nainštalovali (užitočné) balíčky jquery, backbone a requirejs. Pribudol adresár bower_components v ktorom nachádzame adresáre backbone, jquery a requirejs. A je to. Bower nám stiahol balíčky a ich prípadné závislosti.

Je užitočné zabezpečiť rovnaké verzie balíkov na všetkých strojoch, developerských aj produkčných. To možno dosiahnuť konfiguračným súborom bower.json, s jeho vytvorením nám pomôže príkaz bower init. Ďalej stačí zahrnúť bower.json do gitu a závislosti sa na druhom stroji nainštalujú jednoducho príkazom bower install.

Typická štruktúra bower.json vyzerá nasledovne:

{
  "name": "hello_world",
  "version": "1.0.0",
  "main": "path/to/main.js",
  "authors": [
    "Samuel Hapak <moc.l1733549459iamg@1733549459kapah1733549459.leum1733549459as1733549459>"
  ],
  "license": "GPL",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "backbone": "~1.0.0",
    "jquery": >=1.7.0 < 2.0.0",
    "requirejs": "~2.1.8"
  },
  "devDependencies": {
    "mocha": >1.0.0"
  }
}

Sú v nej nadefinované informácie o projekte, či je projekt private (aby sme omylom nezverejnili projekt cez bower register, ak nechceme), súbory ignorované pri prípadnom publikovaní balíku, závislosti a vývojové závislosti (nie sú potrebné pre nasadenie, len pre development).

Bower za nás nerieši ostatné záležitosti, ako vkladanie skriptov do stránky. S tým však vie pomôcť šikovná knižnica RequireJS, o ktorej bude reč na budúce. Teším sa na vás o týždeň.