Web tehnologije
u desktop
developmentu

Darko Kukovec
@DarkoKukovec
Hibridne aplikacije
● Web tehnologije + nativni wrapper
● Mobilne hibridne aplikacije
–
–

PhoneGap
Custom

● Desktop
Zašto hibridne
desktop aplikacije?
Razvoj za više platformi

•
•
•
•

Java
.NET + mono
QT
Hibridne aplikacije
Wrapperi
Adobe Air

•
•
•
•

Spor
Ograničeni developer toolsi
HTML5 + ActionScript
Distribucija: Izvršna datoteka
Qt

•
•

custom wrapper
HTML5 + nativni kod
–
–

•

–

C++
Python
JavaScript

Distribucija: Izvršna datoteka
Chrome Apps
● HTML5 + Chrome APIs
–

50+ API-ja

● Distribucija: Chrome Web Store
app.js

•
•
•
•

webkit + node.js
spori razvoj
HTML5 + node.js
Distribucija: izvršna datoteka
node-webkit
● Chromium + node.js
● brzi razvoj (Intel)
–
–

Chromium 30
node.js 0.10.18

● HTML5 + node.js
● Distribucija: izvršna datoteka
node-webkit

Getting started
Hello world!

•

Što je potrebno za izradu aplikacije
–
–
–

node-webkit
manifest
HTML, JS
Pokretanje i testiranje
● pokretanje
–
–

nw je u pathu
nw .

● testiranje
–
–

Chromedriver
Selenium
Debuggiranje
●
●
●
●

Chrome Developer Tools
DevTools jail
remote debugging
Sublime Text 2 konzola
Pakiranje i distribucija
● package.nw ili package.json u istoj mapi kao
i node-webkit izvršna datoteka
● pakiranje u izvršnu datoteku
–

–

Windows i Linux
●
napraviti node-webkit paket
●
Windows: copy /b nw.exe+app.nw app.exe
●
Linux: cat /usr/bin/nw app.nw > app && chmod +x app
OS X
●
kopirati aplikaciju u Contents/Resources mapu
unutar node-webkit aplikacije
Nativni elementi
● file dialozi
–

datoteke i mape

● otvaranje URL-a u defaultnom browseru
● otvaranje datoteke u defaultnoj aplikaciji ili u
file manageru
● menu bar / status bar
● pristup clipboardu
● kiosk mode
Tech stuff
Node.js promjene
● global → window
● Chromium konzola umjesto node.js konzole
● konflikti
–

–

node.js require i require.js
●
Rješenje: preimenovati window.require prije
učitavanja require.js
node.js crypto i blink crypto
Node.js moduli
● defaultni
–

require

● JavaScript
–
–

instalirati lokalno
node_modules

● C/C++
–
–
–

nw-gyp
ovisi o platformi
ovisi o verziji node-webkita
DOM promjene
● iframe
–
–
–

onemogućene sigurnosne značajke
omogućen node.js
Developer Tools
Zaštita koda
● v8 snapshot
–
–
–
–

može sakriti dio (nekoliko desetaka kB) koda u
binarnu datoteku
radi se za svaku platformu posebno
malo sporiji od običnog koda
učitava se prije običnog koda
Tko koristi
node-webkit

I koje njegove mogućnosti koristi
Tko koristi node-webkit
● Infinum :)
–
–

–

3 projekta (Windows i OSX)
Crypto
●
oko 50x brži od Adobe Air
Pristup optičkim medijima
●
detekcija i čitanje
Tko koristi node-webkit
● Gifrocket
–

kreiranje gif animacija iz videa

● Ambiance
–

code editor s modulima (npm)

● Arduinoscope
–
–

osciloskop za Arduino
pristup hardwareu

● Everytime
–
–

video bookmarking
komunicira sa VLC playerom
Što se može napraviti?
● Node.js + Chromium
Hvala na pažnji

Web tehnologije u desktop developmentu