web tehnologije u desktop developmentu

26
Web tehnologije u desktop developmentu Darko Kukovec @DarkoKukovec

Upload: darko-kukovec

Post on 05-Jul-2015

244 views

Category:

Documents


5 download

TRANSCRIPT

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

• Što je potrebno za izradu aplikacije– node-webkit– manifest– HTML, JS

Hello world!

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

● 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

Zaštita 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