Web technologies for desktop development @ berlinjs apps
Upcoming SlideShare
Loading in...5
×
 

Web technologies for desktop development @ berlinjs apps

on

  • 695 views

 

Statistics

Views

Total Views
695
Views on SlideShare
686
Embed Views
9

Actions

Likes
1
Downloads
6
Comments
0

3 Embeds 9

https://twitter.com 4
http://www.slideee.com 3
http://localhost 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web technologies for desktop development @ berlinjs apps Web technologies for desktop development @ berlinjs apps Presentation Transcript

  • 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
  • Node.js changes • global window! • Chromium console instead of the node.js console! • Conflicts! • node.js require and RequireJS! • underscore
  • 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 • • Ambiance • • Creating gif animations from videos 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
  • Thank you! Any questions, Dave?