Dokument se fokusira na razvoj hibridnih aplikacija koristeći web tehnologije i native wrapper-e za desktop. Opišete različite tehnologije, alate i pristupe za izradu aplikacija, uključujući node-webkit i njegovu distribuciju. Također se raspravlja o mogućnostima korištenja node.js u kombinaciji s Chromium-om za poboljšanje performansi i funkcionalnosti aplikacija.

1. Web tehnologije
u desktop
developmentu
Darko Kukovec
@DarkoKukovec

2. Hibridne aplikacije
● Web tehnologije + nativni wrapper
● Mobilne hibridne aplikacije
–
–
PhoneGap
Custom
● Desktop

3. Zašto hibridne
desktop aplikacije?

4. Razvoj za više platformi
•
•
•
•
Java
.NET + mono
QT
Hibridne aplikacije

5. Wrapperi

6. Adobe Air
•
•
•
•
Spor
Ograničeni developer toolsi
HTML5 + ActionScript
Distribucija: Izvršna datoteka

7. Qt
•
•
custom wrapper
HTML5 + nativni kod
–
–
•
–
C++
Python
JavaScript
Distribucija: Izvršna datoteka

8. Chrome Apps
● HTML5 + Chrome APIs
–
50+ API-ja
● Distribucija: Chrome Web Store

9. app.js
•
•
•
•
webkit + node.js
spori razvoj
HTML5 + node.js
Distribucija: izvršna datoteka

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

11. node-webkit
Getting started

12. Hello world!
•
Što je potrebno za izradu aplikacije
–
–
–
node-webkit
manifest
HTML, JS

13. Pokretanje i testiranje
● pokretanje
–
–
nw je u pathu
nw .
● testiranje
–
–
Chromedriver
Selenium

14. Debuggiranje
●
●
●
●
Chrome Developer Tools
DevTools jail
remote debugging
Sublime Text 2 konzola

15. 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

16. 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

17. Tech stuff

18. 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

19. Node.js moduli
● defaultni
–
require
● JavaScript
–
–
instalirati lokalno
node_modules
● C/C++
–
–
–
nw-gyp
ovisi o platformi
ovisi o verziji node-webkita

20. DOM promjene
● iframe
–
–
–
onemogućene sigurnosne značajke
omogućen node.js
Developer Tools

21. 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

22. Tko koristi
node-webkit
I koje njegove mogućnosti koristi

23. 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

24. 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

25. Što se može napraviti?
● Node.js + Chromium

26. Hvala na pažnji