Web technologies for desktop development

Darko Kukovec

Hybrid apps

• Web technologies + native wrapper!

• Mobile hybrid apps!

• PhoneGap!

• Custom!

• Desktop

Why hybrid desktop applications?

Multi-platform development

• Java!

• .NET + mono!

• QT!

• Hybrid app

You already know JavaScript(and HTML and CSS)

Wrappers

Adobe Air

• Slow!

• Limited developer tools!

• HTML5 + ActionScript!

• Distribution: Executable file

QT• Custom wrapper!

• HTML5 + native code!

• C++!

• Python!

• JavaScript!

• Distribution: Executable file

Chrome Apps

• HTML5 + Chrome APIs!

• 50+ APIs!

• Distribution: Chrome Web Store

app.js

• webkit + node.js!

• Slow development!

• HTML5 + node.js!

• Distribution: Executable file

node-webkit• Chromium + node.js!

• Fast development (Intel)!

• Chromium 32!

• node.js 0.11.9!

• HTML5 + node.js!

• Distribution: Executable file

brackets-shell

• HTML5 + some v8 extensions (e.g. file access)!

• Made by Adobe for the Brackets code editor!

• “Note: The brackets-shell is only maintained for use by the Brackets project.”!

• Distribution: Executable file

TideSDK

• HTML5 + PHP/Ruby/Python!

• Distribution: Executable file

node-webkit

Hello world!

• What you need:!

• node-webkit!

• manifest (package.json)!

• HTML, JS

Running & testing• Running!

• If nw is in the Terminal path: nw .!

• alias nw='open -a node-webkit'

• Testing!

• Chromedriver!

• Selenium

Debugging

• Chrome Dev Tools!

• DevTools Jail!

• Remote debugging!

• Sublime Text console

Packaging & distribution• package.nw or package.json in the same

folder as the node-webkit executable!

• Packaging into the executable file!

• Windows and Linux - make a package.nw file and run one command from the console!

• OS X - copy the package to Content/Resources/app.nw inside of the app

Native elements• File dialogs!

• Files and folders!

• Opening URLs in the default browser!

• Opening files in the default app or in the file manager!

• Menu bar / status bar!

• Clipboard access!

• Kiosk mode!

• Frameless mode

Tech stuff

• global window!

• Chromium console instead of the node.js console!

• Conflicts!

• node.js require and RequireJS!

• underscore

Node.js changes

Node.js modules• Builtin!

• require!

• JavaScript!

• Local install (node_modules)!

• require!

• C/C++!

• nw-gyp!

• Platform dependent!

• node-webkit version dependent

DOM changes

• iframe!

• Disable security!

• Node.js!

• Top!

• DevTools Jail

Code protection• v8 snapshot!

• Can hide a part (tens of KB) of the code into a binary file!

• Platform & node-webkit version dependent!

• Little slower, loaded at startup

Our node-webkit experience

My code is compiling

Infinum• Three node-webkit project in the last year!

• Two kiosk mode apps for Windows!

• Desktop app for Windows and OSX

Crypto• Decrypting about 50x faster than Adobe Air!

• Tens of ms instead of a few seconds per photo

Optical media

• Detection!

• Windows: periodically check all the letters!

• OSX: Watch /Volumes!

• File access!

• fs module

Auto update• Not supported out of the box!

• Our own update detection & downloading!

• Windows: Installation wizard is downloaded!

• OSX: All the app files can be replaced while the app is running

What else is node-webkit used for

• Gifrocket

• Creating gif animations from videos

• Ambiance

• Code editor with support for modules (npm)

• Arduinoscope

• Osciloscope for Arduino

• Hardware access

What is possible

Node.js + Chromium

• Atwood’s Law:!

• “any application that can be written in JavaScript, will eventually be written in JavaScript.”!

• http://www.reddit.com/r/atwoodslaw/

Node.js + Chromium

Any questions, Dave?

Thank you!