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:...
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š...
Nativni elementi
● file dialozi
–

datoteke i mape

● otvaranje URL-a u defaultnom browseru
● otvaranje datoteke u default...
Tech stuff
Node.js promjene
● global → window
● Chromium konzola umjesto node.js konzole
● konflikti
–

–

node.js require i require....
Node.js moduli
● defaultni
–

require

● JavaScript
–
–

instalirati lokalno
node_modules

● C/C++
–
–
–

nw-gyp
ovisi o p...
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 platf...
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čki...
Tko koristi node-webkit
● Gifrocket
–

kreiranje gif animacija iz videa

● Ambiance
–

code editor s modulima (npm)

● Ard...
Što se može napraviti?
● Node.js + Chromium
Hvala na pažnji
Upcoming SlideShare
Loading in …5
×

Web tehnologije u desktop developmentu

435 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
435
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web tehnologije u desktop developmentu

  1. 1. Web tehnologije u desktop developmentu Darko Kukovec @DarkoKukovec
  2. 2. Hibridne aplikacije ● Web tehnologije + nativni wrapper ● Mobilne hibridne aplikacije – – PhoneGap Custom ● Desktop
  3. 3. Zašto hibridne desktop aplikacije?
  4. 4. Razvoj za više platformi • • • • Java .NET + mono QT Hibridne aplikacije
  5. 5. Wrapperi
  6. 6. Adobe Air • • • • Spor Ograničeni developer toolsi HTML5 + ActionScript Distribucija: Izvršna datoteka
  7. 7. Qt • • custom wrapper HTML5 + nativni kod – – • – C++ Python JavaScript Distribucija: Izvršna datoteka
  8. 8. Chrome Apps ● HTML5 + Chrome APIs – 50+ API-ja ● Distribucija: Chrome Web Store
  9. 9. app.js • • • • webkit + node.js spori razvoj HTML5 + node.js Distribucija: izvršna datoteka
  10. 10. node-webkit ● Chromium + node.js ● brzi razvoj (Intel) – – Chromium 30 node.js 0.10.18 ● HTML5 + node.js ● Distribucija: izvršna datoteka
  11. 11. node-webkit Getting started
  12. 12. Hello world! • Što je potrebno za izradu aplikacije – – – node-webkit manifest HTML, JS
  13. 13. Pokretanje i testiranje ● pokretanje – – nw je u pathu nw . ● testiranje – – Chromedriver Selenium
  14. 14. Debuggiranje ● ● ● ● Chrome Developer Tools DevTools jail remote debugging Sublime Text 2 konzola
  15. 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. 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. 17. Tech stuff
  18. 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. 19. Node.js moduli ● defaultni – require ● JavaScript – – instalirati lokalno node_modules ● C/C++ – – – nw-gyp ovisi o platformi ovisi o verziji node-webkita
  20. 20. DOM promjene ● iframe – – – onemogućene sigurnosne značajke omogućen node.js Developer Tools
  21. 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. 22. Tko koristi node-webkit I koje njegove mogućnosti koristi
  23. 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. 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. 25. Što se može napraviti? ● Node.js + Chromium
  26. 26. Hvala na pažnji

×