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!
• Distri...
brackets-shell
• HTML5 + some v8 extensions (e.g. file access)!
• Made by Adobe for the Brackets code editor!
• “Note: The ...
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!
• Chromedr...
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 t...
Native elements
• File dialogs!
• Files and folders!
• Opening URLs in the default browser!
• Opening files in the default ...
Tech stuff
Node.js changes
• global

window!

• Chromium console instead of the node.js console!
• Conflicts!
• node.js require and Re...
Node.js modules
• Builtin!
• require!
• JavaScript!
• Local install (node_modules)!
• require!
• C/C++!
• nw-gyp!
• Platfo...
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 vers...
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 modul...
Auto update
• Not supported out of the box!
• Our own update detection & downloading!
• Windows: Installation wizard is do...
What else is
node-webkit used for
•

Gifrocket
•

•

Ambiance
•

•

Creating gif animations
from videos

Code editor with support
for modules (npm)

Arduino...
What is possible
Node.js + Chromium
• Atwood’s Law:!
• “any application that can be written in JavaScript,
will eventually be written in Ja...
Node.js + Chromium
Thank you!

Any questions, Dave?
Upcoming SlideShare
Loading in …5
×

Web technologies for desktop development @ berlinjs apps

1,136 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,136
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web technologies for desktop development @ berlinjs apps

  1. 1. Web technologies for desktop development Darko Kukovec
  2. 2. Hybrid apps • Web technologies + native wrapper! • Mobile hybrid apps! • PhoneGap! • Custom! • Desktop
  3. 3. Why hybrid desktop applications?
  4. 4. Multi-platform development • Java! • .NET + mono! • QT! • Hybrid app
  5. 5. You already know JavaScript (and HTML and CSS)
  6. 6. Wrappers
  7. 7. Adobe Air • Slow! • Limited developer tools! • HTML5 + ActionScript! • Distribution: Executable file
  8. 8. QT • Custom wrapper! • HTML5 + native code! • C++! • Python! • JavaScript! • Distribution: Executable file
  9. 9. Chrome Apps • HTML5 + Chrome APIs! • 50+ APIs! • Distribution: Chrome Web Store
  10. 10. app.js • webkit + node.js! • Slow development! • HTML5 + node.js! • Distribution: Executable file
  11. 11. node-webkit • Chromium + node.js! • Fast development (Intel)! • Chromium 32! • node.js 0.11.9! • HTML5 + node.js! • Distribution: Executable file
  12. 12. 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
  13. 13. TideSDK • HTML5 + PHP/Ruby/Python! • Distribution: Executable file
  14. 14. node-webkit
  15. 15. Hello world! • What you need:! • node-webkit! • manifest (package.json)! • HTML, JS
  16. 16. Running & testing • Running! • If nw is in the Terminal path: nw .! • alias nw='open -a node-webkit' • Testing! • Chromedriver! • Selenium
  17. 17. Debugging • Chrome Dev Tools! • DevTools Jail! • Remote debugging! • Sublime Text console
  18. 18. 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
  19. 19. 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
  20. 20. Tech stuff
  21. 21. Node.js changes • global window! • Chromium console instead of the node.js console! • Conflicts! • node.js require and RequireJS! • underscore
  22. 22. Node.js modules • Builtin! • require! • JavaScript! • Local install (node_modules)! • require! • C/C++! • nw-gyp! • Platform dependent! • node-webkit version dependent
  23. 23. DOM changes • iframe! • Disable security! • Node.js! • Top! • DevTools Jail
  24. 24. 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
  25. 25. Our node-webkit experience My code is compiling
  26. 26. Infinum • Three node-webkit project in the last year! • Two kiosk mode apps for Windows! • Desktop app for Windows and OSX
  27. 27. Crypto • Decrypting about 50x faster than Adobe Air! • Tens of ms instead of a few seconds per photo
  28. 28. Optical media • Detection! • Windows: periodically check all the letters! • OSX: Watch /Volumes! • File access! • fs module
  29. 29. 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
  30. 30. What else is node-webkit used for
  31. 31. • Gifrocket • • Ambiance • • Creating gif animations from videos Code editor with support for modules (npm) Arduinoscope • Osciloscope for Arduino • Hardware access
  32. 32. What is possible
  33. 33. 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/
  34. 34. Node.js + Chromium
  35. 35. Thank you! Any questions, Dave?

×