JavaScript tools

U ovom poglavlju predstavljeno je nekoliko, danas najpopularnijih, JavaScript alata koji mogu biti jako korisni kako početnicima tako i iskusnijim JavaScript developer-ima.

O svakom alatu napisano je kratko objašnjenje čemu služi i postavljeni su linkovi na kojima se može više saznati o alatu, način korišćenja, razlozi korišćenja i slično, ili gde se mogu download-ovati isti. Treba pratiti nove trendove i nove alate koji se danas jako često i brzo razvijaju jer se i oni sami prave kako bi rešili neke određenje probleme sa kojima se programeri susreću i na taj način mogu umnogome pomoći. Sa druge strane, ne treba preterivati sa njihovim korišćenjem i upotrebljavati ih tamo gde im nije mesto i treba izbegavati slučajeve kada njihovo koriščenje nepotrebno narušava performanse projekta.

Za svaki od predstavljenih alata, kao i za sve buduće alate koje ćete koristi, predlaže se testitranje i isprobavanje na nekim vašim test fajlovima i projektima kako bi se detaljije upoznali sa alatom i razumeli njegov rad i uvideli da li vam je zaista potreban. Biće alata o kojima ćete čitati ali dok ih ne isprobate u praksi nećete biti svesni njihove „moći“ i dobrobiti njihovog korišćenja, zato istražujte i kucajte...

Verzioniranje koda (Code Versioning)

Sistemi za kontrolu verzija koda (version control systems) se baziraju na konceptu praćenje promena koje se dešavaju unutar direktorijuma ili fajlova čije promene želite da pratite. Zavisno od sistema koji se koristi, ovo može da varira od informacija o tome koji fajlovi su imali izmene do informacija o konkretnoj liniji koda koja je izmenjena.

Najpopularniji su Git i Subversion. Njihovo korišćenje vam omogućava da imate nekoliko verzija koda, što vam daje mogućnost lakog povratka na prethodnu verziju koda ukoliko dođe do neke veće greške ili niste zadovoljni rešenjem. Mogu se kreirati grane (branch) koje su kopije izvornog koda i koje vam omogućavaju rad i implementaciju novih funkcionalnosti bez rizika uništavanja postojećeg izvornog koda (codebase).

Takođe, možete koristi servise kao što su GitHub, Beanstalk ili Bitbucket, kako bi čuvali vaš kod u cloud-u, što je izuzetno korisno kada je u pitanju grupni rad na projektu.

https://bitbucket.org/
https://git-scm.com/
https://github.com/

Node.js – npm

Node Package Manager (npm) omoguća dve glavne funkcionalnosti:

  1. Online repozitorijum za node.js pakete/module koji se mogu pronaći na https://www.npmjs.com/
  2. Mogućnost da se koristeći komandnu liniju instaliraju gore pomenuti Node.js paketi kao i upravljanje verzijama i međusobnim zavisnostima Node.js paketa.

Sam npm dolazi zajedno sa Node.js instalacijom. Više od Node.js-u i njegovu instalaciju možete pronaći na https://nodejs.org/en/ . Npm omogućava jako brzo i jasno instaliranje (uvođenje u vaš projekat) mnoštvo biblioteka (dependencies) i modula koji vam mogu ubrzati i olakšati rad. Sama instalacija i deinstalacija modula je jako jednostavno, jednom komandnom linijom: 

$ npm install <Modul Name>
$ npm uninstall <Modul Name>

Treba voditi računa o delokrugu (scope) modula. Njih je moguće instalirati Globalno i Lokalno. Ukoliko se ne naglasi pri instalaciji da se modul treba instalirati globalno, on će se instalirati lokalno. Pod lokalno podrazumeva se node_modules direktorijum koji se nalazi u folderu (projektu) gde je Node pokrenut. Lokalno instaliranom modulu u projektu se može pristupiti require() metodom. Globalno instalirani paketi se smeštaju u sistemski direktorijum i moguće ih je koristiti u CLI (Command Line Interface), međutim nije ih moguće uključivati u projekat required() metodom.

Da bi koristili npm potrebno je da aplikacija sadrži manifest fajl (sa meta podacima) koji se naziva package.json. On generalno sadrži sve potrebne informacije vezane za aplikaciju kao i listu modula koji su uključeni i potrebni aplikaciji. Primer package.json fajla :

{
  "name": "My new App",
  "version": "1.0.0",
  "description": "My new App description",
  "author": "Faculty of Organizational Sciences" ,
  "main": "index.js",
  "scripts" {
    "start": "webpack --progress --colors --watch"
  },
  "dependencies": {
    "react": "^0.14.5",
    "react-dom": "^0.14.5"
  },
  "devDependencies" : {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "webpack": "^1.12.9"
  }
}

Ovaj fajl nije neophodan za rad, međutim ukoliko aplikacija treba biti javna, ili ukoliko se treba više ljudi uključiti na projekat, package.json olakšava mnoge stvari jer njega je potrebno smestiti u root folder i jednostavnom komandom: 

$npm install

automatski će se instaliti svi moduli koji su navedeni u samom package.json fajlu.

Više o samom npm-u : https://www.npmjs.com/

O načinu pisanja package.json-a i njegovim mogućim atributima : https://docs.npmjs.com/files/package.json

Webpack

Webpack je modularni bundler (module bundler-svežanj), koji omogućava napredne fukncionalnosti kao što su :

  1. Module Reloading
  2. Lazy Loading – učitava pakete kada su potrebni
  3. Hashing
  4. Code splitting
  5. Source maps – koje olakšavaju debug-ovanje minifikovanih verzija

Kao što se može videti sa slike, Webpack generiše statičke aktive koje predstavljaju međusobno zavisne module i pretvaraju ih u nešto što je, može se reći konkretno.

Webpack omogućava mnogo produktivniji i prijatniji rad, jer sa Module Reloading-om ukida potrebu da se nakom promene koda osvežava strana browser-a kako bi se te promene videle, već automatski to čini. Kako se danas zbog performansi uvek vrši minifikacija koda, Source map u velikoj meri pomaže za brzi i jednostavniji debug.

Pored Webpack-a, postoji još alata koje omogućavaju slične stvari kao što su Gulp i Grunt, međutim Webpack je danas u određenoj prednosti jer je mnogo bolji za rad na velikim projektima, pogotovu na danas veoma popularnim SPA (Single page applications) i pored toga rešava neke probleme sam dok je uz ostale potreban dodatni manualni rad.

Webpack možete instalirati koristeći npm : https://webpack.github.io/docs/installation.html

Više o webpack-u :
http://webpack.github.io/docs/
https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.61exe0s7b

JSLint

JSLint je Javascript parser i “code quality checker”, to jest alat koji proverava ispravnost ispisanog javascript koda. On nas upozorava ukoliko koristimo javascript funkcije koje su problematične, koristimo promenljive koje se ne podudaraju sa promenljivim koje smo deklarisali i upozorava nas ako smo ostavili nepotrebni zarez, nismo zatvorili zagrade petlji kao što su if, for while itd, označava kod koji se nikada ne izvršava zbog return, throw, continue ili break-a, slučaj u switch-u koji nema break izraz i slične greške. Pored ovih jednostavnih, JSLint rešava i neke druge, ne tako česte greške.

Njegov način delovanja i razloga oko kojih će upozoravati se mogu modifikovati i menjati po potrebi, kako postoji mnogo opcija koje se mogu konfigurisati, treba biti jako pažljiv kako neki zahtevi ne bi bili kontradiktorni.

JSLint naravno ne moze pronaći i rešiti sve greške, ali nam može pomoći da brže i jednostavnije pišemo čistiji kod, pri čemu ćemo se rešiti čestih grešaka pre nego što pokrenemo skriptu ili otvorimo web stranu.

JSLint možete instalirati unutar svog projekta preko npm-a : https://www.npmjs.com/package/jslint .

U slučaju da želite samo da proverite neke delove koda to se može uraditi na http://www.jslint.com/ .

JavaScript Kompajleri

Želja web programera da se reše nekih nedostataka JavaScript-a, dovelo je do stvaranja mnogih jezika koji se kasnije kompaliraju u JavaScript. To su jezici koji na primer omogućavaju jednostavnije pravljenje klasa, ili su tipiziraniji jezici. Neki od njih su TypeScript, CoffeeScript ili LiveScript.

I danas sve popularniji ES6 (ECMAScript 2015) standar i sam u sebi ima implementirano mnogo koncepata iz ovih jezika, međutim i ako ES6 postaje sve popularniji, mnogi browser-i još uvek nisu spremni za njega tako da je su potrebni transpajleri koji će taj kod kompajlirati u ES5 koji je čitljiv za većinu browsera, uključujući i stare kao sto je Internet Explorer 9. Takvi transpajleri su Babel ili es6-transpiler.

Instalacija babela je naravno moguća preno npm-a : https://www.npmjs.com/package/babel

Više o ES6(na šta treba obratiti posebnu pažnju) i babel-u : http://es6-features.org/#Constants
https://babeljs.io/

Dodatni alati

JavaScript zajednica je jedna od najboljih zajednica kada je u pitanju količina slobodnog koda, i zista je puna mnogih biblioteka koje će vam u mnogome olakšati rad.

Jedan od zahtevnih stvari u JavaScriptu je rad sa datumima, ali zahvaljujući nekim JavaScript guruima imamo Moment.js koji vam omogućava kreiranje, manipulisanje i formatiranje datuma na koji god način želite.

Ukoliko imate posla sa brojevima koji imaju puno decimala i potrebna vam je velika preciznost, pogledajte Accounting.js, verovatno će vam pomoći.

Kada dođe vreme za povećavanje performansi i minifikacija koda imate UfligyJS.

JS svet je pun predobrih i veoma korisnih alata. Iskoristite ih.

results matching ""

    No results matching ""