Skladi tehnologij in ogrodja za celostni odjemalsko-stre ... · JavaScript (JS) technology stacks and frameworks for full-stack application development: from web clients, mobile and

Univerza v Ljubljani

Fakulteta za racunalnistvo in informatiko

Erik Usaj

Skladi tehnologij in ogrodja za

celostni odjemalsko-strezniski razvoj

aplikacij

DIPLOMSKO DELO

VISOKOSOLSKI STROKOVNI STUDIJ RACUNALNISTVA IN

INFORMATIKE

Mentor: vis. pred. dr. Borut Batagelj

Ljubljana, 2016

To delo je ponujeno pod licenco Creative Commons Priznanje avtorstva-Deljenje

pod enakimi pogoji 2.5 Slovenija (ali novejso razlicico). To pomeni, da se tako

besedilo, slike, grafi in druge sestavine dela kot tudi rezultati diplomskega dela

lahko prosto distribuirajo, reproducirajo, uporabljajo, priobcujejo javnosti in pre-

delujejo, pod pogojem, da se jasno in vidno navede avtorja in naslov tega dela in

da se v primeru spremembe, preoblikovanja ali uporabe tega dela v svojem delu,

lahko distribuira predelava le pod licenco, ki je enaka tej. Podrobnosti licence

so dostopne na spletni strani creativecommons.si ali na Institutu za intelektualno

lastnino, Streliska 1, 1000 Ljubljana.

Izvorna koda diplomskega dela, njeni rezultati in v ta namen razvita program-

ska oprema je ponujena pod licenco GNU General Public License, razlicica 3 (ali

novejsa). To pomeni, da se lahko prosto distribuira in/ali predeluje pod njenimi

pogoji. Podrobnosti licence so dostopne na spletni strani http://www.gnu.org/

licenses/.

Besedilo je oblikovano z urejevalnikom besedil LATEX.

http://creativecommons.si

http://www.gnu.org/licenses/

http://www.gnu.org/licenses/

Fakulteta za racunalnistvo in informatiko izdaja naslednjo nalogo:

Tematika naloge:

V svojem delu predstavite aktualne sklade tehnologij in ogrodja, ki temeljijo

na programskem jeziku JavaScript. Predstavite, kako lahko s pomocjo pred-

stavljenih tehnologij razvijemo mobilne in namizne aplikacije, ter ali lahko

uporabimo sklade tehnologij tudi za razvoj spletnih odjemalcev in strezniskih

sistemov. Predstavljene tehnologije uporabite v prakticnem primeru ap-

likacije s podrocja racunalniskega vida.

Zahvala mentorju, delodajalcem, sodelavcem, prijateljem in vsem, ki ste

me spremljali in spodbujali ob studiju.

Diplomsko delo posvecam vsem, ki (se vedno) ne zaupajo

programskemu jeziku JavaScript in vsem delodajalcem na

podrocju informacijske tehnologije, ki premalo vlagajo v

izobrazevanje, prenos znanja in nego kulture, ki spodbuja

strokovno rast zaposlenih.

My thesis is dedicated to anyone, who (still) doesn’t trust

JavaScript and to all IT employers not investing enough

in education, knowledge transfer and fostering of corpo-

rate culture that encourages further professional growth

of employees.

Kazalo

Povzetek

Abstract

1 Uvod 1

1.1 ECMAScript (JavaScript) . . . . . . . . . . . . . . . . . . . . 1

1.2 Vstopne tocke v sklade tehnologij . . . . . . . . . . . . . . . . 5

1.3 Metodologija ocenjevanja ustreznosti . . . . . . . . . . . . . . 10

2 Sklad tehnologij MEAN 13

2.1 MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

2.2 Express.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.3 Angular.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

2.4 Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3 Ogrodje Meteor 29

3.1 Primerjava MEAN in Meteor . . . . . . . . . . . . . . . . . . 30

3.2 Struktura map aplikacije Meteor . . . . . . . . . . . . . . . . . 34

3.3 Protokol DDP . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

3.4 Protokol HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . 36

3.5 Procesor predlog Blaze . . . . . . . . . . . . . . . . . . . . . . 37

3.6 Podpora Angular.js . . . . . . . . . . . . . . . . . . . . . . . . 38

3.7 Podpora Angular 2 . . . . . . . . . . . . . . . . . . . . . . . . 39

3.8 Podpora React . . . . . . . . . . . . . . . . . . . . . . . . . . 40

3.9 Apache Cordova . . . . . . . . . . . . . . . . . . . . . . . . . . 42

3.10 Podatkovni sklad Apollo . . . . . . . . . . . . . . . . . . . . . 44

3.11 Mantra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

4 Dodatne tehnologije za celostni razvoj 53

4.1 Tehnologije za namizne aplikacije . . . . . . . . . . . . . . . . 53

4.2 Tehnologije za storitve v oblaku . . . . . . . . . . . . . . . . . 57

4.3 Razvoj aplikacij za internet stvari . . . . . . . . . . . . . . . . 59

5 Izbira sklada tehnologij za izbran prakticni primer 63

5.1 Zajem slike na napravah . . . . . . . . . . . . . . . . . . . . . 63

5.2 Obdelava in analiza zajete slike . . . . . . . . . . . . . . . . . 67

5.3 Nalaganje slik na spletni streznik . . . . . . . . . . . . . . . . 68

6 Razvoj aplikacije 71

6.1 Priprava razvojnega okolja . . . . . . . . . . . . . . . . . . . . 71

7 Sklepne ugotovitve 77

Literatura 81

Seznam uporabljenih kratic

kratica anglesko slovensko

AJAX Asynchronous JavaScript

and XML

Asinhroni JavaScript in

XML

API Application Programming

Interface

aplikacijski programski

vmesnik

AMQP Advanced Message Queuing

Protocol

Odprtokodni protokol za

sporocanje

AWS Amazon Web Services spletne storitve Amazon

BSON Binary JavaScript Object

Notation

binarna objektna notacija

JavaScript

CEF Chronium Embedded

Framework

vgradno ogrodje Chronium

CLI Command Line Interface vmesnik ukazne vrstice

CMS Content Managment Sys-

tem

Sistem za upravljanje

vsebin

CPU,

CPE

Central Processing Unit centralna procesna enota

CRM Customer Relationship

Management

Sistem upravljanja odnosov

s strankami

CRUD Create, Read, Update and

Delete

Ustvarjanje, branje, posod-

abljanje in brisanje

CSS Cascading Style Sheet kaskadne slogovne predloge

CV Computer Vision racunalniski vid

DBA Database Administrator Skrbnik podatkovnih baz

DBMS Database Management Sys-

tem

sistem za upravljanje po-

datkovnih baz

DDP Distributed Data Protocol protokol za poizvedbe,

posodobitve in sinhro-

nizacijo v realnem casu

DOM Document Object Model objetkni model dokumenta

EC2 Elastic Compute Cloud

(Amazon)

prilagodljiva infrastruktura

v oblaku

ECMA European Computer Manu-

facturers Association

Ecma International

EN European Standard evropski standard

EJS Embedded JavaScript tem-

plates

sistem predlog EJS

ES scripting-language speci-

fication standardized by

Ecma International

standardizirana speci-

fikacija skriptnega

jezika organizacije Ecma

International

ES5 ECMA-262 5th Edition 5. izdaja ECMA-262

ES6 ECMA-262 6th Edition 6. izdaja ECMA-262

GUI Graphical User Interface graficni uporabniski

vmesnik

HTML Hyper Text Markup Lan-

guage

jezik za oznacevanje

nadbesedila

HTTP HyperText Transfer Proto-

col

protokol za prenos

nadbesedila

I/O Input/Output Vhod/Izhod

IDC International Data Corpo-

ration

ponudnik trznih informacije

iz IT

IDE Interactive Development

Environment

interaktivno razvojno okolje

IoT Internet of Things internet stvari

ISO International Organization

for Standardization

mednarodna organizacija za

standardizacijo

IT Information Technology informacijske tehnologije

JIT Just-In-Time Sprotno prevajanje

JS JavaScript JavaScript

JSX XML-like syntax extension

to ECMAScript

razsiritev ES z elemetni

podobnimi XML

JSON JavaScript Object Notation objektna notacija

JavaScript

LAMP Linux, Apache, MySQL,

PHP

sklad tehnologij LAMP

MDG Meteor Development Group razvojna skupina Meteor

MEAN Mongo DB, Express, Angu-

lar, Node

sklad tehnologij MEAN

MVC Model–View–Controller arhitektura, ki temelji na

locenih nivojih

MVP Model-View-Presenter arhitektura, ki temelji na

locenih nivojih

MVVM Model–View–View-Model arhitektura, ki omogoca

locevanje razvoja in obiko-

vanja GUI

MVW Model-View-Whatever arhitektura MV-karkoli

NoSQL Not only SQL oznaka nove generacije

podatkovnih baz, ki ne

uporabljajo (samo) SQL

NPM Node Package Manager upravitelj pakeotv Node

OAI Open API Initiative iniciativa za odprte APIje

OCR Optical Character Recogni-

tion

opticno prepoznavanje

znakov

PHP PHP: Hypertext Preproces-

sor

predprocesor nadbesedila

PoC Proof of Concept preskus koncepta

POSIX Portable Operating System

Interface

nabor standardov za

zdruzljivost operacijskih

sistemov

PSD (Adobe) Photoshop Data

file

podatkovna datoteka

Photoshop

RAM Random Access Memory spomin z direktnim

dostopom, delovni

pomnilnik

RDBMS Relational Database Man-

agement System

relacijski sistem za upravl-

janje podatkovnih baz

REST Representational State

Transfer

Predstavitveni prenos

stanja

ROM Read-Only Memory bralni pomnilnik

RPC Remote Procedure Call klic oddaljene procedure

RTC Real Time Communication komunikacije v realnem

casu

SDK Software Development Kit programska orodja za

razvoj

SIST Slovenian Institute for Stan-

dardization

Slovenski institut za

standardizacijo

SOAP Simple Object Access Pro-

tokol

protokol za razvoj spletnih

servisov, ki temelji na XML

SQL Structured Query Language strukturirani povprasevalni

jezik za delo s podatkovnimi

bazami

STB Set Top Box Naprava za sprejem ka-

belske ali IP-TV

TLS Transport Layer Security kriptografski protokol

UI User Interface uporabniski vmesnik

UID User Interface Design obikovanje interaktivnosti

uporabniskega vmesnika ob

sodelovanju z razvijalcem

URI Uniform Resource Identifier enolicen idetifikator vira

URL Uniform Resource Locator enolicen naslov spletne

strani

UXD,

UED

User Experience Design proces raziskav in izboljsav

uporabnosti izdelka in inter-

akcije uporabnik-izdelek

VM Virtual Machine virtualni stroj

XHTML Extensible Hypertext

Markup Language

razsiritev jezika za

oznacevanje nadbesedila

XML Extensible Markup Lan-

guage

format potatkov za izmen-

javo strukturiranih doku-

mentov v spletu

XSLT XML Stylesheet Language

for Transformations

XML predloga za

preoblikovanje

XSS Cross-Site Scripting napad izveden s pomocjo

vrivanja skript

Povzetek

Naslov: Skladi tehnologij in ogrodja za celosten odjemalsko-strezniski razvoj

aplikacij

S tem delom zelimo analizirati aktualne sklade tehnologij (angl. technology

stacks) in ogrodja JavaScript (JS) za celosten odjemalsko-strezniski razvoj

aplikacij (angl. fullstack development frameworks): od spletnih odjemalcev,

mobilnih in namiznih aplikacij (angl. desktop applications) do strezniskih za-

lednih sistemov in povezljivosti s spletnimi storitvami v oblaku. Fokus analize

bomo posvetili skladu tehnologij MEAN (MongoDB, Express.js, Angular.js,

Node.js) in ogrodju Meteor, ki dodatno resuje gradnjo mobilnih aplikacij s

pomocjo odprtokodnega ogrodja Apache Cordova. Ogledali si bomo orodja

za razvoj aplikacij v JS za namizne operacijske sisteme (NW.js, Electron) ter

moznost uporabe JS v scenarijih interneta stvari (angl. internet of things,

IoT ) (npr. povezane naprave Raspberry Pi). Kot prakticni problem smo

si zastavili zajem slike na razlicnih napravah, obdelavo zajete slike na odje-

malcu ali strezniskem sistemu oz. uporabo obstojecih spletnih servisov za

racunalniski vid oz. slikovno prepoznavanje. Ugotoviti zelimo ali je mozna

vzpostavitev lastne tovrstne spletne storitve razvite v JS, kje se lahko pojav-

ijo omejitve tehnologij JS in nacine kako jih lahko zaobidemo.

Kljucne besede: skladi tehnologij, ogrodja, celostni razvoj aplikacij, MEAN,

Meteor, MongoDB, Express.js, Angular, Node.js, Electron, storitve v oblaku,

IoT.

Abstract

Title: Technology stacks and frameworks for full-stack application develop-

ment

This work aims providing a comprehensive overview and analysis of current

JavaScript (JS) technology stacks and frameworks for full-stack application

development: from web clients, mobile and desktop applications to server

applications and cloud-connected services. Analysis shall focus on MEAN

technology stack and frameworks such as Meteor which also tries to leverage

mobile app development using Apache Cordova framework. We will include

an overview of available JS build tools for desktop application development

and take a look at use-cases for JS-based IoT development (i.e. connected

Raspberry Pi devices). Image capture on different devices will be used as

use-case scenario where image processing can be done either on client or

server-side or using existing CV/AI services. We should evaluate if JS is

suitable for developing CV services, establish its limitations and possible

workarounds.

Keywords: technology stacks, frameworks, full-stack development, MEAN,

Meteor, MongoDB, Express.js, Angular, Node.js, Electron, cloud services,

IoT.

Poglavje 1

Uvod

Sklade tehnologij uporabljamo, ko nam ena sama tehnologija ne omogoca

doseganja zelenih resitev, predstavniki skladov tehnologij so: AJAX, LAMP,

MEAN, itd.

Ajax npr. ni tehnologija, je v bistvu sklop vec tehnologij, vsaka ima svojo

rast, ko jih uporabimo skupaj, nam prispevajo nove zmogljivosti [1]. Pogle-

jmo, kaj vkljucuje AJAX, katerega ime je skovanka iz besed asinhroni, Java-

Script in XML:

1. standardni predstavitveni nivo z uporabo XHTML in CSS,

2. dinamicni prikaz s pomocjo DOM,

3. izmenjavo podatkov z uporabo XML in XSLT

4. XMLHttpRequest za asinhrono pridobivanje podatkov in

5. JavaScript, kot povezovalni element vsega.

1.1 ECMAScript (JavaScript)

Programski jezik ECMAScript R©, mnogim bolj poznan pod imenom JavaScript

(JS), danes odlicno pokriva tako odjemalski, kot strezniski del razvoja.

1

2 POGLAVJE 1. UVOD

JS je visoko-nivojski, dinamicen, netipiziran interpretiran programski jezik,

ki je zelo primeren za objektno-orientirano in funkcijsko programiranje [2].

Njegova uporabnost sega tudi na podrocje podatkovnih baz, ki ne uporabl-

jajo (samo) jezika SQL (NoSQL), kjer se notacija JSON [3, 4, 5] lahko

uporablja tako za poizvedbe, kot za podatkovne sheme. Njegov potencial

vidijo tudi vsi vecji proizvajalci programskih resitev in ponudniki storitev v

oblaku. Zato se bomo osredotocili na tehnologije, ki temeljijo na JS, umet-

nem jeziku, katerega tekoce znanje v danasnjem casu za razliko od znanja

esperanta lahko omogoca lazjo zaposljivost [6].

1.1.1 Zgodovina

JavaScript

Jezik avtorja Brendana Eicha se je ob nastanku v maju 1995 imenoval Mocha,

ze v prvem letu obstoja je bil najprej preimenovan v LiveScript in se pred

iztekom leta v JavaScript [7]. Prvotno je sluzil predvsem resevanju preprostih

problemov v brskalnikih Netscape in kasneje Mozilla. Okrog jezika se je

tekom let in procesov standardizacije (Slika 1.1) in boja za svoj prav med

razlicnimi ponudniki brskalnikov razvilo lepo stevilo dialektov med katerimi

lahko najdemo tako nestandardne implementacije, kot tudi kako mrtvo vejo.

ECMAScript

Med letoma 1996 in 1997 je jezik prevzela ECMA z namenom standard-

izacije in implementacije standarda na brskalnikih razlicnih proizvajalcev

programske opreme. Prva izdaja standarda nosi uradno ime ECMA-262

Ed.1: ECMAScript, ki definira ES kot:

Jezik za pisanje skript (angl. scripting language), ki se uporablja za

manipulacijo, prilagajanje in avtomacijo objektov v ze obstojecih sistemih [8].

Ter kot: Spletni skriptni jezik (angl. web scripting language), ki nudi

mehanizme pozivljanja spletnih strani brskalnikov in izvajanje strezniskih

operacij kot del spletne odjemalsko-strezniske arhitekture [8].

1.1. ECMASCRIPT (JAVASCRIPT) 3

Vidimo lahko, da je standard ze ob nastanku predvideval moznost uporabe

ES v odjemalsko-strezniskih resitvah tako v brskalniku, kot tudi na strezniku

z namenom distribuiranega izvajanja med odjemalcem in streznikom z na-

menom omogocanja prilagojenega uporabniskega vmesnika (angl. user inter-

face, UI ) za spletne aplikacije.

Standardizacija se je nadaljevala v okviru ciklicnih izdaj standarda. Tretja

izdaja uvaja regularne izraze, boljse rokovanje nizov, nove kontrolne stavke,

rokovanje izjem s konstruktom try { } catch (e){ } finally { } . Po tretji

izdaji se je zacela masovna uporaba z implementacijo v vseh brskalnikih.

Cetrta izdaja je bila sicer rezervirana a nikoli uporabljena v procesu objav

standardov ECMA, zato formalno ne obstaja [9].

ES5

Peta izdaja ECMA-262 5th edition, dodaja podporo novim funkcionalnostim:

dostop lastnostim, refleksivno kreiranje in inspekcijo objektov, kontrolo pro-

grama in atributov lastnosti, dodatne funkcije za manipulacijo polj, podporo

za JSON, in strikten nacin (angl. strict mode) z izboljsanim preverjanjem na-

pak in varnostjo. Od leta 2012 vsi moderni brskalniki [10] v celoti podpirajo

razlicico ES 5.1 [11].

ES6

Sesta izdaja ECMA-262 6th edition [12] predstavlja naslednjo generacijo ES

in prinasa stevilne nove funkcionalnosti.

ES6 locuje med spremenljivkami let in konstantami const .

Pri nizih poleg dodatnih metod prinasa tudi oblikovanje nizov s pomocjo

predlog let imeInPriimek = ’$(ime), $(priimek)’ .

Nove metode so na voljo tudi za polja, novost je tudi operator ( ... ) za

razsirjanje polj (angl. spread) in moznost razstavljanja (angl. destructuring)

objektov in polj let [x, y] = [1, 2]; //x = 1, y = 2 .

Pri funkcijah je vpeljana moznost dolocanja privzetih vrednosti vhodnih

vrednosti function vsota(x = 0, y = 0){ return x + y; } . ES6 uvaja tudi

4 POGLAVJE 1. UVOD

definicije funkcij z zapisom s puscico => .

Novost sta tudi rezervirani besedi export in import , ki omogocata uvazanje

in izvazanje iz modulov.

ES6 vpeljuje sintakso za razrede. Nekateri verjamejo, da je to v nasprotju

prototipni naravi JS, drugi so prepricani, da so razredi pomembni za lazji pre-

hod iz drugih programskih jezikov. Kakor koli ze, podpora razredom [13] je

sintakticni priboljsek obstojecemu prototipnemu dedovanju. Razrede gradimo

s pomocjo rezervirane besede class in metode constructor() (Koda 1.1).

1 class Vozilo {

2 constructor(ime) {

3 this.ime = ime;

4 this.tip = ’vozilo ’;

5 }

6 vrniIme () {

7 return this.ime;

8 }

9 }

10

11 // Ustvarimo primerek

12 let mojeVozilo = new Vozilo(’Skiro’);

13

14 class Avto extends Vozilo {

15 constructor(ime) {

16 super(ime);

17 this.tip = ’avto’

18 }

19 }

20

21 let mojAvto = new Avto(’Mazda’);

22

23 mojAvto.vrniIme (); // Mazda

24 mojAvto instanceof Avto; // true

25 mojAvto instanceof Vozilo; // true

Koda 1.1: Primer sintakse razredov v ES6.

1.2. VSTOPNE TOCKE V SKLADE TEHNOLOGIJ 5

TypeScript

TypeScritp je odprtokodni programski jezik, ki si ga lahko predstavljamo kot

nadmnozico JS, saj uporablja enako sintakso in semantiko [14]. Odprtokodni

jezik, razvit pod okriljem druzbe Microsoft, je plod razvoja Andersa Hejls-

berga, ki je med drugim glavni arhitekt programskega jezika C# in ust-

varjalec jezikov Delphi in Turbo Pascal. Izvorno kodo TypeScript lahko

prevedemo (angl. transcompile) v izvorno kodo JS, ki jo lahko izvajamo

v vsakem brskalniskem okolju in okolju Node.js, ki podpira implementacijo

ES3 ali novejso.

1.2 Vstopne tocke v sklade tehnologij

Vstopna tocka v sklad tehnologij je obicajno ena izmed tehnologij, s katero

se razvijalec sooci tekom analize zahtev in raziskave v okviru programskih

izzivov bodisi za strezniske aplikacije ali odjemalske aplikacije. Za razvijalce,

ki se ukvarjajo s podatkovnimi zbirkami ali izzivi ucinkovitega hranjenja po-

datkov, bo tako naravna vstopna tocka podatkovna zbirka MongoDB 2.1,

za razvijalce spletnih strani mogoce Express.js 2.2 ali Node.js 2.4, za razvi-

jalce uporabniskih vmesnikov pa Angular.js 2.3. Neglede na vstopno tocko,

se uporabniki prej ali slej soocijo s tezavami in zacnejo spoznavati dodatne

prednosti, ki jih prinasa uporaba celovitejsega sklada tehnologij.

Na primerih uporabe, ki izvirajo iz dejanskih izkusenj razvoja odjemalsko-

strezniskih aplikacij, si najprej oglejmo nekaj moznih vstopnih tock v sklad

tehnologij MEAN oz. v ogrodje Meteor.

1.2.1 Orodje za vzpostavitev testnih primerov

Nase prvo spoznavanje s tehnologijami sklada MEAN se je zacelo s tehnologijo

Node.js, predvsem kot moznosti za hitro vzpostavitev spletnega streznika za

potrebe lokalnega testiranja aplikacij na napravi za sprejem IP-TV (angl. set

top box, STB), ki jih je po specifikaciji razvijal zunanji izvajalec. Po kratki

6 POGLAVJE 1. UVOD

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017

ES 5.1AJAX

Moch

aL

iveS

crip

tJav

aScr

ipt

JScr

ipt

1.0

JScr

ipt

3.0

JScr

ipt

5.0

EC

MA

-262

EC

MA

-262

2nd

edit

ion

EC

MA

-262

3rd

edit

ion

EC

MA

Scr

ipt

3.1

EC

MA

-262

5th

edit

ion

EC

MA

-262

5.1

edit

ion

EC

MA

-262

6th

edit

ion

E4X

,E

CM

A-3

57

EC

MA

-404

,JSO

N

Node.j

s

io.j

sv1.

0.0

Node.

jsv4.

0.0

Node.

jsv5.

0.0

Nod

e.j

sv6.0

.0

Slika 1.1: Standardizacija in mejniki v razvoju JS in Node.js.


proucitvi zahtev smo za spletni streznik izbrali Express.js, ker omogoca tudi

enostaven razvoj programskih vmesnikov REST. Streznik Express.js je tako

sluzil, kot testni sistem za generiranje razlicnih moznih kombinacij dokumen-

tov JSON, ki so sluzile sprotnemu preverjanju implementacije aplikacije za

STB, preverjanju ponovljivosti zaznanih napak in ob vsakem danem popravku

aplikacije tudi preverjanje le-tega.

Vzporedno je druga skupina razvijalcev razvijala produkcijski API vkljucno

s sistemom upravljanja vsebin (angl. content managment system, CMS ). Ta

je bil razvit v ustaljenem razvojnem okolju kot aplikacija MVC implemen-

tirana v jeziku C# in ogrodju .Net. V grobem lahko ocenimo, da razvoj

enakovrednih REST APIjev lahko zahteva nekaj vec clovek-ur od razvoja na

osnovi Node.js in spletnega streznika Express.js.

1.2.2 Orodje za povezljivost tehnologij

Nase spoznavanje s skladom tehnologij MEAN se je tudi nadaljevalo na pro-

jektu, kjer smo izbrali Node.js, kot programski jezik za resevanje problematike

povezljivosti razlicnih tehnologij in zopet moznosti enostavne implementacije

REST APIjev, na osnovi Express.js. Aplikacija implementirana Node.js je

tako sluzila kot preprost agent, ki je spremljal skrbniski vmesnik streznika

RabbitMQ in v rednih casovnih intervalih sledil pojavom novih cakalnih vrst

ter se s pomocjo vmesnikov modula node-amqp [15] narocal na poslusanje do-

godkom protokola AMQP [16] na cakalnih vrstah in s tem zajem podatkov

iz cakalnih vrst ter vstavljanje le-teh v podatkovno zbirko Oracle MySQL.

Agent napisan v Node.js se je izkazal kot ucinkovita resitev.

1.2.3 Razvoj programskih vmesnikov

Na osnovi dobrih izkusenj in enostavnosti implementacije ob bogatem eko-

sistemu odprtokodnih modulov, je bila izbira streznika za potrebe razvoja

odjemalske aplikacije ponujena na pladnju. In za vmesnike REST API je

bila izbrana tehnologija Node.js v kombinaciji s streznikom Express.js.

8 POGLAVJE 1. UVOD

Pri vecjih projektih je za bolj ucinkovit razvoj vmesnikov API smiselno

poleg uporabe Express.js vpeljati se dodatna orodja in ogrodja, kot so speci-

fikacije Swagger, kot kljucni del specifikacije The OpenAPI Specification v

okviru iniciative OAI [17] in odprtokodno ogrodje za razvoj aplikacijskih

vmesnikov LoopBack [18].

1.2.4 Streznisko generiranje spletnih strani

Spoznavanje s spletnim streznikom Express.js se je nadaljevalo tudi na vz-

porednem projektu, kjer smo tekom tedna implementirali enostavnega agenta

temeljecega na klicih REST APIja za belezenje dohodnih in odhodnih klicev

manjsega klicnega centra. Aplikacija klicnega centra je ob posameznih dogod-

kih klicala REST API in prozila odprtje novega vnosa v sistemu upravljanja

odnosov s strankami (angl. customer relationship management, CRM ): us-

trezen zapis v podatkovno zbirko in prikaz ustreznih vnosnih polj v spletnem

brskalniku agenta v klicnem centru. Streznik Express.js je v nasem primeru

spletne strani generiral s pomocjo predlog Pug 2.2.

Tako zasnovan enostaven CRM se je izkazal, kot zelo ucinkovita resitev,

ki uspesno pokriva vse osnovne nezahtevne zahteve manjsega klicnega centra

in tako precej nizje zacetne stroske od nakupa in implementacije komplek-

snejse komercialne resitve. Tekom pol leta uporabe so se pojavile predvsem

tezave vezane na pripravo porocil. Po analizi smo lahko dodatne optimizacije

enostavno implementirali na klicih poizvedb SQL. Dodatno smo se izognili

podvajanju izdelave zgodovinskih porocil, ki smo jih predhodno odlagali v

imenik s staticnimi datotekami, ki jih streznik Express.js streze neposredno.

1.2.5 Hramba podatkov

Podobno so se tudi na prvem projektu pojavile tezave na nivoju podatkovne

zbirke, navkljub skrbni izbiri stabilnega in preverjenega modula za dostop do

podatkovne zbirke MySql in uporabi ustreznega deljenja DB-povezav (angl.

connection pooling). V zelji po nadaljnji optimizaciji aplikacij smo zaceli


raziskovati moznosti uporabe alternativnih tehnologij.

Iz vidika vecje fleksibilnosti napram klasicnim RDBMS se nam kot nar-

avna izbira ponuja podatkovna zbirka MongoDB, pri cemer je navdusujoca

moznost hrambe dokumentov v notaciji JSON brez vnaprej dolocene sheme

(angl. schema-free).

Tudi ucinkovitost in zmogljivost sta v prid MongoDB proti MySQL: Mon-

goDB lahko dosega do 50-krat hitrejsa vstavljanja in obenem dosega skoraj

3-krat boljse case pri enostavnih in kompleksnih bralnih poizvedbah [19].

MongoDB omogoca tudi enostavno siritev navzven (angl. scaling out), saj

omogoca razcepljanje podatkov med vec strezniki in samodejno prerazpore-

janje dokumentov [20].

Manj navdusujoce je dejstvo, da skrbniki podatkovnih zbirk (angl. database

administrator, DBA), vajeni predvsem relacijskih podatkovnih zbirk, niso

pripravljeni na nove, alternativne tehnologije. Kar je razumljivo, saj vsaka

nova tehnologija zahteva dodatna znanja in izobrazevanja, v katera podjetja

vlagajo pogosto premalo ali prakticno nic. Stanju pripomore dejstvo, da so

uveljavljeni ponudniki programskih resitev in tehnologij dobro vpeti v ustal-

jene posle. Z drugimi besedami, odgovornim za tehnologijo je lazje shajati

z obstojecimi, dobro vpeljanimi tehnologijami, kot prevzemati izzive preob-

likovanja in tehnoloske evolucije.

Spoznavanje novih tehnologij je tako vecinoma prepusceno lastni iniciativi

posameznikov, ki v svojem prostem casu spremljajo dogajanje v industriji in

pojav novih trendov.

1.2.6 Prototipni razvoj

Osnovni namen vsakega prototipa je zgodnja identifikacija in resitev nejas-

nosti. Za potrebe prototipnega razvoja izberemo sklad tehnologij, ki omogoca

hitro implementacijo delujocega prototipa aplikacije. Programski prototip je

delna ali mozna implementacija predlaganega novega izdelka [21] in sluzi

trem glavnim namenom:

• razjasnitvi in dopolnitvi zahtev,

10 POGLAVJE 1. UVOD

• raziskavi alternativnih resitev in

• rasti v koncni izdelek.

Prototipe locimo na horizontalne prototipe in vertikalne prototipe. Prvi

sluzijo prikazu funkcionalnih moznosti in jih poznamo kot makete (angl.

mock-up). Vertikalne prototipe poznamo tudi kot preskus koncepta (angl.

Proof of Concept, PoC ) in delujejo kot resnicni sistemi na vseh plasteh.

Druga mozna delitev prototipov je delitev na raziskovalne prototipe (angl.

Throwaway Prototype) in evolucijske prototipe.

Tako sklad MEAN kot ogrodje Meteor lahko predstavljata odlicni orodji

za prototipni razvoj. Sluzita lahko tudi za razvoj evolucijskih prototipov, ki

bodo tekom cikla prerasli v koncni izdelek. Meteor je tako primerna izbira

za vertikalni evolucijski prototip mobilne aplikacije.

1.3 Metodologija ocenjevanja ustreznosti

Ustreznost posamezne tehnologije, sklada tehnologij in ogrodja bomo ocenje-

vali glede na dano problemsko podrocje. Vsak problem bomo najprej razdelili

na manjse ter nato za vsak podproblem ocenili primernost dane tehnologije,

sklada tehnologij ali ogrodja. Pri tem bomo uporabili oceno od 1 do 5.

Koncna ocena je vsota posameznih ocen, ki jo bomo pomnozili se z 2, ce je

izbrana tehnologija odprtokodna.

Za ocenjevanje in primerjavo odprtokodnih tehnologij in modulov JS, ki

so dostopni na shrambah kode Git spletnega mesta GitHub [22], bomo za

oceno skupnosti uporabili formulo (1.1). Za izracun bomo uporabili javno

dostopna stevila zvezdic (angl. stars), stevila razcepov kode (angl. forks),

stevila objav kode (angl. commits) in stevila sodelujocih razvijalcev (angl.

contributors). Za pomoc pri izracunu smo si v ogrodju Meteor pripravili

aplikacijo.

Ocena(skupnost) = stars + forks + commits + (contributors× 10) (1.1)

1.3. METODOLOGIJA OCENJEVANJA USTREZNOSTI 11

Pri navajanju izracunov bomo oceni v oklepaju (skupnost) pripisali ime av-

torja in ime repozitorija ter tako bralcem omogocili, da podatke preverijo na

spletnem mestu GitHub.

12 POGLAVJE 1. UVOD

Poglavje 2

Sklad tehnologij MEAN

Sklad tehnologij MEAN (MongoDB, Express.js, Angular, Node.js) se pojavi

predvsem, kot sodobna alternativa skladu tehnologij LAMP (Linux, Apache,

MySQL, PHP), ki je bil kot tak poimenovan leta 1998.

Ze po kljucnih komponentah hitro opazimo, da operacijski sistem ni vec

del sodobnega sklada tehnologij. Temu je tako predvsem zaradi vedno sirse

uporabe moznosti izvajanja v oblaku, kjer uporabnik zakupi dolocene sis-

temske zmogljivosti, operacijski sistem je tako lahko vse bolj prikrit, nepris-

oten in virtualen.

Sklad MEAN je odprt in podprt na vseh vodilnih sistemih v oblaku in

vseh sodobnih operacijskih sistemih, ceprav se ob sami uporabi lahko dejan-

sko izkaze, da je uporaba in konfiguracija samega sklada obicajno lazja na

sistemih UNIX. Tezave pridejo se toliko bolj do izraza na ne-UNIX operaci-

jskih sistemih, ko paketi Node.js vsebujejo tudi odprtokodne komponente, ki

niso napisane v JS in zahtevajo predhodno prevajanje oz. gradnjo kompo-

nent z razlicnimi prevajalniki in sistemi gradnje, ki so se vedno vezani na sam

operacijski sistem. Nevarnosti migracije razvijalcev sodobnih tehnoloskih

skladov na operacijske sisteme UNIX, predvsem odprtokodne razlicice Linux

in komercialni OS X, se koncno prilagaja tudi druzba Microsoft, ki je med

drugim najavila podporo ukazni vrstici z lupino Bash v operacijskem sistemu

Windows. Najava je predvsem odziv na povratne informacije razvijalcev, ki

13

14 POGLAVJE 2. SKLAD TEHNOLOGIJ MEAN

jim sistem Windows otezuje uporabo odprtokodnih orodij [23].

MEAN ni na voljo kot celovito ogrodje z enotno namestitvijo, zato si v

enacbah (2.1), (2.2), (2.3), (2.4) in (2.5) najprej poglejmo ocene skupnosti

posameznih tehnologij:

Ocena(mongodb/mongo) = 9375 + 2639 + 34162 + 252 × 10 = 48696 (2.1)

Ocena(expressjs/express) = 25578 + 4792 + 5244 + 189 × 10 = 37504 (2.2)

Ocena(angular/angular.js) = 49690 + 23966 + 7820 + 1476 × 10 = 96236 (2.3)

Ocena(angular/angular) = 12512 + 3254 + 4514 + 278 × 10 = 23060 (2.4)

Ocena(nodejs/node) = 23827 + 3450 + 14134 + 930 × 10 = 50711 (2.5)

Sicer je vsaj nekaj aplikacijskih ogrodji osnovanih na tehnologijah MEAN.

Poglejmo si nekaj kljucnih predstavnikov in v enacbah (2.6), (2.7) in (2.8)

njihove ocene skupnosti:

• mean.io

Ocena(linnovate/mean) = 8998 + 2732 + 1715 + 168 × 10 = 15125 (2.6)

• sailsjs.org

Ocena(balderdashy/sails) = 14622 + 1529 + 5686 + 206×10 = 23897 (2.7)

• ionicframework.com

Ocena(driftyco/ionic) = 24133 + 4807 + 4428 + 259 × 10 = 35958 (2.8)

Iz ocen skupnosti je razvidno, da imajo posamezne tehnologije MEAN

boljse ocene od zgoraj nastetih ogrodij. Izjema je Angular 2 (2.4), ki ima tudi

nizjo oceno od prve razlicice Angular.js (2.3), kar nakazuje razmeroma nizek

sprejem (angl. adoption) med razvijalci. Kot izhodisce pri izbiri primernosti

posameznega ogrodja lahko priporocimo ogrodja, ki dosegajo ali presegajo

oceno skupnosti Express.js (2.2). Temu pogoju se najbolj pribliza ogrodje

ionicframework.com.

2.1. MONGODB 15

2.1 MongoDB

Na podatkovno zbirko MongoDB lahko gledamo tudi, kot prvi nivo sklada

tehnologij MEAN. MongoDB je predstavnik podatkovnih shramb NoSQL,

druzine podatkovnih baz, ki ne uporabljajo (samo) poizvedb SQL.

MongoDB je dokumentna podatkovna shramba, ki kot osnovo uporablja

strukture JSON pretvorjene v binarni zapis BSON 2.1.1, kar je lahko pred-

nost za celosten razvoj odjemalsko-strezniskih aplikacij. Na same dokumente

v podatkovni shrambi lahko gledamo kot analogijo strukturam program-

skih jezikov, ki omogocajo asociacijo kljuca in vrednosti (angl. key-value).

Predstavniki tovrstnih podatkovnih struktur so imeniki (angl. dictionaries),

razprsilne tabele (angl. hashes), mapiranje (angl. maps) in asociativna polja

(angl. associative arrays).

MongoDB hrani dokumente v zbirkah (angl. collections) (Slika 2.1), ki

predstavljajo analogijo tabelam relacijske podatkovne baze, zbirka je tako

skupina povezanih dokumentov, ki imajo nabor skupnih indeksov.

JavaSkriptna objektna notacija JSON se lahko tako propagira od po-

datkovne zbirke do samih odjemalcev. Dejansko se JSON tekom sklada

tehnologij lahko pretvarja iz JSONa v binarni zapis BSON in obratno.

Pomembno je, da so pretvorbe (angl. serialization) dobro specificirane

in standardizirane. Kot primer, vzemimo pretvorbo datuma v niz znakov

z metodo JSON.stringify( value ) oz. Date.prototype.toJSON( key ) , kjer

ES5.1 [11] doloca pretvorbo v datumski zapis ISO 8601 [24]. Vidimo lahko, da

se z upostevanjem standardov izognemo situacijam, kot se lahko pojavljajo

v drugih tehnologijah [25, 26].

2.1.1 BSON

BSON ali Binarni JSON je serijski binarni format, ki se uporablja za hrambo

dokumentov. Zasnova binarnega formata BSON omogoca naslednje znacilnosti:

lahkotnost (angl. lightweight) z minimalnimi rezijskimi podatki, prehodnost

(angl. traversability) in ucinkovitost [27]. Knjiznice za binarni format BSON


na voljo za vecino programskih jezikov. V Node.js lahko uporabimo uradno

knjiznico node-mnongodb-native ali node-buffalo. V enacbah (2.9) in (2.10)

si poglejmo njuni oceni skupnosti.

Ocena(mongodb/node−mongodb−native) = 4766 + 1026 + 3719 + 214 × 10 = 11651

(2.9)

Ocena(marcello3d/node−buffalo) = 101 + 21 + 47 + 4 × 10 = 209 (2.10)

Na knjiznici node-buffalo ne poteka aktiven razvoja, kar se odraza tudi v

nasi oceni skupnosti (2.10). Tako je vecinoma smiselna uporaba knjiznice

node-mnongodb-native za katero skrbijo avtorji MongoDB.

2.1.2 Poizvedbe v MongoDB

Poizvedbe izvajamo s pomocjo metod MongoDB za operacije CRUD, ki si jih

lahko ogledamo v Tabeli 2.1. Primer bralne poizvedbe (Slika 2.2) uporablja

metodo db.imezbirke.find( {} ); , kjer kriterije poizvedbe podajamo kot

JSON, rezultat nato se uredimo z metodo .sort() .

MongoDB, poleg enostavnih operacij kot so stetja .count() , enolicnosti

.distinct() , grupiranja .group() , omogoca tudi operacije Map-Reduce

db.collection.mapreduce(mapirnaFunkcija, redukcijskaFunkcija, opcije);

in uporabo agregacijskega cevovoda (angl. aggregation pipeline)

db.collection.aggregate([ faza1, faza2, ... fazaN ]); .

Primerjavo agregacij MongoDB [28] s stavki SQL (angl. SQL clauses)

najdemo v Tabeli 2.2.

2.1. MONGODB 17

Slika 2.1: Prikaz hrambe podatkov v dokumentih in zbirkah MongoDB.

Slika 2.2: Prikaz delovanja enostavne bralne poizvedbe v MongoDB.


Tabela 2.1: Metode MongoDB za operacije vstavljanja, branja, posodabl-

janja in brisanja.

Operacija Metoda MongoDB

Vstavljanje db.collection.insert()

db.collection.insertOne()

db.collection.insertMany()

Branje db.collection.find()

Posodabljanje db.collection.update()

db.collection.updateOne()

db.collection.updateMany()

db.collection.replaceOne()

Brisanje db.collection.remove()

db.collection.deleteOne()

db.collection.deleteMany()

Tabela 2.2: Primerjava stavkov SQL in agreagacij MongoDB.

Stavki SQL Agregacije MongoDB

WHERE $match

GROUP BY $group

HAVING $match

SELECT $project

ORDER BY $sort

LIMIT $limit

SUM() $sum

COUNT() $sum

JOIN $lookup

2.2. EXPRESS.JS 19

2.2 Express.js

Express.js je minimalisticno spletno ogrodje (angl. web framework), ki se

izvaja kot aplikacija Node.js. Omogoca robusten nabor kljucnih funkcional-

nosti za spletne in mobilne aplikacije [29], vsebuje vse potrebne metode

HTTP in vmesno opremo (angl. middleware), ki omogocajo enostavno in

hitro gradnjo robustnih APIjev. Express je projekt fundacije Node.js Foun-

dation. Za namestitev spletnega ogrodja Express.js potrebujemo predhodno

namescen Node.js, saj namestitev izvedemo s pomocjo ukaza npm:

npm install express -g .

Ko imamo na svojem sistemu namescen Express.js, lahko novo aplikacijo

preprosto generiramo s pomocjo ukaza, ki ga klicemo v delovnem imeniku:

express aplikacija . Generator bo v nasi delovni mapi ustvaril novo mapo

aplikacija in v njej pripravil strukturo aplikacije Express. Struktura, ki jo

pripravi generator aplikacij Express.js (Slika 2.3), je le ena od moznih struk-

tur projekta spletne aplikacije, ki si jo lahko po potrebi prilagodimo lastnim

zeljam in potrebam.

Zatem nam preostane le se, da v mapi aplikacija pozenemo npm install

in s tem namestimo vse zahtevane module. Kateri moduli so vsebovani lahko

preverimo v datoteki package.json, ter nato pozenemo aplikacijo z ukazom

npm start , ter obiscemo spletno stran v brskalniku na naslovu:

http://localhost:3000/.

S tem imamo na voljo povsem delujoci spletni streznik. Staticne vse-

bine lahko odlagamo v mapo public, obicajno so to slike, minimirane odje-

malske skripte JS in datoteke kaskadnih slogov CSS. Spletne strani Express.js

privzeto generira s pomocjo sistema predlog Pug (vcasih znanem po imenu

JADE ). Na voljo imamo tudi druge sisteme predlog, kot sta Mustache ali

EJS.

Izbira sistema predlog je prepuscena razvijalcu, priljubljenost posameznih

predlog ocenimo na podlagi ocene skupnosti na GitHubu v enacbah (2.11),

(2.12) in (2.13).

http://localhost:3000/


aplikacija

bin

www

package.json

public

images

javascripts

stylesheets

style.css

routes

index.js

users.js

views

error.jade

index.jade

layout.jade

Slika 2.3: Struktura nove aplikacije Express.

2.3. ANGULAR.JS 21

Ocena(pugjs/pug) = 11192 + 1566 + 2419 + 175 × 10 = 16927 (2.11)

Ocena(janl/mustache.jsg) = 9363 + 1852 + 694 + 86 × 10 = 12769 (2.12)

Ocena(mde/ejs) = 660 + 101 + 2828 + 88 × 10 = 4469 (2.13)

Iz ocen skupnosti je razvidno, da je privzeti sistem predlog Pug tudi

najbolj priljubljen. Sledi mu sistem predlog Mustache. Najmanj priljubljen

je sistem predlog EJS.

2.3 Angular.js

Angular.js je odprtokodno ogrodje za spletnih in mobilnih aplikacij, ki cilja

na poenostavitev razvoja in testiranja aplikacij s pomocjo arhitektur MVC

in MVVM oz. MV-karkoli (angl. model-view-whatever, MVW ). Temelji na

prepricanju, da je deklarativno programiranje primerno za UI in povezavo

programskih komponent, medtem ko je imperativno programiranje primernejse

za poslovno logiko aplikacije [30].

Ogrodje Angular razsirja HTML in omogoca dvosmerno povezovanje po-

datkov (angl. two-way data-binding) 2.3.2, kar omogoca samodejno sinhro-

nizacijo modelov (angl. model) in pogledov UI (angl. views). Angular je

ogrodje za celni del sistema (angl. front-end framework), ki omogoca izgrad-

njo dinamicne spletne strani SPA. Angular pomaga organizirati kodo JS in

pomaga graditi odzivne (angl. responsive) in hitre spletne strani ter obenem

omogoca enostavno testiranje. Angular kot odjemalsko ogrodje JS omogoca

dodajanje interaktivnosti spletnim stranem HTML. Podrobneje si poglejmo

nekaj gradnikov in izrazoslovje, ki ga uporablja ogrodje.


2.3.1 Gradniki in izrazoslovje

Direktive

Angular spletnim stranem HTML dodaja obnasanje (angl. behaviour) s

pomocjo direktiv (angl. directives). Direktive so Anglularju lastni atributi

na elementih HTML s predpono ng- , ki Angularju povedo, katera koda

JS naj se izvede ali sklicuje. Atribut ng-controller="StoreController" na

elementu body , tako izvede klic funkcije function StoreController() v da-

toteki app.js.

Moduli

Moduli (angl. modules) vsebujejo dele aplikacije Angular.js in omogocajo

lazje vzdrzevanje, testiranje in boljso preglednost aplikacije. Modul ustva-

rimo s pomocjo metode angular.module , kot je prikazano v primeru Kode

2.1. V samih modulih lahko uporabljamo tudi druge module. Z moduli

definiramo in oblikujemo tudi odvisnosti aplikacije (angl. application de-

pendencies). Modul je kontejner za krmilnike. Krmilniki vedno pripadajo

modulu.

1 var app = angular.module(’imeaplikacije ’, [ ]);

Koda 2.1: Primer ustvarjanja novega modula v datoteki app.js.

Krmilniki

Krmilniki (angl. controllers) definirajo obnasanje aplikacije s pomocjo defini-

cije funkcij in vrednosti. Direktiva ng-controller definira krmilnik, ki je

objekt JS ustvarjen s konstruktorjem objekta JS.

Doseg

Doseg (angl. scope) je vezni del med vmesnikom UI in krmilnikom JS. Doseg

podajamo z argumentom $scope .

2.3. ANGULAR.JS 23

Servisi

Servisi (angl. services) so funkcije ali objekti, ki so na voljo v aplikaciji

Angular.js. Angular vsebuje kar nekaj internih servisov: $http , $route ,

$window , $location , itd. Lastne servise lahko definiramo s pomocjo metod

factory() ali service() [31].

Izrazi

Izrazi (angl. expressions) omogocajo vstavljanje dinamicnih vrednosti v

HTML, zapisemo jih v dvojnih zavitih oklepajih: {{4+6}} . Izrazi pridejo

do izraza v kombinaciji z direktivami, npr. direktivo za ponavljanje:

<h1 ng-repeat="x in records">{{x}}</h1>

Filtri

Filtri (angl. filters) oblikujejo vrednosti izrazov za prikaz v UI. Filtre aplici-

ramo na izraz s sintakso: {{ izraz | imefiltra:opcije }} . Angular.js vse-

buje naslednje filtre:

• currency oblikuje stevilo v valutni zapis.

• date omogoca oblikovanje datumov.

• filter se uporablja za izbor podmnozice polja.

• json omogoca pretvorbo objekta v niz JSON.

• limitTo omeji polje ali niz na doloceno stevilo elementov ali znakov.

Npr. ng-repeat="products in store.products | limitTo:3" .

• lowercase pretvori niz znakov v male crke.

• number oblikuje stevilo v niz.

• orderby uredi polje.

Npr. ng-repeat="products in store.products | orderBy:’-price’" .

• uppercase pretvori niz znakov v velike zacetnice.


2.3.2 Dvosmerno povezovanje podatkov

Dvosmerno povezovanje podatkov (angl. two-way data binding) predstavlja

sinhronizacijo med modelov in pogledom UI. Predloge v Angularju delujejo

drugace. Najprej se predloga prevede v brskalniku. Rezultat prevajanja je

ziv pogled UI (angl. live view), kakrsna koli sprememba v njem se takoj

odseva v model in kakrsne koli spremembe na modelu se propagirajo na ziv

pogled UI. Model predstavlja enoten vir resnice (angl. single-source-of-truth)

za stanje aplikacije [32], kar poenostavlja programski model. Na prikaz UI

lahko gledamo kot na projekcijo modela v realnem casu.

2.3.3 Vstavljanje odvisnosti

Angular ima vgrajen podsistem vstavljanja odvisnosti (angl. dependency

injection, DI ), kar olajsa razvoj, razumevanje in testiranje aplikacije. DI

omogoca povprasevanje po odvisnostih in s tem je za dostop do kljucnih

servisov Angular dovolj, da servis dodamo kot parameter, Angular bo zaz-

nal, da ga potrebujemo ter vrnil primerek servisa.

2.4 Node.js

Node.js R© je streznisko JS okolje (angl. environment) osnovano na zmogljivem

odprtokodnem JS-interpreterju V8, razvitem v programskem jeziku C++

pod okriljem projekta Chronium. V8 implementira ES3 specifikacije ECMA-

262 in s pomocjo vgrajenega prevajalnika (angl. Just-In-Time, JIT ) zago-

tavlja hitro izvajanje kode JS.

Poglejmo si izracun ocene skupnosti V8 (2.14).

Ocena(v8/v8) = 2458 + 624 + 10000 + 118 × 10 = 14262 (2.14)

V8 je vecinoma vkljucen v vecje projekte, kot so brskalniki, Node.js ali

ogrodje Electron. Povprecni razvijalci tako z V8 nimajo neposrednega stika

in to se odseva v nizki oceni skupnosti (2.14).

2.4. NODE.JS 25

Node je v celoti zasnovan za asinhrono izvajanje V/I operacij. Tudi druga

okolja omogocajo asinhrone V/I funkcionalnosti a so le-te vecinoma omejene

v asinhronih razlicicah. Po drugi strani je v Node.js vse, ce smo bolj natancni

skoraj vse, asinhrono. Pisanje ne-asinhrone kode v Node.js je lahko tezje

od uporabe asinhrone kode. Kljub stevilnim razpravam, ali je asinhrono

programiranje pravi vademekum, ostaja dejstvo, da je asinhronost lahko zelo

primerna resitev za stevilne spletne in omrezje probleme, ki tudi sami po sebi

vsebujejo asinhronost.

S programiranjem v JS se lahko tudi izognemo nepotrebnim miselnim

preklopom in s tem tudi nepotrebnim sintakticnim napakam pri programi-

ranju v razlicnih programskih jezikih. Razvijalec programske opreme se lahko

tako z izbiro enega jezika, ki je primeren tako za razvoj na odjemalcu kot

strezniku, bolje posveti in poglobi svoje znanje predvsem na enem kljucnem

programskem jeziku.

2.4.1 Npm

Sistem upravljanja paketov Npm je pomemben prednostni faktor Node.js.

Rast Npm in primerjavo z ostalimi shrambami kode lahko vidimo na grafu na

Sliki 2.4. Prav bogat in hitro rastoc nabor odprtokodnih paketov je kljucna

prednost za izbiro tehnologij, ki temeljijo na JS in Node.js. Razvijalec lahko

svojo lastno resitev sestavi iz stevilnih ze obstojecih odprtokodnih gradnikov,

kar si lahko predstavljamo kot sestavljanje s pomocjo kock. Razvijalci lahko

izvirne resitve in izboljsave preko Npm prispevajo nazaj skupnosti, ta tako

ze presega cetrt milijona paketov. Npm je najvecji ekosistem odprtokodnih

knjiznic na svetu [33, 34].

Npm je po stevilu paketov ze sredi leta 2014 presegel Apache Maven [34],

shramba kode programskega jezika Java. Pri tem moramo upostevati, da se

Maven uporablja tudi za razvoj aplikacij za naprave Android, ki po ocenah

IDC presega 80% trzni delez pametnih telefonov [35].


Slika 2.4: Rast stevila prenosov modulov za razlicne programske jezike [34].

V enacbi (2.15) si poglejmo se izracunano oceno skupnosti Npm.

Ocena(npm/npm) = 9498 + 1966 + 6852 + 368 × 10 = 21996 (2.15)

Glede na velikost samega ekosistema Npm je ocena skupnosti presenetljivo

nizka, kar lahko pripisemo dejstvu, da je Npm sestavni del Node.js.

2.4.2 Dogodkovna zanka

Dogodkovna zanka (angl. event loop) okolju Node.js omogoca obvladovanje

visokega stevila hkratnih zahtev ceprav se izvaja v eni sami niti. Dogod-

kovna zanka delegira procesiranje operacijskemu sistemu preko vmesnika

POSIX in medtem nadaljuje rokovanje novih zahtev in povratnih klicev, kot

je prikazano na Sliki 2.5.

2.4. NODE.JS 27

Slika 2.5: Dogodkovna zanka okolja Node.js.


Poglavje 3

Ogrodje Meteor

Meteor sestavlja nabor odprtokodnih projektov (MIT licenca), ki skupaj

tvorijo celovito aplikacijsko platformo JS za reaktiven (angl. reactive) razvoj

aplikacij na mobilnih platformah in spletu.

Ogrodje Meteor si lahko predstavljamo kot sklad (Slika 3.1), ki poteka od

virov podatkov preko strezniskega dela aplikacije do odjemalcev. Na ogrodje

je sestavljeno iz treh sklopov. Sklopa, ki skrbi za uporabniski vmesnik (UI),

podatkovnega sklopa (angl. data) in orodij za gradnjo (angl. build tools).

Sklop, ki skrbi za UI sestavljajo komponente:

• Angular, Blaze ali React,

• usmerjanje (angl. routing) in

• odjemalska reaktivnost (angl. client reactivity).

Podatkovni sklop sestavljajo:

• Odjemalski predpomnilnik Minimongo,

• tehnologija WebSocket,

• metode (angl. methods) in objave (angl. publications) ter

• gonilnik podatkovne baze.

29

30 POGLAVJE 3. OGRODJE METEOR

Slika 3.1: Ogrodje Meteor kot sklad tehnologij

Orodja za gradnjo vsebujejo:

• podporo ES,

• mobilne kontejnerje,

• vroce vrivanje kode (angl. hot code push) in

• storitve namescanja aplikacije na spletni streznik (angl. deployment).

3.1 Primerjava MEAN in Meteor

Ob primerjavi sklada tehnologij MEAN z orodji in tehnologijami, ki jih vse-

buje Meteor, ugotovimo precej podobnosti:

• oba temeljita na Node.js,

3.1. PRIMERJAVA MEAN IN METEOR 31

• v obeh igra kljucno vlogo JS,

• oba nudita podporo za ES6,

• oba uporabljata MongoDB,

• oba nudita moznost uporabe Angular.js in Angular 2.

Sele razlike nam pravzaprav pokazejo dodatne prednosti, ki jih prinasa Me-

teor. Te lahko na kratko povzamemo v naslednjih tockah:

• MEAN nima enotne namestitve. Razvijalec mora tako namestiti posa-

micne tehnologije in orodja. Node.js, Bower, Grunt, Yeoman so le

nekatera orodja s pomocjo katerih gradimo aplikacije sklada tehnologij

MEAN.

• Meteor vsebuje vse kar potrebujemo v eni enostavni namestitvi.

• Meteor ze vsebuje delujoc MongoDB, ki nam je na voljo takoj, ko

pozenemo aplikacijo. Tudi dostop preko ukazne vrstice je poenostavljen

s pomocjo ukaza: meteor mongo .

• Meteor zasede manj prostora na disku.

• Meteor ze vkljucuje podporo za gradnjo mobilnih aplikacij s pomocjo

ogrodja Apache Cordova 3.9.

• Meteor se posluzuje podatkov na zici (angl. data on the wire), kar

pomeni, da streznik posilja podatke namesto dokumentov HTML, ki

jih nato odjemalec ustrezno prikaze.

• Meteor omogoca reaktivnost na celotnem skladu, kar omogoca, da vmes-

nik vedno odseva pravo stanje z najmanjsim razvojnim vlozkom.

• Meteor omogoca kompenzacijo za cas zakasnitve (angl. latency compen-

sation). Tako so rezultati operacij vidni takoj, medtem ko pri obicajnih

aplikacijah uporabniki cakajo, da se dolocene operacije izvedejo na

strezniku, preden se odsevajo na vmesniku.


• Meteor nudi visjo stopnjo abstrakcije in razvijalcem omogoca razvoj

aplikacij brez skrbi o kompleksnosti povezljivosti med odjemalcem in

streznikom.

• Meteor ponuja lastno infrastrukturo v oblaku Galaxy, mozna je tudi

namestitev na storitve v oblaku drugih priljubljenih ponudnikov.

• Meteor minimira in verizi vse datoteke JS in CSS, ter jih streze kot

staticne datoteke.

• Snovalci ogrodja Meteor so mnenja, da je linearen model izvajanja bolj

primeren za tipicne strezniske programe. Meteor in MEAN se zato

razlikujeta v nacinu izvajanja strezniske kode (Koda 3.1).

• Meteor omogoca dobre prakse za mobilne spletne aplikacije W3C [36].

Zdruzevanje in minimiranje JS in CSS, podvojevanje lokalnih podatkov

na streznik in predvsem zmanjsanje zaznanih zakasnitev (angl. per-

cieved latency), kar je kljucno za uporabnost (angl. usability) [37] in

proces izboljsav interakcije uporabnik-izdelek (angl. User Experience

Design, UXD) [38].

Poglejmo si se enacbo (3.1) za oceno skupnosti ogrodja Meteor.

Ocena(meteor/meteor) = 34214 + 4220 + 10000 + 293 × 10 = 51364 (3.1)

Na podlagi ocene skupnosti lahko sklepamo, da je ogrodje Meteor v kontekstu

ogrodij za gradnjo mobilnih aplikacij bolj priljubljeno od ogrodja Ionic (2.8)

in Apache Cordova (3.7). Podobno ima tudi boljso oceno skupnosti v primer-

javi s spletnim ogrodjem Express.js (2.2). Na racun prejetega stevila zvezdic

in razcepov kode ima tudi nekoliko boljso oceno skupnosti pred Node.js (2.5).

V kontekstu ogrodij UI je Meteor na tretjem mestu, pred njim sta React (3.5)

in Angular.js (2.3), ki jih sicer lahko uporabimo tudi v samem ogrodju Me-

teor.

3.1. PRIMERJAVA MEAN IN METEOR 33

3.1.1 Izvajanje strezniske kode

Marsikateremu razvijalcu se programiranje v Node.js lahko zdi neprakticno

zaradi tezav s povratnimi klici (angl. callback soup, angl. callback hell) [39].

Sicer je na voljo kar nekaj tehnik, s katerimi se lahko v okolju Node.js

ognemo povratnim klicem: vlakna (angl. fibers), obljube (angl. promisses)

in generatorske sorutine (angl. generator-based corutines) so le nekatere.

Meteor pri izvajanju strezniske kode privzeto uporablja linearen model

izvajanja na osnovi vlaken node-fibers in programske vmesnike implementira

nivo visje. Vlakna node-fibers nudijo nivo abstrakcije za dogodkovno zanko

(angl. event loop) in omogocajo sekvencno izvajanje funkcij in s tem pisanje

asinhrone kode brez povratnih klicev. Obstoja vlaken se nam ni treba zave-

dati. S tem Meteor omogoca najboljse iz obeh svetov: asinhrono ucinkovitost

Node.js in programiranje v sinhronem slogu.

Moznost pisanja Node.js aplikacij brez povratnih klicev je atraktivna,

tudi za vse razvijalce, ki so prav zaradi povratnih klicev sovrazili Node.js.

Vendar je lahko po drugi strani prav to tezava, saj vecina modulov Node.js

pridobljenih preko Npm, vsebuje prav asinhrone funkcije. Tudi za to je poskr-

bljeno s pomocjo metode Meteor.wrapAsync , ki asinhrono funkcijo ovije in

pretvori v sinhrono in nam omogoca pisanje kode, ki je na videz sekvencna,

ceprav se v ozadju v dogodkovni zanki Node.js izvaja asinhrono. Sinhrono

ovijanje si poglejmo se na primeru (Koda 3.1).

1 Meteor.methods ({

2 ustvariUporabnika: function( uporabnik ) {

3 // sinhrono ovijanje asinhrone funkcije

4 var ustvariUporabnikaSync = Meteor.wrapAsync(

ustvariUporabnikaAsync , novUporabnik );

5 // klic sinhrone funkcije

6 try{

7 var rezultat = ustvariUporabnikaSync ({

8 ime: uporabnik.ime ,

9 priimek: uporabnik.priimek

10 });

11 // obravnavamo rezultat sinhronega klica


12 console.log("Rezultat :",rezultat);

13 }

14 catch(error){

15 console.log("Napaka: ",error);

16 }

17 }

18 });

Koda 3.1: Primer ovijanja asinhrone funkcije z metodo Meteor.wrapAsync.

3.2 Struktura map aplikacije Meteor

Meteor zbere vse datoteke JS v drevesni strukturi projekta z izjemo vsebine

map server, public in private, jih minimira in streze vsakemu odjemalcu. Zato

je zgolj nasa lastna odlocitev ali bomo vso kodo pisali v eno samo datoteko

ali kodo locili v posamezne datoteke. Poleg strukture (Slika 3.2), ki se ustvari

ob klicu meteor create aplikacija , si poglejmo razlicne mape, ki jih lahko

uporabimo poleg map client in server :

• client . . . Datoteke JS v mapi client se izvajajo le na odjemalcih.

• server . . . Mapa server vsebuje streznisko kodo JS.

• private . . . Vsebina mape private, njenih podmap in datotek bo za-

sebna. Vsebina datotek je strezniku dostopna preko metod Assets API.

• public . . . Meteor streze vse datoteke iz mape public kot staticne da-

toteke. Mapa je tako namenjena slikam, ikonam in podobnim vsebi-

nam.

• imports . . . Datoteke v mapi in podmapah imports se strezejo z za-

kasnjenim nalaganjem (angl. lazy-load).

• tests . . . Vse, kar je vsebovano pod mapo tests se ne nalaga. Vsebina

te mape je namenjena kodi za testiranje.

3.2. STRUKTURA MAP APLIKACIJE METEOR 35

aplikacija

.gitignore

.meteor

.finished-upgraders

.gitignore

.id

packages

platforms

release

versions

client

main.css

main.html

main.js

package.json

server

main.js

Slika 3.2: Struktura nove aplikacije Meteor.

Struktura je pomembna zaradi pravil ob gradnji aplikacije. Datoteke v

podmapah se nalagajo najprej, tako se datoteke v najgloblji mapi nalozijo na-

jprej in datoteke v korenski mapi nalozene kot zadnje. Datoteke v posamezni

mapi se nalagajo po abecednem vrstnem redu imen datotek. Po urejanju se

vse datoteke vsebovane pod mapami imenovanimi lib, prestavijo pred vse os-

tale, pri cemer se vrstni red ohrani. V zadnjem koraku so vse datoteke, ki

ustrezajo vzorcu main.* premaknjene pred vse ostale, pri cemer se ohranja

vrstni red.


3.3 Protokol DDP

DDP je protokol, ki ga Meteor uporablja za komunikacijo med odjemalcem

in streznikom. Vse izmenjave podatkov med objavami (angl. publication)

na strezniku in narocnino (angl. subscription) na odjemalcu, klici metod in

operacije MongoDB so posredovani kot sporocila DDP.

Ceprav se Meteor izvaja kot streznik na enih vratih, interno deluje kot

dva locena streznika: streznik HTTP in streznik DDP. Prvi sluzi strezenju

staticnih datotek in zahtev HTTP. Za ta namen se interno uporablja Node.js

modul connect. Streznik DDP skrbi za vse objave, operacije MongoDB in

klice metod. Za to se uporablja transportni protokol SockJS. Lahko recemo,

da je streznik DDP pravzaprav prilagojen streznik SockJS.

Meteor ob vsaki zahtevi DDP ustvari novo vlakno node-fiber. Privzeto

Meteor izvaja po eno zahtevo naenkrat za vsakega odjemalca, kar pomeni eno

vlakno za vsakega odjemalca v danem trenutku, kar lahko tudi spremenimo.

Ceprav MongoDB ni podatkovna zbirka v realnem-casu, Meteor omogoca

delovanje v realnem casu s pomocjo:

• kroznega pozivanja (angl. polling) v 10-sekundnih intervalih in

• uporabo dnevnika operacij (angl. oplog).

Druga moznost je pomembna, ker je krozno pozivanje draga operacija.

3.4 Protokol HTTP

Meteor lahko opravlja tudi zahteve HTTP. Ce zelimo implementirati pro-

gramske vmesnike REST (angl. RESTful API ) [40, 41], moramo za uporabo

funkcionalnosti protokola HTTP najprej dodati paket HTTP

z ukazom: meteor add http .

Paket je seveda tudi ze vsebovan v paketih, kot sta npr. REST for Me-

teor ali Restivus, namenjenih implementaciji APIjev na ogrodju Meteor. V

3.5. PROCESOR PREDLOG BLAZE 37

enacbah 3.2 in 3.3 si poglejmo oceno skupnosti le-teh.

Ocena(stubailo/meteor−rest) = 233 + 35 + 170 + 10 × 10 = 538 (3.2)

Ocena(kahmali/meteor−restivus) = 410 + 61 + 154 + 11 × 10 = 735 (3.3)

Nizki oceni skupnosti lahko nakazujeta, da se vecina razvijalcev odloci za

paket HTTP. Ocene skupnosti paketa HTTP ne moremo pridobiti, ker ni na

voljo kot samostojna shramba kode na spletnem mestu GitHub.

3.5 Procesor predlog Blaze

Blaze je privzet procesor predlog HTML za uporabniski vmesnik. Predloge

Blaze uporabljajo preslednice (angl. spacebars) in so videti kot obicajen

HTML, ki vsebuje posebne oznake, vsebovane v dvojnih zavitih oklepajih

{{ }} znotraj katerih navedemo bodisi spremenljivke JS, ki so dostopne v

skripti, ali pomozne funkcije (angl. helpers), ki jih definiramo v sami kodi.

Za kontrolo izvajanja v predlogi imamo na voljo konstrukte, kot so:

• Iteratorji {{#each ... in ... }} ... {{else}} ... {{/each}} , ki pon-

avljajo izpis bloka HTML za vsak element seznama in v primeru praznega

seznama izpisejo vsebino, ki sledi {{else}} .

• Pogojno izvajanje {{#if}} ... {{else}} ... {{/if}} .

• S kljucno besedo {{#let ime=zaposleni.ime priimek=zaposleni.priimek }}

vpeljemo nove spremenljivke, in si pomagamo dostopati do posameznih

atributov objekta ali izhodov pomoznih funkcij.

• In nenazadnje vkljucevanje drugih predlog {{> mojaPredloga}} .

Kot vidimo, je sama sintaksa predlog Blaze zelo intuitivna, kar omogoca

hitro uporabo osnovnih konceptov, razvijalca pa tudi naravno usmerja v

uporabo modularnosti. Blaze namenoma prikriva precejsnjo kompleksnost

vnovicnih izrisovanj (angl. re-rendering), zato ni odvec pozornost razvijalca,


da poskrbi za nizko casovno zahtevnost svojih pomocniskih funkcij in s tem

tudi vnovicnih izrisovanj.

Za vecje aplikacije je, zaradi boljse podpore modularnosti, priporocljiva

izbira med tehnologijama Angular ali React. Poglejmo si se enacbo (3.4) za

oceno skupnosti.

Ocena(meteor/blaze) = 82 + 7 + 7391 + 115 × 10 = 8630 (3.4)

Ce oceno skupnosti primerjamo z ocenami ostalih sistemov predlog, ugo-

tovimo, da se uvrsca na predzadnje mesto. Nizko oceno lahko pripisemo

navezavi na ogrodje Meteor. Blaze je odlicna izbira za hitro gradnjo ap-

likacije ali pripravo prototipov.

3.6 Podpora Angular.js

Ce zelimo, lahko namesto Blaze uporabimo Angular.js. Najprej odstranimo

Blaze z ukazom: meteor remove blaze-html-templates , nato dodamo Angu-

lar.js z ukazom: Meteor add angular-templates in namestimo pakete npm z

ukazom: meteor npm install --save angular angular-meteor .

Preden pozenemo Meteor, pozenemo urejevalnik Atom z ukazom atom .

in v pripravljenem osnutku projekta zamenjamo nekaj datotek HTML, JS

in CSS, ki so zasnovane za Blaze, s kodo za Angular.js prikazano v primerih

Kode 3.2 in 3.3.

1 <head>

2 <title>Meteor aplikacija z Angular.js</title>

3 </head>

4 <body>

5 <div class="container" ng -app="moja -aplikacija">

6 Pozdrav iz Meteorja z Angular JS.

7 </div>

8 </body>

Koda 3.2: Prilagoditev kode client/main.html za uporabo Angular.js.

3.7. PODPORA ANGULAR 2 39

1 import angular from ’angular ’;

2 import angularMeteor from ’angular -meteor ’;

3

4 angular.module(’moja -aplikacija ’, [

5 angularMeteor

6 ]);

Koda 3.3: Prilagoditev kode main.js za uporabo Angular.js.

Pred nami imamo osnutek Angular aplikacije v Meteorju. Dodajati lahko

zacnemo komponente Angular.js, ki jih bomo dodali v mapo, ki jo bomo

pripravili za vsako posamezno komponento v mapi imports/components.

Struktura map Angular.js

Za organizacijo strukture map imamo na voljo dva pristopa:

• Urejanje po tipu datotek, kjer uporabimo mapo controllers za krmilnike

in mapo views za uporabniski vmesnik.

• Urejanje glede na funkcionalnost, kjer dolocimo imena map. Npr.

uporabniki, izdelki, itd.

Prvi pristop je primeren predvsem za manjse aplikacije, drugi se bolje obnese

za vecje aplikacije. Ker v Meteorju operiramo z zbirkami MongoDB, je zaradi

sovpadanja boljsa izbira strukture glede na funkcionalnost.

3.7 Podpora Angular 2

Meteor omogoca tudi moznost uporabe tehnologije Angular 2. Ta poleg

moznosti razvoja v ES5 in ES6 podpira tudi jezika TypeScript in Dart, sled-

nji je nov odprtokodni objektno orientiran programski jezik. Pred uporabo

se oba jezika najprej prevedeta v JS, ki ga razumejo vsi sodobni brskalniki.

Razvijalci ogrodja Angular 2 priporocajo uporabo programskega jezika Type-

Script, zato vecino dokumentacije, primerov in izobrazevalnih vsebin na-

jdemo predvsem v TypeScriptu.


Razlogi za prehod na Angular

Razlogov in prednosti za prehod iz tehnologije predlog Blaze na Angular je

kar nekaj:

• Angular omogoca odjemalske aplikacije z arhitekturo MVW (MVC,

MVVM).

• Ogrodje Angular je bolj zrelo iz vidika stabilnosti in funkcionalnosti.

• Angular obsega sirso skupnost razvijalcev in s tem je na voljo boljsa

podpora in vec knjiznic.

• Omogoca uporabo ogrodja Ionic, drugega najbolj priljubljenega ogrodja

za hibridne mobilne aplikacije na ogrodju Cordova.

• Angular poskrbi za upravljanje drevesa komponent in nalaganje.

• Razvojna skupina Meteor (MDG) precej vlaga v izobrazevanje za pre-

hod in s tem nakazuje nejasno prihodnost Blaze.

3.8 Podpora React

Meteor omogoca tudi moznost uporabe React, ki je poleg Angular.js drugi

predstavnik sodobnih ogrodij UI. Razvit je v sodelovanju druzb Facebook

in Instagram. Namenjen je resevanju enega problema: Gradnji kompleksnih

aplikacij s podatki, ki se tekom casa spreminjajo [42].

React ni knjiznica MVC, ampak knjiznica JS namenjena implementaciji

pogledov UI (angl. views) arhitekture MVC. Knjiznica je namenjena grad-

nji sestavljivih UI in spodbuja ustvarjanje veckrat uporabnih komponent UI

(angl. reusable UI components).

React uporablja lastno predstavitev dokumenta. Ko se prva komponenta

React vzpostavi, izvede metodo render in ustvari lazjo predstavitev UI. Iz te

predstavitve je nato ustvarjeno oznacevanje nadbesedila (angl. markup), ki

je vrinjeno v dokument. Ob vsaki naslednji spremembi podatkov se ponovno

3.8. PODPORA REACT 41

klice metoda render. Za zagotavljanje ucinkovitosti osvezevanja, se povratna

vrednost predhodnega klica primerja z novo in ustvari minimalen nabor

sprememb, ki se nato uporabijo na objektnem modelu dokumenta (DOM ).

Povratna vrednost ni niti niz, niti vozlisce DOM, ampak predstavlja opis,

kaksen naj bo videz DOM.

React odlikujejo naslednje lastnosti:

• Enostavnost uporabe. Dolocimo le, kako naj bo aplikacija videti v

dolocenem trenutku in React ob spremembi podatkov samodejno up-

ravlja posodobitve UI.

• Je deklarativen. Ob spremembi podatkov, React konceptualno izvede

osvezitev le-teh in poskrbi, da se posodobijo le spremenjeni deli.

• Omogoca gradnjo sestavljivih komponent. Kljucni princip knjiznice

React je vnovicna uporaba komponent. V Reactu sestavljamo kompo-

nente, ki so vsebovane (angl. encapsulated) na nacin, da omogocajo

vnovicno uporabo kode, testov in locitev vlog (angl. separation of con-

cern).

React ne uporablja predlog HTML, kar je sicer obicajno za gradnjo UI splet-

nih aplikacij. Je pravi programski jezik za izrisovanje pogledov in posameznih

komponent UI. Prednosti takega pristopa pred predlogami HTML so:

• JS je fleksibilen in zmogljiv programski jezik, ki omogoca abstrakcije,

kar je kljucno za gradnjo kompleksnih aplikacij.

• Zdruzeno oznacevanje nadbesedila (angl. markup) in pripadajoca logika

omogocata enostavnejso razsirljivost in vzdrzevanje.

• Manjsa je ranljivost XSS, ker zdruzitev oznacevanja nadbesedila in vse-

bine onemogocata verizenje nizov (angl. string concatenation).


JSX

V Reactu lahko opcijsko izberemo uporabo sintakticne razsiritve JSX, ki nudi

zapis, podoben sintaksi XML za definiranje drevesnih struktur z atributi.

Zapis je prirocen za vse, ki niso domaci v JS, npr. za oblikovalce.

Poglejmo se izracuna ocen skupnosti za React (3.5) in JSX (3.6).

Ocena(facebook/react) = 43170 + 7370 + 6821 + 715 × 10 = 64511 (3.5)

Ocena(facebook/jsx) = 365 + 32 + 53 + 13 × 10 = 580 (3.6)

Ugotovimo, da ocena skupnosti (3.5) uvrsca knjiznico React na drugo

mesto med ogrodji UI, takoj za Angular.js (2.3). Nizka ocena skupnosti za

sintakticne razsiritve JSX nakazuje nizek sprejem.

3.9 Apache Cordova

Apache Cordova je ogrodje, ki nam omogoca gradnjo hibridnih mobilnih

aplikacij. Cordova ovije aplikacijsko kodo HTML v domorodni kontejner, ki

lahko dostopa do funkcionalnosti naprave na stevilnih platformah. Funkcional-

nosti so dostopne preko enotnega JS APIja, kar omogoca uporabo iste kode

na razlicnih platformah [43] .

Cordova je vkljucena v ogrodje Meteor, a je namestitev zaradi prihranka

prostora opcijska, tako podporo za gradnjo mobilnih aplikacij omogocimo z

ukazi:

• meteor install-sdk android in meteor add-platform android

• meteor install-sdk ios in meteor add-platform ios

Prvi ukaz prenese programska orodja za razvoj (SDK), drugi vkljuci izbrano

platformo v naso aplikacijo Meteor. Aplikacijo Cordova nato gradimo in

poganjamo z ukazom Meteor: meteor run android-device

3.9. APACHE CORDOVA 43

3.9.1 Namestitev Apache Cordova

Apache Cordova namestimo z ukazom: npm install -g cordova . Novo ap-

likacijo ustvarimo z ukazom:

1 cordova create aplikacija si.fri.aplikacija Aplikacija

Ukaz pripravi ustrezno strukturo projekta nase aplikacije, kjer vstopno stran

nase aplikacije predstavlja datoteka www/index.html. Strukturo projekta

imamo tako pripravljeno vendar moramo v nadaljnjem koraku dodati se plat-

forme, za katere zelimo graditi aplikacije. To naredimo tako, da se prestavimo

v mapo aplikacije in izvedemo enega ali vec ukazov za dodajanje platforme:

1 cordova platform add ios --save

2 cordova platform add android --save

Za gradnjo mobilnih aplikacij je zahtevana tudi prisotnost ustreznih razvojnih

orodij SDK, z ukazom cordova requirements lahko preverimo ali nas sistem

vsebuje vse zahtevane razvojne komponente za gradnjo aplikacij za zeleno

platformo. Aplikacije lahko zgradimo za vse platforme naenkrat z ukazom

cordova build , gradnjo pa lahko omejimo tudi na posamezno platformo, na

primer z ukazom cordova build ios , prozimo le gradnjo za naprave iPad in

iPhone.

Aplikacijo lahko preskusamo tudi v emulatorjih, ki so del SDK za posamezno

platformo s pomocjo ukaza: cordova emulate android . Druga moznost je iz-

vajanje neposredno na napravi, ki jo prikljucimo na razvojni racunalnik z

ukazom: cordova run android

Pri razvoju za Android je pomembno omeniti, da moramo na sistem Win-

dows predhodno namestiti ustrezen gonilnik za vsako posamezno napravo

Android. Te zahteve na sistemih Linux ali OS X ni, kar pomeni znaten

prihranek casa.

3.9.2 Vticniki Apache Cordova

Posamicne funkcionalnosti mobilne naprave v aplikaciji omogocamo s pomocjo

vticnikov. Sistemski vticniki Apache Cordova so predstavljeni v Tabeli 3.1,


dodatne najdemo s pomocjo iskalnika Npm Plugin Search [44]. Ta vticnike

prikaze kot kartice, ki vsebujejo vse kljucne podatke, tudi podatek o plat-

formah na kateri je posamezen vticnik podprt.

Od aprila 2015 dalje so vticniki Cordova vkljuceni v ekosistem Npm. Od

ostalih paketov se locijo po identifikatorju cordova-plugin-*, za iskanje lahko

uporabimo tudi spletno mesto https://www.npmjs.com.

Izbrane vticnike, ki jih zelimo uporabiti v svoji mobilni aplikaciji na-

mestimo z ukazom: cordova plugin add cordova-plugin-ime Izracunajmo se

oceno skupnosti z enacbo (3.7).

Ocena(apache/cordova−cli) = 457 + 245 + 1143 + 73 × 10 = 2575 (3.7)

Ocena skupnosti je nizka, kar lahko pripisemo dejstvu, da se Cordova uporablja

tudi in predvsem v drugih ogrodjih, kot sta Ionic (2.8) in Meteor (3.1).

3.10 Podatkovni sklad Apollo

Apollo je podatkovni sklad (angl. data stack) namenjen sodobnim aplikaci-

jam zgrajen na osnovi GraphQL. Vsebuje locen nabor paketov, odjemalca

GraphQL in nabor orodij za streznik GraphQL-JS ter razlicne odjemalske

integracije. Trenutno je na voljo kot tehnicni predogled in je zasnovan z

namenom:

• moznosti postopne vpeljave v katero koli obstojeco aplikacijo JS,

• enostavne uporabe in

• zagotavljanja orodji, ki razvijalcem omogocajo vpogled in razumevanje,

kaj se v aplikaciji dogaja.

3.10.1 GraphQL

GraphQL je tanka plast med odjemalcem in streznikom, ki streze podatke

odjemalcu. Doloca skupen vmesnik med streznikom in odjemalcem za povpra-

https://www.npmjs.com

3.10. PODATKOVNI SKLAD APOLLO 45

Tabela 3.1: Vticniki Apache Cordova

opisno ime vticnik

Status akumulatorja cordova-plugin-battery-status

Kamera cordova-plugin-camera

Konzola cordova-plugin-console

Kontakti cordova-plugin-contacts

Naprava cordova-plugin-device

Pospesek in gibanje cordova-plugin-device-motion

Magnetni kompas naprave cordova-plugin-device-motion

Pogovorna okna cordova-plugin-dialogs

Branje in pisanje datotek cordova-plugin-file

Prenos datotek cordova-plugin-file-trasfer

Zemljepisna lokacija [45] cordova-plugin-geolocation

Globalizacija cordova-plugin-globalization

Brskalnik aplikacije cordova-plugin-inappbrowser

Vecpredstavnost cordova-plugin-media

Vecpredstavnostni zajem cordova-plugin-media-capture

Omrezne informacije cordova-plugin-network-information

Uvodni zaslon cordova-plugin-splashscreen

Vibriranje [46] cordova-plugin-vibration

Statusna vrstica cordova-plugin-statusbar

Pravilnik dostopov cordova-plugin-whitelist


sevanje in prevzem podatkov. V poizvedbi GraphQL odjemalec opise po-

datke v zeleni obliki in streznik vrne JSON s podatki v zahtevani obliki.

GraphQL je:

• Deklarativen. Format rezultatov doloci odjemalec (Koda 3.4). Streznik

vraca natanko to, kar zahteva odjemalec (Koda 3.5).

• Kompozicijski, ker so poizvedbe hierarhicen nabor polj, oblikovan kot

bodo oblikovani vrnjeni podatki. Kompozicija je naraven nacin opiso-

vanja podatkov.

• Strogo tipiziran (strong-typed), kar zagotavlja veljavnost v okviru tipov

podatkov GraphQL.

Poizvedni jezik in izvajalno okolje GraphQL sta razvita in v uporabi pri

druzbi Facebook od leta 2012. Referencna implementacija graphql-js je

knjiznica JS, ki predstavlja osnovo za celovite implementacije GraphQL in

orodij. Poizvedba GraphQL je niz, ki ga streznik interpretira in vrne po-

datke v formatu dolocenem v sami poizvedbi. To najbolje prikazemo na

enostavnem primeru (Koda 3.4) in vrnjeni notaciji JSON (Koda 3.5).

1 {

2 user(id: 1200304) {

3 id ,

4 ime ,

5 jePrijatelj ,

6 slikaProfila(size: 50) {

7 uri ,

8 width ,

9 height

10 }

11 }

12 }

Koda 3.4: Poizvedba GraphQL

1 {

2 "user" : {

3.11. MANTRA 47

3 "id": 1200304 ,

4 "ime": "Mojca Pokrajculja",

5 "jePrijatelj": true ,

6 "slikaProfila": {

7 "uri": "http :// streznik.cdn/uporabnik /1200304. jpg",

8 "width": 50,

9 "height": 50

10 }

11 }

12 }

Koda 3.5: Struktura rezultata odseva strukturo nase poizvedbe.

V enacbah (3.8), (3.9) in (3.10) bomo izracunali ocene skupnosti tehnologij

podatkovnega sklada Apollo.

Ocena(apollostack/apollo−server) = 36 + 5 + 17 + 3 × 10 = 88 (3.8)

Ocena(apollostack/apollo−client) = 461 + 29 + 611 + 12 × 10 = 1221 (3.9)

Ocena(graphql/graphql−js) = 3698 + 245 + 655 + 60 × 10 = 5198 (3.10)

Ker je skupina MDG prestavila podatkovni sklad Apollo v zacetku leta

2016, sta nizki oceni streznika (3.8) in odjemalca (3.9) Apollo pricakovani,

saj gre za novo tehnologijo. Tudi ocena GraphQL (3.10) je razmeroma nizka,

kar lahko pomeni nepoznavanje tehnologije in nizek sprejem med razvijalci.

3.11 Mantra

Mantra je nabor smernic za arhitekturo aplikacij Meteor [47]. Cilja arhitek-

ture Mantra sta:

• Zagotovitev enostavnega vzdrzevanja (angl. maintainability).

Vzdrzevanje je kljucno za uspeh v vecjih razvojnih skupinah, dosezemo


ga z modularnim preskusanjem (angl. unit testing) vseh delov ap-

likacije in definicijo standardov za vse sestavne dele.

• Pripravljenost na prihodnost (angl. future proof ). JS nam omogoca

nestete kombinacije tehnologij in modulov, ki omogocajo vec kot eno

optimalno pot do resitve problema. Tezko napovemo, kaj je trenutno

najboljse in kaj se bo v prihodnosti spremenilo. Mantra se zanasa na

kljucne principe za katere lahko predvidevamo, da bodo veljali dlje casa

in dopusca moznost sprememb po potrebi.

Mantra posveca precej pozornosti odjemalskemu delu aplikacije. Kode odje-

malca in streznika ne mesa in priporoca skupno rabo kode:

• Odjemalec zahteva veliko truda in predstavlja vecji del kode. Upravl-

janje strezniske kode je obicajno lazje obvladljivo.

• V prihodnosti bo odjemalski del aplikacije povezan s strezniskim delom

na osnovi sheme. Odjemalcu ni treba vedeti, kaksna je implementacija

strezniskega dela.

• Mantra ne verjame v univerzalne aplikacije. Spodbuja implementacijo

locenih aplikacij za razlicne platforme ob skupni rabi kode. Obicajno

je, da vec odjemalskih aplikacij deluje v navezavi z enim streznikom.

React je uporabljen za uporabniski vmesnik (UI). Mantra zahteva uporabo

komponent, ki jih uvozimo iz Npm ali definiramo v sami aplikaciji, ter

uporabo kontejnerjev.

Poslovno logiko definiramo v okviru akcij (angl. actions) in obsega:

• validacije,

• upravljanje stanja (angl. state management) in

• interakcije z oddaljenimi viri podatkov.

3.11. MANTRA 49

Akcija je enostavna funkcija, ki kot prvi argument sprejme celoten kontekst

aplikacije. Vse kar izvajamo v okviru akcije je na osnovi podanega konteksta

in dodatnih argumentov.

Aplikacija upravlja z razlicnimi stanji, ki jih lahko razdelimo na lokalno

stanje in oddaljeno stanje. Na podrocju upravljanja stanja potekajo stevilne

inovacije, zato je Mantra fleksibilna pri izbiri resitve:

• Meteor/MiniMongo (oddaljeno stanje)

• Tracker/ReactiveDict (lokalno stanje)

• FlowRouter (lokalno stanje)

• Redux (lokalno stanje)

• GraphQL (oddaljeno stanje)

• Falcor (oddaljeno stanje)

Navkljub fleksibilni izbiri, Mantra zahteva nekaj pravil pri upravljanju stanj:

• Operacije s pisanjem se morajo izvesti v akciji.

• Branja se lahko izvajajo v akcijah in kontejnerjih.

• Branj in pisanj ne smemo izvajati neposredno v komponente UI. Kom-

ponente UI ne smejo vedeti nicesar o stanju aplikacije.

Kontejnerji so integracijska plast v Mantri in izvajajo:

• Uporabo stanja za spremembo spremenljivk in posredovanje le-teh v

UI preko lastnosti.

• Posredovanje akcij v komponente UI.

• Posredovanje elementov konteksta aplikacije v komponente UI.


aplikacija

configs

libs

methods

index.js

objave.js

tests

objave.js

publications

main.js

Slika 3.3: Priporocena struktura Mantra

Kontejnerji so komponente React in jih sestavljamo z uporabo react-komposer.

Omogocena je uporaba razlicnih podatkovnih virov, vkljucno z Meteor/-

Tracker, Promises, Rx.js Observable.

Za strezniski del aplikacije Mantra priporoca imenisko strukturo pred-

stavljeno na Sliki 3.3.

Podrobneje si poglejmo se namen posameznih map.

• configs . . . Mapa configs je mesto za nastavitve aplikacije. Nastavitve

naj imajo privzeto izvozno funkcijo, koda konfiguracije naj ostane v

funkciji sami. Primer datoteke config.js je prikazan v Kodi 3.6.

• libs . . . Mapa libs je namenjena knjiznicam pomoznih funkcij, ki jih

zelimo uporabiti na strezniskem delu aplikacije.

• methods . . . Mapa methods vsebuje metode za posamezne funkcional-

nosti, datoteke poimenujemo z imenom vsebovane metode. Datoteka

index.js uvaza vse ostale module v imeniku in jih izvaza, na ta nacin

lahko uvozimo vse metode naenkrat.

3.11. MANTRA 51

• tests . . . Mapa tests vsebuje metode za modularno preskusanje (angl.

unit testing).

• publications . . . Mapa publications je identicna mapi methods a je

namenjena objavam (angl. publications).

• main.js . . . Datoteka main.js je vstopna tocka v aplikacijo, kot vidimo

v primeru Kode 3.7. Tu uvozimo nase metode, objave (angl. publica-

tions) in nastavitve.

1 export default function () {

2 // tu klicemo konfiguracije

3 }

Koda 3.6: Primer datoteke config.js za nastavitve aplikacije.

1 import publications from ’./ publications ’;

2 import methods from ’./ methods ’;

3 import addInitialData from ’./ configs/initial_adds.js’;

4

5 publications ();

6 methods ();

7 addInitialData ();

Koda 3.7: Uvazanje metod, objav in nastavitev v datoteki main.js.


Poglavje 4

Dodatne tehnologije za celostni

razvoj

Pogledali si bomo se nekaj tehnologij, ki temeljijo na JS in Node.js in niso

zajete niti v skladu tehnologij MEAN niti ogrodju Meteor, a so lahko del

celostnega razvoja sodobnih aplikacij:

• tehnologije za gradnjo namiznih aplikacij,

• tehnologije za storitve v oblaku in uporaba Node.js v mikroservisih in

• tehnologije za aplikacije interneta stvari (angl. internet of things, IoT ).

4.1 Tehnologije za namizne aplikacije

Podobno razvoju mobilnih aplikacij, tudi razvoj namiznih (angl. desktop) ap-

likacij obicajno zahteva poznavanje dodatnega razvojnega okolja. Obicajno

so to Visual Studio za razvoj aplikacij za operacijske sisteme Microsoft Win-

dows in Xcode za razvoj aplikacij za operacijski sistem OS X proizvajalca

Apple, in razlicna orodja za razvoj Linux aplikacij, kot so GTK+, Glade ali

Anjuta.

Razvoju na navzkriznih platformah (angl. cross-platform development)

je doslej sluzila predvsem Java, a se navkljub odlicnim razvojnim okoljem

53

54 POGLAVJE 4. DODATNE TEHNOLOGIJE ZA CELOSTNI RAZVOJ

IDE, kot so Eclipse in njegove izpeljanke, sodec po stevilcnosti aplikacij ni

najbolj uveljavila.

Nasprotno se je v zadnjem casu na podrocju aplikacij razvitih v JS poraja

pestra paleta aplikacij, za katere uporabniki vecinoma niti ne opazimo, da se

za namizno aplikacijo skrivata Node.js in Chromium oz. koda JS.

Za razvoj in gradnjo namiznih aplikaciji iz kode JS imamo na voljo vsaj

tri tehnologije:

• NW.js, ki dobesedno pomeni Node.js - Webkit,

• Electron in

• CEF (Chronium Embedded Framework), pri katerem se aplikacija gradi

v programskem jeziku C.

Tehnologije se razlikujejo v naslednjih tockah:

• sistemu gradnje,

• vstopni tocki v aplikacijo,

• nacinu integracije Node.js in

• kontekstualnosti.

NW.js

Pri NW.js je vstopna tocka spletna stran, katere URL dolocimo v datoteki

package.json, ta se nato odpre v oknu brskalnika, kot glavno okno aplikacije.

Integracija Node.js v Chronium je izvedena s pomocjo popravkov kode Chro-

nium. NW.js zaradi nacina implementacije locuje med kontekstom Node.js

in spletnim kontekstom.

4.1. TEHNOLOGIJE ZA NAMIZNE APLIKACIJE 55

Electron

Electron deluje na operacijskih sistemih Mac OS X, Windows in Linux. Na-

mestitev izvedemo z ukazom: npm install -g electron-prebuilt .

Struktura aplikacije Electron (Slika 4.1) je lahko zelo enostavna. Vstopna

tocka v aplikacijo je datoteka JS, ki jo dolocimo v datoteki package.json.

Kot vidimo v Kodi 4.1, je ta strukturno enaka, kot smo je vajeni iz mod-

ulov Node.js. Vsebino datoteke HTML nalozimo preko APIja v datoteki JS

doloceni v atributu main, kjer se tudi narocimo na okenske dogodke, ter se

tako dolocimo kdaj zapustiti aplikacijo.

Datoteka main.js mora poskrbeti za ustvarjanje oken in upravljanje sis-

temskih dogodkov. Datoteka index.html je spletna stran, ki jo prikazemo v

nasem glavnem oknu namizne aplikacije.

Delovanje Electrona je blizje delovanju Node.js saj so APIji nizkonivojski.

Electron uporablja skupno knjiznico libchroniumcontent za dostop do Chro-

nium Content APIjev, zato ne zahteva zmogljivega racunalnika za gradnjo

aplikacije. Electron s pomocjo kode node bindigns integrira zanko libuv s

sporocilno zanko posamezne platforme brez posegov v kodo Chromium. Ne

uvaja novega spletnega konteksta, ker uporablja vec-kontekstualnost (angl.

multicontextuality), ki je funkcionalnost okolja Node.js.

Electron med drugim omogoca tudi samodejne posodobitve, porocila o

sesutjih, namestitvene programe za Windows, razhroscevanje in profiliranje,

sistemske menije in obvestila.

1 {

2 ’name’: ’aplikacija ’,

3 ’version ’: ’0.0.1’,

4 ’main’: ’main.js’

5 }

Koda 4.1: Datoteka package.json aplikacije Electron.


aplikacija

package.json

main.js

index.html

Slika 4.1: Struktura aplikacije Electron.

4.1.1 CEF

CEF predstavlja moznost vgradnje podporne infrastrukture v lastne ap-

likacije, ki omogoca uporabo izrisa HTML in podporo JS. Aplikacije osnovane

na distribuciji binarne kode CEF se zato gradijo s pomocjo standardnih orodij

za posamezne operacijske sisteme:

• Visual Studio na sistemu Windows

• Xcode na sistemu Mac OS X

• gcc/make na sistemu Linux

Gradnja aplikacij se tako razlikuje glede na izbrano platformo. Na voljo so

tudi navezave (angl. bindings) za programske jezike Delphi, Go, Java, C#

in Python. Skupne korake lahko povzamemo:

• Prevajanje staticne knjiznice libcef dll wrapper

• Prevajanje izvorne kode aplikacije in povezovanje z dinamicno knjiznico

libcef in staticno knjiznico libcef dll wrapper

• Kopiranje knjiznic in virov (datotek .html, .js, .css, nizov bededil, itd.)

v izhodno mapo.

4.2. TEHNOLOGIJE ZA STORITVE V OBLAKU 57

Poglejmo si se ocene skupnosti tehnologij za gradnjo namiznih aplikacij

izracunanih v enacbah (4.1) in (4.2).

Ocena(nwjs/nw.js) = 28567 + 3203 + 2547 + 69 × 10 = 35007 (4.1)

Ocena(electron/electron) = 31432 + 3318 + 9332 + 392 × 10 = 48002 (4.2)

Ugotovimo, da ima ogrodje Electron boljso oceno skupnosti. Ocene skupnosti

za CEF nismo uspeli pridobiti, ker ni na voljo na shrambi kode GitHub.

Neglede na to, je CEF uporabljen pri gradnji stevilnih priljubljenih ap-

likacij [48].

4.2 Tehnologije za storitve v oblaku

Vsi ponudniki storitev v oblaku vkljucujejo tudi podporo okolju Node.js,

obicajno je JS med bolje podprtimi programskimi jeziki. Podpora ostalim

programskih jezikom se precej bolj razlikuje med posameznimi ponudniki

storitev v oblaku. Node je danes ena hitreje rastocih platform skoraj pri

vseh nastetih ponudnikih storitev v oblaku.

4.2.1 AWS Lambda

Za pripravo lastnih paketov Node.js za storitev AWS Lambda, potrebujemo

instanco Amazon EC2 ali sistem z namescenim operacijskim sistemom Ama-

zon Linux in Node.js. Za pripravo paketa za AWS Lambda lahko uporabimo

obstojece module Node.js, ki jih poiscemo na Npm. Najprej ustvarimo mapo,

ki bo vsebovala naso funkcijo Lambda in vse njene module.

Namestimo Npm paket AWS SDK in preverimo namestitev s pomocjo

testne funkcije, ki izpise razlicico, kot prikazano v Kodi 4.2.

1 npm install --prefix =~/ lambdaTestFunction aws -sdk

2 echo ’var AWS = require("aws -sdk");console.log(AWS.EC2.

apiVersions)’> test.js

3 node test.js

Koda 4.2: Namescanje AWS SDK.


Ce zelimo uporabljati npr. knjiznico OpenCV, namestimo razvojna orodja,

kot je prikazano v Kodi 4.3.

1 sudo yum update

2 sudo yum install gcc44 gcc -c++ libgcc44 cmake -y

3 wget http :// nodejs.org/dist/v0 .10.33/ node -v0 .10.33. tar.gz

4 tar -zxvf node -v0 .10.33. tar.gz

5 cd node -v0 .10.33 && ./ configure && make

6 sudo make install

Koda 4.3: Namescanje razvojnih orodij.

Zatem lahko prenesemo izvorno kodo OpenCV in knjiznico zgradimo, kot

je prikazano v Kodi 4.4.

1 wget http :// softlayer -dal.dl.sourceforge.net/project/

opencvlibrary/opencv -unix /2.4.9/ opencv -2.4.9. zip

2 mkdir opencv_install

3 mkdir opencv_example

4 unzip opencv -2.4.9. zip -d opencv_install/ && cd

opencv_install

5 cmake -D CMAKE_BUILD_TYPE=RELEASE -D BUILD_SHARED_LIBS=NO -D

CMAKE_INSTALL_PREFIX =~/ opencv opencv -2.4.9/

6 make && make install

Koda 4.4: Prenos in gradnja OpenCV.

Ko je knjiznica zgrajena, lahko namestimo Npm modul opencv, kot je

prikazano v Kodi 4.5. Predpono poti PKG CONFIG PATH dolocimo preden

prozimo npm install , da vkljucimo nove staticne knjiznice v lokalno pot.

1 PKG_CONFIG_PATH =~/ opencv/lib/pkgconfig/

2 npm install -prefix =~/ opencv_example opencv

Koda 4.5: Namescanje modula Node.js.

Node.js modul za OpenCV vsebuje nekaj testnih funkcij za zaznavanje

obrazov. Z njimi lahko, kot je prikazano v Kodi 4.6, preverimo ali je modul

pravilo zgrajen. Ce je temu tako, bo v izhodni datoteki s krogom oznacen

obraz na sliki Mona Lize.

4.3. RAZVOJ APLIKACIJ ZA INTERNET STVARI 59

1 cd ~/ opencv_example

2 cd node_modules/opencv/examples/

3 mkdir tmp

4 node face -detection.js

5 Image saved to ./tmp/face -detection.png

Koda 4.6: Testiranje delovanja OpenCV v Node.js.

Preostane nam le, da prilagodimo svojo lambda funkcijo, odstranimo

testno kodo, mapo zgostimo v datoteko ZIP in jo namestimo v oblak.

4.3 Razvoj aplikacij za internet stvari

Razvoj aplikacij za internet stvari (angl. internet of things, IoT ) je novo,

zanimivo in kompleksno podrocje. Za programiranje stevilnih novih naprav

IoT so se morali doslej razvijalci posluzevati precej prilagojenih programskih

jezikov in namenskih razvojnih okolji IDE. Proizvajalci priljubljenih naprav

namenjenih prototipnemu razvoju IoT so kmalu ugotovili, da je Node.js zelo

primeren tudi za naprave IoT iz vec razlogov:

• Prinasa dvajset let izkusenj dogodkovnega programiranja JS.

• Dogodki so naraven nacin delovanja IoT naprav: dogodek prozi neko

akcijo.

• Node omogoca dostop do IoT tehnologij siroki skupini razvijalcev.

• Omogocena je uporaba obstojecih modulov JS.

V zadnjih dveh letih je tako prislo do pomembnega preobrata, saj so vecji

proizvajalci strojnih platform IoT zaceli Node.js vkljucevati na svoje naprave.

Tudi na naprave z zelo nizko porabo energije, kot so npr. Intel Galileo, Intel

Edison in Tessel 2. Izkaze se, da je Node.js zelo primerno okolje, ker ni

intenziven porabnik virov in lahko opravi tudi ogromno operacij V/I ob zelo

majhni bremenitvi pomnilnika ali CPE.


Anketa fundacije Node.js je v januarju 2016 pokazala, da 96% sodelujocih

na vprasanja vezana o IoT, razvija s pomocjo JS oz. Node.js [49]. Ze skoraj

10% anketirancev uporablja Node.js na odjemalcu, zalednih sistemih in za

razvoj IoT.

4.3.1 Node-RED

Node-RED je graficno orodje za povezovanje IoT [51] zgrajeno na Node.js in

v celoti izkorisca prednosti, ki jih prinasa dogodkovni model programiranja.

Graficni uporabniski vmesnik (GUI) za manipulacijo tokov, prikazan na

Sliki 4.2, omogoca povezovanje strojnih naprav, APIjev in spletnih servisov.

Funkcije JS lahko ustvarimo s pomocjo urejevalnika v samem okolju.

Omogoceno je shranjevanje funkcij, predlog in vnovicna uporaba predhodno

ustvarjenih tokov. Omogoca uporabo obstojecih modulov NPM in s tem

enostavno razsirljivost, kot tudi deljenje tokov, ustvarjenih z Node-RED v za-

pisu JSON, kar omogoca enostavno uvazanje in izvazanje. Node-RED lahko

izvajamo na nizkocenovni strojni opremi, kot je Raspbery Pi, kot tudi v

oblaku. Node-RED namestimo z ukazom: sudo npm install -g node-red in

ga pozenemo z ukazom: node-red Ob namestitvi ze vsebuje nekaj osnovnih

vozlisc, dodatna vozlisca ali tokove lahko poiscemo v knjiznici Node-RED

ali repozitoriju Npm. Node-RED lahko tudi vgradimo v lastno aplikacijo.

Obicajen scenarij je uporaba Node-RED za generiranje podatkovnih tokov,

ki jih zelimo prikazati na pregledni plosci.

V enacbi (4.3) si oglejmo se oceno skupnosti.

Ocena(node−red/node−red) = 2690 + 678 + 2006 + 31 × 10 = 5684 (4.3)

Na podlagi razmeroma nizke ocene (4.3) lahko sklepamo, da gre za relativno

novo tehnologijo.

4.3.2 Ogrodje IoT.js

IoT.js je ogrodje za gradnjo IoT na osnovi JS interpreterja JerryScript in

knjiznice libuv za asinhroni V/I. JerryScript je JS-stroj namenjen izvajanju

4.3. RAZVOJ APLIKACIJ ZA INTERNET STVARI 61

Slika 4.2: Graficno okolje Node-RED omogoca povezovanje naprav IoT in

storitev.

na mikrokrmilnikih z omejenimi viri: nekaj kilobajti pomnilnika (RAM)

(<64 KB) in omejeno kolicino trajnega pomnilnika (ROM) (<200 KB) na-

menjenega interpreterju JS. Interpreter JerryScript omogoca prevajanje na

napravi, izvajanje in dostop do perifernih enot iz kode JS. Poglejmo si ocene

skupnosti v enacbah (4.4), (4.5) in (4.6).

Ocena(Samsung/iotjs) = 939 + 129 + 244 + 15 × 10 = 1462 (4.4)

Ocena(Samsung/jerryscript) = 1318 + 151 + 2004 + 33 × 10 = 3803 (4.5)

Ocena(libuv/libuv) = 4135 + 688 + 3538 + 228 × 10 = 10641 (4.6)

Vidimo lahko, da je knjiznica za asinhroni V/I najbolje ocenjena, kar

lahko pripisemo sirsi moznosti uporabe.


Poglavje 5

Izbira sklada tehnologij za

izbran prakticni primer

Zahteve, ki jih bomo skusali resiti na nasem prakticnem primeru so stiri:

1. Zajem staticne slike na razlicnih napravah

2. Obdelava zajete slike

3. Knjiznice za racunalniski vid

4. Povezljivost s spletnimi servisi

5.1 Zajem slike na napravah

Za izpolnitev prve zahteve sklad tehnologij MEAN ni zadosten, saj v trenut-

nem stanju se ne vsebuje zadovoljive podpore za zajem slike. Izboljsave

standarda HTML5 in podpora WebRTC sicer napovedujejo tudi moznost

uporabe kamere v poljubnem sodobnem brskalniku, kar pa se ne pomeni,

da zajem slike deluje tudi na vsaki napravi. Poleg tega so pricakovanja

uporabnikov tudi domorodne aplikacije za njihovo mobilno napravo. Glede

na trenutni trzni delez, moramo poskrbeti najmanj za zagotovitev aplikacije

za mobilne naprave Android in Apple iOS. Dobrodosla bi bila tudi podpora

na namiznih racunalnikih.

63

64POGLAVJE 5. IZBIRA SKLADA TEHNOLOGIJ ZA IZBRAN

PRAKTICNI PRIMER

Tabela 5.1: Ocena ustreznosti tehnologij

sple

tni

zaje

msl

ike

zaje

msl

ike

Andro

id

zaje

msl

ike

iOS

nam

izna

aplika

icja

enos

tavnos

tim

ple

men

taci

je

skupaj

odprt

okodnos

t

MEAN 4 - - - 5 9 18

Meteor 5 5 5 - 5 20 40

Apache Cordova - 5 5 - 5 15 30

Electron - - - 5 5 10 20

Za sklad tehnologij MEAN, lahko hitro ugotovimo, da temu ne ustreza.

Kot vidimo v Tabeli 5.1, dodatno potrebujemo se najmanj tehnologijo Apache

Cordova, ki zagotavlja podporo kameri na napravi. Pri skladu vkljucenem

v Meteor je Apache Cordova ze vsebovana tehnologija. Dodatno bi morda

potrebovali se tehnologijo Electron, ce bi uporabniku zeleli zagotoviti tudi

namizno aplikacijo. Tudi cas implementacije osnovnega zajema slike je z

ogrodjem Meteor krajsi.

5.1.1 Zajem slike v ogrodju Meteor

Ogrodje meteor omogoca enostaven zajem slik iz kamere pametnega telefona

ali namiznega racunalnika s pomocjo paketa Meteor Camera Package. Za

uporabo paketa ga najprej dodamo z ukazom: meteor add mdg:camera in

za zajem slike ustvarimo dodatne predlogo HTML, ki vsebujejo elemente s

pomocjo katerih bomo rokovali zajem slike ter ustrezne funkcije JS, kot je

prikazano v primerih Kode 5.1 in 5.2.

5.1. ZAJEM SLIKE NA NAPRAVAH 65

1 <head>

2 <title>Moj fotoaparat </title>

3 </head>

4 <body>

5 <h1>Moj fotoaparat </h1>

6 {{> camera_button }}

7 <div id="picture">

8 <img src ={{ picture }}>

9 </div>

10 </body>

11

12 <template name="camera_button">

13 <button id="camera -button">Zajem slike!</button >

14 </template >

Koda 5.1: client/main.html . . . Predloga Blaze za UI fotoaparata.

1 Template.camera_button.events ({

2 ’click #camera -button ’: function (){

3 // Nastavitve zajema slike

4 var options = { width: 640, height: 640, quality: 100 };

5 // Klic zajema slike

6 MeteorCamera.getPicture(options , function(error , data){

7 if (error){ // Rokovanje napak

8 console.log(error);

9 }else{ // Sliko shranimo kot base64-kodiran podatkovni URI

10 Session.set(’zajetaSlika ’, data);

11 }

12 });

13 }

14 });

15 // pomozna funkcijo, ki bo skrbela za prikaz zajete slike

16 Template.body.helpers ({

17 picture: function (){

18 return Session.get(’zajetaSlika ’);

19 }

20 });

Koda 5.2: client/fotoaparat.js . . . Zajem in prikaz slike.


PRAKTICNI PRIMER

Poglejmo oceno skupnosti modula za zajem slike v ogrodju Meteor po-

dano z enacbo (5.1).

Ocena(meteor/mobile−package) = 324 + 144 + 74 + 12 × 10 = 662 (5.1)

5.1.2 Zajem slike s pomocjo Apache Cordova

Podporo posameznim funkcionalnostim Apache Cordova omogoca s pomocjo

vticnikov. Funkcionalnosti kamere naprave so nam na voljo preko namenskega

vticnika cordova-plugin-camera, ki ga namestimo z ukazom:

cordova plugin add cordova-plugin-camera . Vticnik definira globalni objekt

navigator.camera preko katerega so nam na voljo klici API za zajem slik.

Objekt navigator.camera je na voljo sele po dogodku deviceready . V izseku

Kode 5.3 vidimo implementacijo zajema slike.

1 navigator.camera.getPicture(onSuccess , onFail , {

2 quality: 50,

3 destinationType: Camera.DestinationType.DATA_URL

4 });

5 function onSuccess(imageData) {

6 var image = document.getElementById(’slika’);

7 image.src = "data:image/jpeg;base64 ," + imageData;

8 }

9 function onFail(message) {

10 alert(’Zajem slike ni uspel: ’ + message);

11 }

Koda 5.3: main.js . . . Zajem slike z vticnikom Apache Cordova.

Poglejmo oceno skupnosti vticnika Cordova za zajem slike izracunano v

enacbi (5.2).

Ocena(apache/cordova−plugin−camera) = 379 + 518 + 439 + 66 × 10 = 1996 (5.2)

Vidimo lahko, da ima vticnik Cordova (5.2) visjo oceno skupnosti od

modula Meteor (5.1).

5.2. OBDELAVA IN ANALIZA ZAJETE SLIKE 67

5.1.3 Zajem slike s pomocjo WebRTC

Na kratko poglejmo moznost zajema slike s pomocjo WebRTC. Ta je na-

jbolj primeren za zajem in obdelavo videa. WebRTC je zamisljen kot nabor

vmesnikov API, ki omogocajo komunikacijo v realnem casu (angl. Real Time

Comunication, RTC ) v brskalnikih in mobilnih aplikacijah.

Del WebRTC APIjev je tudi metoda GetUserMedia, ki omogoca zajem

zvoka in videa. Kot primer si bomo pogledali knjiznico clmtrackr [58],

ki omogoca nekoliko naprednejse zaznavanje obraza v JS (Slika 5.1). Ker

knjiznica uporablja tudi WebGL je njena uporaba primerna predvsem na

racunalnikih.

Primer aplikacije Meteor, ki uporablja WebRTC najdemo na repozitoriju:

https://github.com/foxdog-studios/meteor-webrtc.

Ker je kolicina prenesenih podatkov v takem primeru nekajkrat zajet-

nejsa, je smiselna uporaba le za primere uporabe, kjer predhodna obdelava

na odjemalski napravi ne pride v postev. Veliko bolj smiselna je realno-

casovna obdelava v oblaku na zahtevo ob izpolnjenih pogojih. Primer si

lahko predstavljamo spletno kamero, ki spremlja dolocen kader. Ze na sami

napravi preverjamo prisotnost gibanja, ob prisotnosti gibanja lahko na zajeti

sliki preverimo na primer prisotnost obrazov. V primeru, ko so zadosceni

v naprej doloceni pogoji, tok videa zacnemo posredovati video-analiticnem

mikroservisu v oblaku. Posredovanje video toka se zakljuci, ko video-analiticni

sistem javi odjemalcu ustrezen ukaz.

5.2 Obdelava in analiza zajete slike

Osnovna ideja izomorfne (angl. isomorphic) kode JS je v tem, da lahko isto

kodo izvajamo tako na odjemalcu, kot na strezniku. Za dolocene operacije

obdelave slike lahko tako izberemo knjiznico JS in jo bodisi uporabimo na

spletni strani oz. v mobilni aplikaciji ali na zalednem strezniskem sistemu,

kjer se ista knjiznica izvaja v Node.js.

Za nas primer bomo poiskali knjiznico, ki omogoca preprosto detekcijo

https://github.com/foxdog-studios/meteor-webrtc


PRAKTICNI PRIMER

obraza na zajeti sliki. V iskalniku na spletni strani www.npmjs.com vtipkamo

kljucni besedi “face detection” in dobimo vec kot 35 rezultatov.

Za podrobno analizo vseh knjiznic bi se morali nekoliko bolje poglobiti,

ampak ze ob hitrem pregledu lahko izlocimo nekaj knjiznic, ki ustrezajo nasim

potrebam.

Ena bolje ocenjenih je opencv [54]. Opis nam pove, da gre za modul

Node.js, ki nam omogoca navezavo s priljubljenim odprtokodnim sistemom za

racunalniski vid OpenCV [55]. Ker ta knjiznica zahteva tudi vkljucevanje zu-

nanjih knjiznic, ki niso v JavaScript-u, ne omogoca izomorfne kode. Knjiznico

seveda lahko, kljub temu uporabimo za programiranje spletnega streznika oz.

vmesnikov API za storitve racunalniskega vida v JS. Programsko opremo

OpenCV v tem primeru namestimo na nas streznik.

Najdemo povsem osnovni modul face-detect [60] v cistem JavaScriptu.

Kot tudi zmogljivejse module JS, kot je npr. clmtrackr [58]. Ta omogoca

prileganje modelov obrazu in zaznavanje obraza na videu (Slika 5.1) ob

predpostavki, da imamo v brskalniku podporo za WebGL, ki se uporablja

za pospesevanje. Delovanje modula clmtrackr smo uspesno preverili tudi v

namizni aplikaciji, ki smo jo pripravili v ogrodju Electron.

Med knjiznicami najdemo tudi nekaj takih, ki predstavljajo podporne

knjiznice za navezavo na mikro storitve v oblaku za analizo slik. Taksen

primer je Node.js modul project-oxford, ki ponuja implementacijo vmesnikov

za Project-Oxford API [57] in omogoca zaznavo enega ali vec obrazov, iden-

tifikacijo obrazov, ujemanje obrazov, analizo custev obraza, analizo slike in

OCR. Ustreznost knjiznic, ki omogocajo zaznavo obraza v Node.js, smo oce-

nili v Tabeli (5.2).

5.3 Nalaganje slik na spletni streznik

5.3.1 Nalaganje slik s pomocjo DDP

Za nalaganje slik na streznih imamo na voljo vec razlicnih moznosti. Glede

na to, da ima Meteor na voljo podatkovno bazo Minimongo na odjemalcu in

www.npmjs.com

5.3. NALAGANJE SLIK NA SPLETNI STREZNIK 69

Slika 5.1: Primer uporabe knjiznice clmtrackr [58].

Tabela 5.2: Knjiznice Npm za metode racunalniskega vida.

izom

orfn

ako

da

zazn

ava

obra

za

zazn

ava

vec

obra

zov

anal

iza

cust

ev

anal

iza

slik

e

iden

tifika

cija

oseb

skupaj

odprt

okodnos

t

opencv [55] - 5 5 4 4 2 16 32

clmtrackr [58] 5 5 - 5 - - 15 30

jsfeat [59] 5 5 - - - - 10 20

face-detect [60] 5 5 - - - - 10 20

tracking [61] 5 5 5 - - - 15 30

project-oxford [57] 5 5 5 5 5 5 30 30


PRAKTICNI PRIMER

MongoDB na strezniku, ki sta povezana prek protokola DDP, lahko zajete

slike vstavimo neposredno v zbirko dokumentov na odjemalcu, ki se nato

sinhronizira na streznik in po potrebi na druge odjemalce, ki so naroceni na

prejemanje posodobitev zbirke.

5.3.2 Nalaganje slik po protokolu HTTP

Druga moznost je nalaganje na spletni streznik Meteor po protokolu HTTP,

kjer metapodatke hranimo v MongoDB loceno.

5.3.3 Nalaganje slik v spletno shrambo v oblaku

Tretja moznost je uporaba locene shrambe za slike in shranjevanje metapo-

datkov v lastno podatkovno bazo MongoDB. Primer take implementacije

je meteor knjiznica Slingshot, dostopna na naslovu: https://github.com/

CulturalMe/meteor-slingshot/.

Implementacija s pomocjo zunanjih spletnih shramb prinasa stevilne pred-

nosti, predvsem je ta pristop primeren, ko zelimo uporabiti tudi storitve

racunalniskega vida v oblaku, saj stevilni ponudniki tovrstnih storitev zahte-

vajo posredovanje slik v njihove spletne shrambe. Pristop velja posnemati

tudi v primeru implementacije lastne shrambe za fotografije.

https://github.com/CulturalMe/meteor-slingshot/

https://github.com/CulturalMe/meteor-slingshot/

Poglavje 6

Razvoj aplikacije

6.1 Priprava razvojnega okolja

6.1.1 Izbira racunalnika

Za celosten odjemalsko-strezniski razvoj bomo izbrali racunalnik sodobne

izdelave, primernih procesorskih zmogljivosti in s primerno kolicino pomnil-

nika in diskovnega prostora. Upostevati moramo namrec, da racunalnik ni

namenjen zgolj pisanju dopisov in obracanju razpredelnic. Tekom razvoja

se vse bolj pojavlja tudi potreba po virtualizaciji operacijskih sistemov in

izvajanju celotnih skladov tehnologij na enem ali vec virtualnih strojih. Al-

ternativa je lahko prosta dostopnost razvojnih strojev v oblaku.

6.1.2 Izbira operacijskega sistema

Kriteriji za operacijskega sistema so naslednji:

1. ukazna vrstica in podpora standardnim ukazom UNIX,

2. podpora verigam orodij za razvoj mobilnih aplikacij,

3. priklopa mobilnih naprav brez namescanja dodatnih gonilnikov za vsako

posamicno napravo,

71

72 POGLAVJE 6. RAZVOJ APLIKACIJE

Tabela 6.1: Primernost operacijskih sistemov

UN

IXC

LI

razv

ojn

aor

odja

gonilnik

i

brs

kaln

iki

skupaj

odprt

okodnos

t

Linux 5 2 3 3 13 26

OS X 5 4 5 3 17 34

Windows 1 4 1 3 9 9

4. moznost testiranja spletnih aplikacij na vseh vodilnih brskalnikih.

Ocene ustreznosti nastetim kriterijem lahko vidimo v Tabeli 6.1

Vidimo, da operacijski sistem OS X zadostuje skoraj vsem nastetim zahte-

vam z izjemo zadnje tocke, ki je premostljiva s pomocjo virtualizacije. OS X

je sistem UNIX s podporo ukazni vrstici Bash in vkljucuje standardne ukaze

za povezovanje z oddaljenimi strezniki, kot so npr. ssh. Stevilne tehnologije

sistema OS X, vkljucno z jedrom UNIX, so na voljo tudi kot odprta koda [52].

Izbiri sistema pripomore tudi to, da zelimo pripraviti tudi mobilno ap-

likacijo za naprave iPad in iPhone. Za gradnjo in testiranje aplikacij iOS

tako potrebujemo tudi orodje Xcode, ki sicer ni na voljo na drugih operaci-

jskih sistemi.

Ostane nam nepokrita moznost razvoja za Windows Phone, ki je zane-

marljiva zaradi nizkega trznega deleza [35] in jo lahko premostimo z na-

mestitvijo dodatnega sistema s programom BootCamp [53].

6.1.3 Izbira in namestitev urejevalnika

Zrelost programskega jezika JS dokazujejo tudi stevilni namizni programi

razviti v JS. Za nas razvoj bomo izbrali enega izmed priljubljenih urejeval-

nikov kode oz. interaktivno razvojno okolje (angl. Interactive Development

6.1. PRIPRAVA RAZVOJNEGA OKOLJA 73

Environment, IDE ), ki je razvit v JS in dostopen na vseh kljucnih namiznih

operacijskih sistemih. Vsi nasteti urejevalniki omogocajo udobno urejanje

kode JS in HTML, delo s priljubljenimi distribuiranimi sistemi upravljanja

kode in razsirljivost. Seveda je tudi razvoj razsiritev in vticnikov IDE v

programskem jeziku JS.

Atom

Prva moznost na tem podrocju je odprtokodni urejevalnik Atom. Atom je

odprtokodna namizna aplikacija zgrajena s pomocjo HTML, JS, CSS z inte-

gracijo Node.js, ki se izvaja se na ogrodju Electron. Urejevalnik ze presega

milijon aktivnih uporabnikov in ima bogat ekosistem vticnikov.

Visual Studio Code

Alternativno lahko uporabimo tudi urejevalnik Visual Studio Code, ki je prvi

urejevalnik programske kode in prvo razvojno orodje druzine Microsoft Vi-

sual Studio, ki je na voljo na sistemih OS X, Linux in Windows. Ce izber-

emo slednjega in si zelimo olajsati dostop do programa iz ukazne vrstice,

po namestitvi pozenemo Visual Studio Code, odpremo ukazno paleto (F1)

in vpisemo “shell command” in izvedemo “Install ‘code’ command in PATH

command”, zatem vnovic pozenemo terminal z ukazno vrstico Bash, kjer bo

Visual Studio Code dostopen z ukazom “code” in bo omogoceno urejanje

datotek v poljubni mapi s prirocnim ukazom code . .

Nuclide

Tretja alternativa, ki prav tako temelji na urejevalniku Atom je nastala pod

okriljem odprtokodnih projektov druzbe Facebook, je Nuclide. Nuclide bo

s casom verjetno prva izbira za vse razvijalce, ki bodo za celosten razvoj

odjemalsko-strezniskih aplikacij uporabljali Facebookovo ogrodje React oz.

React Native. Pomembna razlika je, da Nuclide za razliko od prejsnjih dveh

urejevalnikov privzeto nudi boljso podporo distribuiranemu sistemu upravl-


janja izvorne kode Merculial in je tako boljsa izbira za vse, ki v svojem

razvojnem procesu uporabljajo predvsem Mercurial.

Brackets

Brackets je cetrti IDE in je plod razvoja podjetja Adobe. Njegova prednost

je predvsem boljsa integracija z orodji in produkti druzbe Adobe. V mislih

imamo predvsem storitve, kot je npr. Creative Cloud Extract, ki omogoca

ekstrakcijo oblikovalskih podatkov, kot so barve, pisave, CSS in slike, iz

datotek PSD.

V enacbah (6.1), (6.2), (6.3) in (6.4) si poglejmo ocene skupnosti nastetih

urejevalnikov.

Ocena(atom/atom) = 28155 + 4783 + 28924 + 307 × 10 = 64932 (6.1)

Ocena(Microsoft/vscode) = 14881 + 1945 + 6178 + 109 × 10 = 24094 (6.2)

Ocena(facebook/nuclide) = 4416 + 274 + 4753 + 79 × 10 = 10233 (6.3)

Ocena(adobe/brackets) = 25423 + 5321 + 16890 + 295 × 10 = 50584 (6.4)

Vidimo lahko, da je po ocenah skupnosti na zadnjem mestu odprtokodni

urejevalnik druzbe Facebook, na predzadnjem mu sledi Microsoftov IDE.

Drugo mesto pripada urejevalniku Brackets druzbe Adobe. Na podlagi na-

jvisje ocene skupnosti (6.1) ter prilagodljivost, dokumentacije izberemo ure-

jevalnik Atom. Na svoj sistem lahko namestimo tudi ostale in jih uporabimo

po zelji. Po namestitvi urejevalnika bomo verjetno namestili se katerega

izmed dodatnih paketov ter si urejevalnik tako dodatno prilagodili. Na voljo

so nam tudi paketi, ki nam olajsajo pisanje datotek LATEX.

6.1. PRIPRAVA RAZVOJNEGA OKOLJA 75

6.1.4 Namestitev ogrodja Meteor

Meteor preprosto namestimo iz ukazne vrstice z ukazom:

1 curl https :// install.meteor.com/ | sh

Na operacijskem sistemu Windows prenesemo in namestimo namestitveni

program.

6.1.5 Uporaba OpenCV

Za namestitev OpenCV na racunalniku Mac ni uradnih navodil v doku-

mentaciji OpenCV [55]. Najlazja moznost je tako vsaj navidez uporaba

virtualnega racunalnika.

Za virtualizacijo izberemo odprtokodni Virtual Box, ki je na voljo za vse

operacijske sisteme, tudi za Mac OS X. Pripravo operacijskega sistema na

virtualnem racunalniku si lahko olajsamo z orodji, ki omogocajo namescanje

iz shramb virtualnih naprav.

Prva moznost za pripravo virtualnega okoja so virtualni stroji (angl. vir-

tual machine, VM ). Ti se izvajajo na racunalniku, obicajno strezniku, kjer

se na gostiteljskim operacijskim sistemu izvaja hipervizor (angl. hypervisor),

ki skrbi za upravljanje virov in virtualnih strojev.

Predstavnik orodij za pripravo virtualnih strojev je Vagrant, ki deluje z

virtualizacijo Virtual Box. Pripravo virtualnega stroja definiramo s pomocjo

datoteke Vagrantfile, ki vsebuje vse ukaze, ki so potrebni za prenos in izva-

janje ukazov ob zagonu virtualnega stroja z ukazom vagrant up .

Druga moznost je uporaba tehnologije kontejnerjev (angl. containers),

kot je npr. tehnologija Docker. Ta omogoca pripravo virtualiziranega okolja

v obliki kontejnerjev, ti so izolirani vendar souporabljajo operacijski sistem

in kjer je to primerno, tudi binarno kodo in knjiznice. Postopek priprave

dolocimo v datoteki Dockerfile, ki se izvede ob ukazu docker build .

Obe moznosti nudita tudi moznost uporabe repozitorijev. Pripravo virtu-

alnega okolja lahko zacnemo ze z vnaprej pripravljenimi postopki. Osrednja


Slika 6.1: Prikaz upravljanja kode z ukazi Git [56].

knjiznica za povezovanje Node.js z OpenCV vsebuje tako datoteko Vagrant-

file, kot datoteko Dockerfile.

6.1.6 Upravljanje izvorne kode

Med razvojem uporabimo distribuiran sistem za upravljanje z izvorno kodo

Git, ta poskrbi za integriteto podatkov in podpira vzporedne, nelinearne

tokove dela.

Ce nimamo lastnega streznika Git, najprej ustvarimo svoj racun na splet-

nem mestu GitHub, ter nov repozitorij, ki ga kloniramo v svoj razvojni

racunalnik z ukazom git clone https://github.com/erikusaj/fri2016.git .

Spremembe kode upravljamo s pomocjo ukazov [56] git clone in git pull

za prevzem kode iz oddaljenega (angl. remote) streznika Git v lokalno kopijo

repozitorija (angl. local), ter ukazi git add , git commit in git push za

objavo nazaj na oddaljen repozitorij (Slika 6.1).

Poglavje 7

Sklepne ugotovitve

Kompleksnost celostnega razvoja se veca

Celosten razvoj aplikacij se siri iz do obicajnih dveh kljucnih elementov

spletne aplikacije, ki jo sestavljata odjemalski in strezniski del se na aplikacije

za mobilne telefone in tablice. Tudi streznisko zaledje vse bolj prerasca in

prehaja v zaledje v oblaku, tu so seveda se namizne aplikacije, ki so se vedno

aktualne, ter servisi API, ki vnasajo dodatne plasti v verigi med odjemal-

cem in streznikom. Na podrocje celostnega razvoja pa vse bolj vstopajo tudi

povezane naprave IoT, ki se dodatno zakomplicirajo celotno problematiko.

Skupen ekosistem je kljucen za obvladovanje kompleksnosti

Ce na vsak element, gledamo kot na loceno okolje, ki zahteva lastna razvojna

orodja, okolje za razhrosevanje in lasten programski jezik postane vse skupaj

neverjetno kompleksno in za razvijalce tezko obvladljivo. Kar nam lahko

pomaga do resitve kompleksne situacije je bolj poenotena platforma, ki se

cim bolj obnese v vseh teh posamicnih okoljih in s tem doprinese enoten

ekosistem v vsa okolja. Na Node.js lahko gledamo kot poenoteno platformo

in skupen ekosistem.

Danes prakticno ni predstavnika industrije IT, ki nima vsaj manjsega

projekta temeljecega na JS. Tudi podjetja, ki so se pred kratkim v javnih

izjavah dajale prednost razvoju domorodnih mobilnih aplikacij (angl. native

77

78 POGLAVJE 7. SKLEPNE UGOTOVITVE

mobile applications), tu imamo v mislih predvsem Facebook, ki danes pre-

cejsnji del razvoja usmerjajo tudi v razvoj tehnologij in ekosistemov, katerih

kljucni element je JS.

Izjema je morda le druzba Apple, kar je iz vidika ustvarjanja dodane vred-

nosti lastnih mobilnih naprav in ekosistema okrog le-teh povsem razumljivo,

po drugi strani pa se izkaze, da so prav racunalniki Apple Mac pri razvijal-

cih zelo cenjeni kot kljucno orodje za celosten odjemalsko-strezniski razvoj

aplikacij, ce lahko sklepamo po racunalnikih, ki jih predavatelji uporabljajo

za predstavitve in prakticne prikaze na razlicnih konferencah.

Pomen skupnost razvijalcev

Za razvijalca-posameznika je razvoj celostnega odjemalsko-strezniskega sklada

tezko dosegljiv cilj. Poenotenje skladov tehnologih v smislu enotnega pro-

gramskega jezika lahko sicer poenostavi in zmanjsa napor in zahtevana znanja,

a navkljub temu nihce ne pricakuje, da bo lahko posameznik res kakovostno

kos kompleksnejsemu problemu. Posamezniku je lahko v pomoc skupnost

razvijalcev, ki razvijajo ali so razvili posamezne module, ki jih lahko ostali

razvijalci znova uporabimo pri resevanju drugega problema. Strateski iz-

bor sklada tehnologij in ogrodij in nenazadnje sposobnost analize in izbire

uporabljenih modulov lahko posamezniku ali podjetju pomaga, da obcutno

skrajsa cas, ki je potreben za implementacijo resitve zahtevnejsega problema.

Celostni razvoj in sodobna podjetja

Razvijalci celostnih odjemalsko-strezniskih resitev, so tako kljucni za pod-

jetja, predvsem iz vidika interne mobilnosti delovnih mest. Z interno mobil-

nostjo lahko podjetje tekom projektov doloceno stevilo razvijalcev ustrezno

prerazporedi na posamezne dele razvoja, kjer so clovek-ure predstavljajo na-

jbolj kriticen izziv. Kljucno vlogo pri tem ima skupni jezik, saj tovrstne

prerazporeditve ne pridejo vec v postev, ce je pred tem zahtevano nekaj

mesecno usposabljanje za novo tehnologijo na drugi poziciji. Sodobno pod-

jetje, ki se ukvarja z razvojem programske opreme bodisi strezniskih, splet-

79

nih ali mobilnih aplikacij mora najprej analizirati minimalne skupne imeno-

valce in postopke za katere so usposobljeni vsi razvijalci. Obicajno so skupni

imenovalci vezani na same procese, od specifikacij do upravljanja in vodenja

razvoja, testiranja, upravljanja napak in podobno. Ce je poleg nastetega

eden izmed izbranih skupnih imenovalcev tudi skupen primeren programski

jezik je to lahko se dodatna prednost za agilnost razvojnih skupine v podjetju.

Odprtost in svoboden pretok znanja

Tudi omejevanje na eno samo tehnologijo ni dobro. Podjetje, ki se ukvarja

s sodobnimi tehnologijami razvoja aplikacij bi moralo zato predvsem skr-

beti za klimo, ki omogoca svoboden pretok informacij in znanja, predvsem

odprto in strokovno analizo argumentov za in proti. Ce cas to dopusca,

tudi moznost primerjave in vzpostavitve dveh ali vec prototipov na razlicnih

skladih tehnologij, kjer se na podlagi dejanskih rezultatov lahko izbere v

danem trenutku boljsa tehnologija, ki omogoca ustrezne preformancne rezul-

tate in je tudi is stroskovnega vidika zahtevanih razvojnih clovek-ur in ocene

vzdrzevanja primernejsa.

Razvoj lastnih storitev za racunalniski vid

Danes imamo na voljo stevilne storitve v oblaku za racunalniski vid in umetno

inteligenco (artificial inteligence, AI ): Microsoft Cognitive Services [57], IBM

Visual Recognition [62], Google Cloud Vision API [63], itd. Vse omogocajo

enostavno, hitro in cenovno ugodno implementacijo racunalniskega vida in

moznost izdelave klasifikatorjev slik.

Spoznali smo tudi, da je implementacija odprtokodnih knjiznic enostavna

in dostopna tudi v JS. Na voljo imamo tudi knjiznice, ki omogocajo razvoj AI:

sta npr. Mind [64] in vmesnik JS za TensorFlow [65], Googlovo odprtokodno

knjiznico AI [66]. Zavedati se moramo, da so inovacije mozne le z znanjem

in lastnim razvojem, ki je s pomocjo odprtokodnih komponent dostopnejsi.

Komercialne resitve so nam lahko v oporo in obenem predstavljajo odlicen

primerjali preskus za lastne storitve.

80 POGLAVJE 7. SKLEPNE UGOTOVITVE

Literatura

[1] J. J. “Garret Ajax: A New Approach to Web Applications” [Online].

Dosegljivo:

http://adaptivepath.org/ideas/ajax-new-approach-web-applications/.

[Dostopano 30. 5. 2016].

[2] D. Flanagan. “JavaScript: The Definitive Guide”, str 1. 2011.

[3] “Uvod v JSON” [Online]. Dosegljivo:

http://json.org/json-sl.html [Dostopano 30. 5. 2016].

[4] ECMA. “ECMA-404 - The JSON Data Interchange Format” [Online].

Dosegljivo:

http://www.ecma-international.org/publications/files/

ECMA-ST/ECMA-404.pdf [Dostopano 30. 5. 2016].

[5] IETF. “The application/json Media Type for JavaScript Object Nota-

tion (JSON)” [Online]. Dosegljivo:

http://www.ietf.org/rfc/rfc4627.txt [Dostopano 30. 5. 2016].

[6] E. McKean. “Fluent 2015: The Linguistics of JavaScript” [Online][Video

file]. Dosegljivo:

https://youtu.be/4sNUzqrhQqY?t=1m30s [Dostopano 30. 5. 2016].

[7] W3C. “A Short History of JavaScript” [Online]. Dosegljivo:

https://www.w3.org/community/webed/wiki/A_Short_History_of_

JavaScript. [Dostopano 30. 5. 2016].

81

http://adaptivepath.org/ideas/ajax-new-approach-web-applications/

http://json.org/json-sl.html

http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf

http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf

http://www.ietf.org/rfc/rfc4627.txt

https://youtu.be/4sNUzqrhQqY?t=1m30s

https://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript

https://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript

82 LITERATURA

[8] Ecma International. “ECMAScript: A general purpose, cross-platform

programming language” [Online]. Dosegljivo:


ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf.

str. 1-2, 1997 [Dostopano 30. 5. 2016].

[9] Ecma International. “Standard ECMA-262 ECMAScript R© 2015 Lan-

guage Specification” [Online]. Dosegljivo:

http://www.ecma-international.org/publications/standards/

Ecma-262-arch.htm. [Dostopano 30. 5. 2016].

[10] kangax, webbedspace, zloirock. “ECMAScript compatibility table” [On-

line]. Dosegljivo:

http://kangax.github.io/compat-table/es5/ [Dostopano 30. 5.

2016].

[11] Ecma International. “Standard ECMA-262 5.1 Edition” 15.9.5.44.

[Online]. Dosegljivo:

http://www.ecma-international.org/ecma-262/5.1/#sec-15.12

[Dostopano 30. 5. 2016].

[12] Ecma International. “ECMAScript: A general purpose, cross-platform

programming language” [Online]. Dosegljivo:


ECMA-ST/Ecma-262.pdf. [Dostopano 30. 5. 2016].

[13] Mozilla. “Classes - JavaScript” [Online]. Dosegljivo:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/

Reference/Classes. [Dostopano 30. 5. 2016].

[14] Microsoft. “TypeScript - JavaScript that scales” [Online]. Dosegljivo:

https://www.typescriptlang.org/ [Dostopano 30. 5. 2016].

http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf

http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf

http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm

http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm

http://kangax.github.io/compat-table/es5/

http://www.ecma-international.org/ecma-262/5.1/#sec-15.12

http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

https://www.typescriptlang.org/

LITERATURA 83

[15] T. Schlossnagle “Node-amqp is an AMQP client for nodejs”. [Online].

Dosegljivo:

https://github.com/postwait/node-amqp. [Dostopano 30. 5. 2016].

[16] OASIS “Advanced Message Queuing Protocol”. [Online]. Dosegljivo:

https://www.amqp.org/. [Dostopano 30. 5. 2016].

[17] Linux Foundation Collaborative Project. “Open API Initiative”. [On-

line]. Dosegljivo:

https://openapis.org/ [Dostopano 30. 5. 2016].

[18] StrongLoop, IBM. “LoopBack - The Node.js API Framework”. [Online].

Dosegljivo:

http://loopback.io/ [Dostopano 30. 5. 2016].

[19] S. Khan, Prof. V. Mane. International Journal of Scientific and Research

Publications, Volume 3, Issue 10, October 2013. “SQL Support over

MongoDB using Metadata”. [Online]. Dosegljivo:

http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.

395.8668&rep=rep1&type=pdf [Dostopano 30. 5. 2016].

[20] K. Chodorow, M. Dirolf. “MongoDB, The Definitive Guide”

[21] K. E. Wiegers “Software Requirements”, str 234. 2003.

[22] GitHub.com “GitHub” [Online]. Dosegljivo:

https://www.github.com. [Dostopano 30. 5. 2016].

[23] Microsoft Openness Team. “Bash on Ubuntu on Windows” [Online].

Dosegljivo:

http://openness.microsoft.com/blog/2016/04/04/

bash-ubuntu-windows/. [Dostopano 30. 5. 2016].

[24] Wikipedia. “ISO 8601” [Online]. Dosegljivo:

https://sl.wikipedia.org/wiki/ISO_8601 [Dostopano 30. 5. 2016].

https://github.com/postwait/node-amqp

https://www.amqp.org/

https://openapis.org/

http://loopback.io/

http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.395.8668&rep=rep1&type=pdf

http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.395.8668&rep=rep1&type=pdf

https://www.github.com

http://openness.microsoft.com/blog/2016/04/04/bash-ubuntu-windows/

http://openness.microsoft.com/blog/2016/04/04/bash-ubuntu-windows/

https://sl.wikipedia.org/wiki/ISO_8601

84 LITERATURA

[25] S. Hanselman. “On the nightmare that is JSON Dates.” [Online].

Dosegljivo:

http://www.hanselman.com/blog/ [Dostopano 30. 5. 2016].

[26] M. Pilgrim. “Dive Into Python 3”, poglavje 13. podpoglavje 10.

“Serializing Datatypes Unsupported by json” [Online]. Dosegljivo:

http://www.diveintopython3.net/serializing.html#

json-unknown-types [Dostopano 30. 5. 2016].

[27] MongoDB. “BSON - Binary JSON” [Online]. Dosegljivo:

http://bsonspec.org/. [Dostopano 30. 5. 2016].

[28] MongoDB. “Aggregation Pipeline Operators” [Online]. Dosegljivo:

https://docs.mongodb.com/manual/reference/operator/

aggregation/#aggregation-pipeline-operator-reference

[Dostopano 30. 5. 2016].

[29] Node.js Foundation, Strongloop, IBM. “Express” [Online]. Dosegljivo:

http://expressjs.com/ [Dostopano 30. 5. 2016].

[30] Google. “AngularJS: Developer Guide” [Online]. Dosegljivo:

https://docs.angularjs.org/guide/introduction [Dostopano 30.

5. 2016].

[31] V. Patel. “AngularJS: A Modern MVC Framework in JavaScriptAngu-

larJS Service / Factory Tutorial with Example” [Online]. Dosegljivo:

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

[Dostopano 30. 5. 2016].

[32] N. Jain. P. Mangal. D. Mehta. “AngularJS: A Modern MVC Framework

in JavaScript” [Online]. Dosegljivo:

http://www.jgrcs.info/index.php/jgrcs/article/viewFile/952/

610 [Dostopano 30. 5. 2016].

[33] Node.js Foundation. “Node.js” [Online]. Dosegljivo:

https://nodejs.org/en/. [Dostopano 30. 5. 2016].

http://www.hanselman.com/blog/OnTheNightmareThatIsJSONDatesPlusJSONNETAndASPNETWebAPI.aspx

http://www.diveintopython3.net/serializing.html#json-unknown-types

http://www.diveintopython3.net/serializing.html#json-unknown-types

http://bsonspec.org/

https://docs.mongodb.com/manual/reference/operator/aggregation/#aggregation-pipeline-operator-reference

https://docs.mongodb.com/manual/reference/operator/aggregation/#aggregation-pipeline-operator-reference

http://expressjs.com/

https://docs.angularjs.org/guide/introduction

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

http://www.jgrcs.info/index.php/jgrcs/article/viewFile/952/610

http://www.jgrcs.info/index.php/jgrcs/article/viewFile/952/610

https://nodejs.org/en/

LITERATURA 85

[34] Modulecounts. “Modulecounts” [Online]. Dosegljivo:

http://www.modulecounts.com/. [Dostopano 30. 5. 2016].

[35] IDC. “Smartphone OS Market Share, 2015 Q2” [Online]. Dosegljivo:

http://www.idc.com/prodserv/smartphone-os-market-share.jsp.

[Dostopano 30. 5. 2016].

[36] W3C. “Mobile Web Application Best Practices” [Online]. Dosegljivo:

https://www.w3.org/TR/mwabp/#bp-presentation-perceived

[Dostopano 30. 5. 2016].

[37] J. Nielsen. “Usability 101: Introduction to Us-

ability” https://www.nngroup.com/articles/

usability-101-introduction-to-usability/ [Dostopano 30. 5.

2016].

[38] E. Lamprecht (2016) “The Difference Between UX and UI Design-A

Layman’s Guide” Dosegljivo:

http://blog.careerfoundry.com/ui-design/

the-difference-between-ux-and-ui-design-a-laymans-guide/

[Dostopano 23. 5. 2016].

[39] “Callback Hell” [Online]. Dosegljivo:

http://callbackhell.com/. [Dostopano 30. 5. 2016].

[40] R. T. Fielding. “Architectural Styles and the Design of Network-based

Software Architectures”, poglavje 5. “Representational State Transfer

(REST)” [Online]. Dosegljivo:

http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_

arch_style.htm [Dostopano 30. 5. 2016].

[41] Wikipedia. “Representational state transfer” [Online]. Dosegljivo:

https://en.wikipedia.org/wiki/Representational_state_

transfer [Dostopano 30. 5. 2016].

http://www.modulecounts.com/

http://www.idc.com/prodserv/smartphone-os-market-share.jsp

https://www.w3.org/TR/mwabp/#bp-presentation-perceived

https://www.nngroup.com/articles/usability-101-introduction-to-usability/

https://www.nngroup.com/articles/usability-101-introduction-to-usability/

http://blog.careerfoundry.com/ui-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

http://blog.careerfoundry.com/ui-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

http://callbackhell.com/

http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm

http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm

https://en.wikipedia.org/wiki/Representational_state_transfer

https://en.wikipedia.org/wiki/Representational_state_transfer

86 LITERATURA

[42] A Facebook & Instagram collaboration. “Why React” [Online].

Dosegljivo:

https://facebook.github.io/react/docs/why-react.html.

[Dostopano 30. 5. 2016].

[43] Apache. “Documentation - Apache Cordova” [Online]. Dosegljivo:

https://cordova.apache.org/docs/en/latest/ [Dostopano 30. 5.

2016].

[44] Apache Cordova. “Cordova Plugin Search” [Online]. Dosegljivo:

https://cordova.apache.org/plugins/ [Dostopano 30. 5. 2016].

[45] W3C, “Geo API” [Online]. Dosegljivo:

http://dev.w3.org/geo/api/spec-source.html. [Dostopano 30. 5.

2016].

[46] W3C, “Vibration API” [Online]. Dosegljivo: https://www.w3.org/TR/

vibration/. [Dostopano 30. 5. 2016].

[47] Kadira. “Mantra” [Online]. Dosegljivo:

https://kadirahq.github.io/mantra/. [Dostopano 30. 5. 2016].

[48] Wikipedia, “Chromium Embedded Framework - Applications using

CEF” [Online]. Dosegljivo:

https://en.wikipedia.org/wiki/Chromium_Embedded_Framework#

Applications_using_CEF [Dostopano 30. 5. 2016].

[49] Node.js Foundation “New Node.js Foundation Survey Reports New

“Full Stack” In Demand Among Enterprise Developers” [Online].

Dosegljivo:

https://nodejs.org/en/blog/announcements/

nodejs-foundation-survey/. [Dostopano 30. 5. 2016].

[50] The Linux Foundation Collaborative Projects “Node.js 2016 User

Survey Report” [Online]. Dosegljivo:

https://facebook.github.io/react/docs/why-react.html

https://cordova.apache.org/docs/en/latest/

http://dev.w3.org/geo/api/spec-source.html

https://www.w3.org/TR/vibration/

https://www.w3.org/TR/vibration/

https://kadirahq.github.io/mantra/

https://en.wikipedia.org/wiki/Chromium_Embedded_Framework#Applications_using_CEF

https://en.wikipedia.org/wiki/Chromium_Embedded_Framework#Applications_using_CEF

https://nodejs.org/en/blog/announcements/nodejs-foundation-survey/

https://nodejs.org/en/blog/announcements/nodejs-foundation-survey/

LITERATURA 87

https://nodejs.org/static/documents/2016-survey-report.pdf.

[Dostopano 30. 5. 2016].

[51] IBM Emerging Technologies, “Node-RED” [Online]. Dosegljivo: http:

//nodered.org//. [Dostopano 30. 5. 2016].

[52] Apple. “Apple - Open Source” [Online]. Dosegljivo:

http://www.apple.com/opensource/. [Dostopano 30. 5. 2016].

[53] Apple. “How to install Windows using Boot Camp” [Online]. Dosegljivo:

https://support.apple.com/en-us/HT201468 [Dostopano 30. 5.

2016].

[54] P. Braden. “OpenCV Bindings for node.js” [Online]. Dosegljivo:

https://github.com/peterbraden/node-opencv/blob/master/

README.md [Dostopano 30. 5. 2016].

[55] OpenCV. “Introduction to OpenCV” [Online]. Dosegljivo:

http://docs.opencv.org/2.4/doc/tutorials/introduction/

table_of_content_introduction/table_of_content_

introduction.html [Dostopano 30. 5. 2016].

[56] Git. “Git - Reference” [Online]. Dosegljivo:

https://git-scm.com/docs [Dostopano 30. 5. 2016].

[57] Microsoft. “Cognitive Services - Computer Vision API” [Online].

Dosegljivo:

https://www.microsoft.com/cognitive-services/en-us/

computer-vision-api [Dostopano 30. 5. 2016].

[58] A. M. Øygard. “clmtrackr” [Online]. Dosegljivo:

https://github.com/auduno/clmtrackr/blob/dev/README.md

[Dostopano 30. 5. 2016].

[59] E. Zatepyakin. “Jsfeat - JavaScript Computer Vision library” [Online].

Dosegljivo:

https://nodejs.org/static/documents/2016-survey-report.pdf

http://nodered.org//

http://nodered.org//

http://www.apple.com/opensource/

https://support.apple.com/en-us/HT201468

https://github.com/peterbraden/node-opencv/blob/master/README.md

https://github.com/peterbraden/node-opencv/blob/master/README.md

http://docs.opencv.org/2.4/doc/tutorials/introduction/table_of_content_introduction/table_of_content_introduction.html



https://www.microsoft.com/cognitive-services/en-us/computer-vision-api

https://www.microsoft.com/cognitive-services/en-us/computer-vision-api

https://github.com/auduno/clmtrackr/blob/dev/README.md

88 LITERATURA

https://inspirit.github.io/jsfeat/[Dostopano 30. 5. 2016].

[Dostopano 30. 5. 2016].

[60] O. Smith. “face-detect” [Online]. Dosegljivo:

https://github.com/orls/ccv-purejs/blob/master/README.md

[Dostopano 30. 5. 2016].

[61] E. Lundgren, T. Rocha Z. Rocha P. Carvalho M. Bello. “tracking.js - A

modern approach for Computer Vision on the web” [Online]. Dosegljivo:

https://trackingjs.com/ [Dostopano 30. 5. 2016].

[62] IBM. “Visual Recognition - Understand the contents of images. Create

custom classifiers to develop smart applications.” [Online]. Dosegljivo:

http://www.ibm.com/smarterplanet/us/en/ibmwatson/

developercloud/visual-recognition.html [Dostopano 30. 5.

2016].

[63] Google. “Cloud Vision API - Derive insight from images with our pow-

erful Cloud Vision API” [Online]. Dosegljivo:

https://cloud.google.com/vision/ [Dostopano 30. 5. 2016].

[64] S. Miller. “Mind - Flexible neural networks in JavaScript” [Online].

Dosegljivo:

https://github.com/stevenmiller888/mind [Dostopano 30. 5. 2016].

[65] N. Kothari. “TensorFlow + Node.js” [Online]. Dosegljivo:

https://github.com/nikhilk/node-tensorflow [Dostopano 30. 5.

2016].

[66] Google. “TensorFlow - an Open Source Software Library for Machine

Intelligence” [Online]. Dosegljivo:

https://www.tensorflow.org/ [Dostopano 30. 5. 2016].

[67] Mozilla Developer Network. “JavaScript” [Online]. Dosegljivo:

https://developer.mozilla.org/en-US/docs/Web/JavaScript

[Dostopano 30. 5. 2016].

https://inspirit.github.io/jsfeat/

https://github.com/orls/ccv-purejs/blob/master/README.md

https://trackingjs.com/

http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition.html

http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition.html

https://cloud.google.com/vision/

https://github.com/stevenmiller888/mind

https://github.com/nikhilk/node-tensorflow

https://www.tensorflow.org/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

LITERATURA 89

[68] GNU General Public Licence. [Online]. Dosegljivo:

https://www.gnu.org/copyleft/gpl.html. [Dostopano 30. 5. 2016].

https://www.gnu.org/copyleft/gpl.html

Documents

Skladi tehnologij in ogrodja za celostni odjemalsko-stre ... · JavaScript (JS) technology stacks and frameworks for full-stack application development: from web clients, mobile and