Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

486 views

Published on

  • Be the first to comment

  • Be the first to like this

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

×