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.l1610649853iamg@1610649853kapah1610649853.leum1610649853as1610649853&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.

Automation Tester

Máš skúsenosti s automatizovaným testovaním? Pre Automatizovaného testera máme príležitosť v oblasti digitálneho bankovníctva. Ide o projekt na kontrakt s odmenou...

Java Junior/Medior Developer

Osamostatni sa a pracuj sólo! Práve teraz je tu príležitosť pre Junior/Medior Java Developera pracovať na projekte pre medzinárodnú...

MS BI Developer / REMOTE

Sprav krok vpred s novým projektom v oblasti bankovníctva. Ide o projekt na kontrakt s dĺžkou trvania 2 roky. Odmena...

Business Development Manager

Máš skúsenosť s aktívnymi akvizíciami SW riešení pre banky/poisťovne? Pre stabilnú československú spoločnosť hľadáme Business Development Managera, ktorý sa vyzná...

Julia Developer / REMOTE

Projekt pre nadšencov Julia a machine learning. Pre spoločnosť, ktorá používa matematické metódy a metódy AI / ML na...

Scala Medior/Senior Developer

Nechceš denne dochádzať do práce? Chcel by si byť súčasťou dlhoročného startupu, len senior ľudia (žiadni študenti) a pracovať...

Junior Scala Developer

Nechceš denne dochádzať do práce? Chcel by si byť súčasťou dlhoročného startupu, len senior ľudia (žiadni študenti) a pracovať...

Toto sme stihli v roku 2020!

Rok 2020 bol určite neobyčajným rokom pre mnohých nielen z oblasti IT. Presunuli sme sa z kancelárií a open...

Tieto projekty získajú podporu z fondu SK-NIC

Poslednú tohtoročnú výzvu Fondu SK-NIC sme vyhlásili 1. septembra 2020 a otvorená bola až do 15. októbra. Do termínu uzávierky prišlo rekordných...

Novoročný AWS meetup o novinkách v cloudových technológiách

Pozývame vás na prvý AWS meetup roku 2021. Samozrejme online. Téma meetupu Každý rok prináša konferencia AWS re:Invent množstvo noviniek 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ť.