Uvod u modularno programiranje

Karakteristike modularnog programiranja

modularno programiranje kocka

Modularni koncept programiranja je trenutno jedan od najzastupljenijih koncepata u modernom programiranju sa Javascript-om. Zasniva se na razbijanju jedne velike aplikacije na manje, enkapsulirane, nezavisne delove koda – module. Cilj modularnosti jeste da se smanji kompleksnost prema principu “podeli pa vladaj”. Najznačajnije prednosti modularnog programiranja su:

  • preglednija i razumljivija aplikacija
  • lakše kontrolisanje domena promenjivih
  • sprečeno “zagadjenje globalnog domena”
  • ponovna upotrebljivost koda
  • mogućnost rada na istom projektu više različitih timova ili programera koji rade odvojene manje zadatke.
  • lakše debagovanje

Tipovi sintakse

U zavisnosti od verzije JavaScripta postoje različiti pristupi problemu i različite sintakse koje omogućavaju modularno programiranje:

Native ES5 sintaksa

U vreme pisanja JavaScripta, modularno programiranje nije bilo planirano kao način programiranja, tako da JavaScript sve do ES6 (ES2015) verzije nema podršku za module. U okviru native ES5 se koriste razni šabloni (eng. patern) koji imaju sličnosti sa modularnim programiranjem ali nemaju baš sve karakteristike “čistokrvnog modularnog šablona”.
Pročitajte više o native ES5 sintaksi u članku Modularno programiranje sa ES5.

ES5 sa externim bibliotekama

Upravo zbog nedostatka podrške za module u ES5 su kreirane externe syntax-e koje jeziku daju nedostajuću syntax-u:

  • CommonJS Modules
  • Asynchronous Module Definition (AMD)
  • Universal modul definition (UMD)

Pročitajete više o sardnji ES5 sa externim bibliotekama u članku Modularno programiranje – eksterna sintaksa (AMD & CommonJS).

ES6 modules sintaksa

Uz ES6 stiže podrška za modularni sistem ugradjena i u sam jezik – ECMAScript 6 modules. Nova syntax-a još uvek nije podržana od strane browser-a, pa je potrebno koristi Babel ili TypeScript da bi se transpilovala u ES5.
Pogledajte više o novoj ES6 modules sintaksi u članku Modularno programiranje sa ES6.

Modul loaders i bundlers

Ukoliko se odlučimo za modularni način programiranja aplikacije, susrećemo se sa problemom organizovanja učitavanja modula i modula od kojih oni zavise tzv. dependencies. Modul loaders i bundlers su nepohodna podrška programeru za jednostavniji i efikasniji rad sa modulima.

Modul loaders

“Modul loaders” omogućavaju dinamičko učitavanje modula pazeći na raspored učitavanja. Najpoznatiji modul loader-i su:

  • RequireJS – implementira AMD modularni sistem.
  • SystemJS – je univerzalni loader i može učitavati module u bilo kom popularnom formatu (CommonJS, UMD, AMD, ES6). Najčešće se koristi zajedno sa jsmp.io koji je više od običnog package manager-a, pa može transpilovati ES6 kao i TypeScript ili CoffeeScript.

Šta su CommonJS, AMD i UMD?

  • Asynchronous Module Definition (AMD) kao što mu i samo ime kaže, podržava asihrono učitavanje modula što je pogodno za rad sa modulima u browser-u.
  • CommonJS učitava module sinhrono i zbog toga se najčešće koristi za rad sa modulima na serverskoj strani u okruženju node.js. Iako nije planiran za rad u browser-u, uz pomoć “modul bundler-a” je moguće da prilagoditi CommonJS radu u browser-u.
  • Universal module definition (UMD) je kompatibilan i sa AMD i sa CommonJS definicijom i koristi se uglavnom ukoliko ima potrebe da se isti modul učitava na serveru i u browser-u.

Više p ovome pogledajte u članku Modularno programiranje – eksterna sintaksa (AMD & CommonJS)

Module bundlers

“Modul bundlers” rešavaju problem tako što kompajliraju sve module u jedan fajl prema odredjenom redu pazeći da neki modul koji je zavisnost drugome bude učitan na vreme. Najpoznatiji modul bundler-i:

  • Browserify – implementira CommonJS i u browser okruženju. Može da se nadogradjuje raznim plugin-ima i uz pomoć task runner-a (Gulp ili Grunt) može da završi različite poslove.
  • Webpack – može učitavati module u bilo kom popularnom formatu (CommonJS, UMD, AMD, ES6), dolazi kao jedan paket i nisu mu potrebni dodatni plugin. Pored učitavanja modula može da izvrši posao transpilovanja ES6(Typescript) u ES5 kao i transpilovanje SASS-a u CSS.

Zaključak

Izbor tipa podrške za rad sa modulima najviše zavisi od same aplikacije. Stoga ukoliko se aplikacija sastoji od manjeg broja većih modula, smatra se da je bolji izbor “modul loader”, dok se smatra da je “modul bundler” pogodniji ukoliko se aplikacija sastoji od većeg broja manjih modula. U svakom slučaju najsigurnije je isprobati oba tipa pa videti koji daje bolje rezultate.

Popularnost alata za rad sa modulima tokom zadnjih par godina se može proučiti na grafikonu google trends. Na osnovu grafikona se zaključuje da postoji ogromno interesovanje za Webpack kao predstavnika modul bundler-a, dok kod predstavnika modul load-era je vidljiv rast popularnosti SystemJS-a.


Front-End alati (pregled)

Package manager

Uvod

frontend

Današnji web development se zasniva na skupu različitih tehnologija koje se istovremeno koriste na jednom projektu, kao što je: Typescript (jezik), Sass (CSS ekstenzija), JSCS (code style linter and formater), JSHint ili TSLint (alat za detekciju grešaka i potencijalnih problema), BrowserSync (alat za sihronizaciju promena u kodu i u browser-u – Live reload )… Za jedan projekat je potrebna instalacija svakog od navedenih programa ali i svih programa (dependencies) od kojih zavise isti a prethode njihovoj instalaciji.
Package manager eliminiše potrebu za ručnim instaliranjem softvera sa svim neophodnim pratećim softverom (dependencies) kao i za ažuriranje svih tih komponenti. Package manager je skup alata zaduženih da automatizuju procesa instaliranja, konfigurisanja i uklanjanja programa. Package manageri rade sa packages tj. sa softwerom ili podacima koji se nalaze u arhivnim fajlovima. Package sadrže meta-data koji opisuju dati softver kao što je naziv softvera, verzija i lista svih dependencies (drugi softver neophodan za rad datog sofvera). Najpoznatiji package menadžeri su:

  • npm
  • bower
  • JSPM (JavaScript Package Manager)
  • Yarn

Continue reading…