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.l1593968486iamg@1593968486kapah1593968486.leum1593968486as1593968486&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ť.

NetSuite Consultant / Hamburg / Munich /

Basic informationPosition: Junior/Medior NetSuite Consultant Contract Type: Internal Employee Location: Hamburg or Munich /Home office possible/ Language: fluent German and EnglishGermany company which...

.NET Developer

Pozícia: .NET  Developer Typ Zmluvy: TPP Lokalita: Bratislava Plat:  od 1500 - 2500 EUR/BruttoMedzinárodná softvérová spoločnosť hľadá .NET Developera.Náplňou práce bude budovanie...

Angular Developer – REMOTE

Pre nášho partnera hľadáme ITčkára na pozíciu Angular Developer. Spoločnosť sa venuje vývoju platformy pre firmy na znižovanie nákladov...

REMOTE Android Developer

Pozícia: Android Developer Typ Zmluvy: Kontrakt Lokalita: REMOTE Plat:  od 3600 - 4000 EUR/mesačneIde o vývoj aplikácie pre platobné terminály. Očakávame aspoň...

Java Develooper

Medzinárodná IT spoločnosť, ktorá vyvíja softvér pre banky a poisťovne v západnej Európe hľadá človeka na pozíciu JAVA DEVELOPER.Práca...

Frontend Developer

Medzinárodná IT spoločnosť, ktorá vyvíja softvér pre banky a poisťovne v západnej Európe hľadá človeka na pozíciu Frontend Developer.Práca...

IT Test Manager

Medzinárodná spoločnosť, ktorá vyvíja softvér pre banky a poisťovne v západnej Európe hľadá človeka na pozíciu IT Test Manager.Práca...

Slovensko.Digital: Otvorený list o situácii na FIIT STU

Vážený pán Minister školstva, vedy, výskumu a športu SR, Rektor Slovenskej technickej...

Daniel Husar: Najpodstatnejšie sú soft skills a ľudská povaha

Daniel Husar je full-stack engineer, aktuálne pracuje v spoločnosti Intercom v San Francisco v Kalifornii. Má rad...

Aj ty v IT nominované na cenu UNESCO v oblasti vzdelávania dievčat a žien

Prize for Girls’ and Women’s Education je medzinárodné ocenenie udeľované od roku 2016 Organizáciou Spojených národov pre...

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