Blog SPA 2. časť: Pekelné závislosti

SPA 2. časť: Pekelné závislosti

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 &lt;moc.l1619004183iamg@1619004183kapah1619004183.leum1619004183as1619004183&gt;"
  ],
  "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ň.


Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 6 200 ITečkárov dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.



Súhlasím so spracovaním mojich osobných údajov. ( Viac informácií. )

Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.

Samuel Hapák
Samuel Hapákhttp://vacuumlabs.com
Zaujímam sa o webové technológie, opensource a najnovšie trendy v IT. Momentálne je mojou vášňou všetko okolo Single Page Applications a Dartu. Vo voľnom čase sa venujem fyzike a organizovaniu stredoškolských fyzikálnych táborov. Ak máte chuť pokecať o IT, alebo len tak skočiť na pivo, napíšte mi email.

Android Developer

Máš rád svoju slobodu, pracuješ na projektoch, ideálne remote? Máme pre teba projekt na kontrakt s odmenou 3500 - 4000+...

iOS Developer

Máš rád svoju slobodu, pracuješ na projektoch, ideálne remote? Máme pre teba projekt na kontrakt s odmenou 3500 - 4000+...

JavaScript Developer

Slovenská firma, ktorá má ambície vybodovať svetovú UX research platformu rozširuje svoj tím a hľadá JavaScript Developera. Pracoval by si...

Linux Admin

Pre spoločnosť, ktorá sa sa zaoberá hostingom webov a aktuálne rýchlo expanduje, hľadáme Linux Admina. Môžeš pracovať na kontrakt alebo...

Lead Developer Architect

Hľadáš istotu a stabilitu v zamestnaní? Medzinárodná spoločnosť, ktorá vyvíja finančný softvér hľadá Lead Developer Architect-a. Ide o prácu na...

.NET Developer

Máš rád svoju slobodu, pracuješ na projektoch, ideálne remote? Máme príležitosť pre .NET Developera. Projekt je na kontrakt s odmenou...

Tester_remote

Pracuj na svetovom SW produkte, ktorý je používaný miliónmi používateľov! Firma rýchlo rastie a vyvíja nové features. Poznáme ich prostredie...

GIRL´S DAY už po ôsmy raz priblíži stredoškoláčkam svet technológií

Už po ôsmy raz sa uskutoční celoslovenské podujatie GIRL´S DAY, ktoré prepája IT firmy a organizácie so stredoškoláčkami po...

Čo chcú ITčkári od firiem: Peniaze, peniaze, peniaze

V predchádzajúcich častiach ankety "Čo chcú ITčkári" sme sa pozreli na dopady pandémie na prácu v IT a ako...

Firmy častokrát nevedia využívať svoje dáta ako relevantný podklad pre rozhodovanie

Kvalitná analýza dát sa stáva v čoraz nevyspytateľnejšom ekonomickom prostredí jedným z najdôležitejších podkladov pre riadenie firiem. Konferencia Power BI Day...

Čítaj ďalej:

Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 6 200 ITečkárov dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.

Súhlasím so spracovaním mojich osobných údajov. ( Viac informácií. )

Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.