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.l1580017781iamg@1580017781kapah1580017781.leum1580017781as1580017781&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ť.

Junior / Senior Java Backend Software Engineer

JOB Position: Java Backend Software Engineer Contract type: TPP, Contract Location: Bratislava Salary Junior: 1500 EUR/Brutto Salary Senior: 2200 EUR/Brutto Rate: 3000 -4000 EUR/monthlyPrimary Job...

Senior Sieťový Špecialista

PRÁCA Pozícia: Sieťový špecialista Pracovný pomer:  TPP Miesto práce: Bratislava, on-site Plat: od 1700+ EUR/Brutto/mesačneHlavné zodpovednosti:Navrhuje architektúru, štruktúru a IP adresácie multiplatformových LAN/MAN/WAN sietí ...

Data Mining Expert

PRÁCA Pozícia: Data Mining Expert Pracovný pomer:  TPP Miesto práce: Bratislava, on-site Plat: od 2000+ EUR/Brutto/mesačneAké výzvy ťa čakajú?Vynikajúca pracovná príležitosť pre nadšenca práca...

Artificial Intelligence Consultant

JOB Position: Artificial Intelligence Consultant Contract type: Full-Time Location: Bratislava Salary: 2000 EUR/Brutto/monthsResponsibilities:conceptual processing and development of the new solutions in the area e.g....

Artificial Intelligence Expert

JOB Position: Artificial Intelligence Expert Contract type: Full-Time Location: Bratislava Salary: 2000 EUR/Brutto/monthsSuccessful adaptation of technologies like machine learning, deep learning, artificial inteligence will determine companies...

Senior Front-end / Angular Developer / Tvorba serverovej a aplikačnej logiky

PRÁCA Pozícia: FE/ Angular developer Pracovný pomer:  TPP, živnosť Miesto práce: Bratislava, Prievidza, Žilina Plat: od 1700+ EUR/Brutto/mesačneNáplň práce:Spolupráca na vývoji SW...

Senior .NET/Angular developer

PRÁCA Pozícia: .NET/Angular developer Pracovný pomer:  TPP Miesto práce: Bratislava, on-site Plat: od 1700+ EUR/Brutto/mesačneČo bude Vašou náplňou práce:spolupodieľanie sa na vývoji SW riešenia...

Nexteria – IT Club

Prednášky, diskusie, workshopy priamo od expertov z praxe.    Prepájame študentov a ľudí, ktorí...

Campus cowork

Campus cowork je medzinárodný coworking v Bratislave s dvoma lokáciami. Campus MLYNY...

Čo sme stihli v roku 2019

Každý rok je niečím špeciálny a rok 2019 nie je výnimkou. V...

Čí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ť.