Web technologies for desktop development @ berlinjs apps

50 %
50 %
Information about Web technologies for desktop development @ berlinjs apps

Published on February 28, 2014

Author: darko3

Source: slideshare.net

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)


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


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?

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Desktop Development

Technologies. Cloud; App Development; Web; Data; Gaming; ... patterns & practices Desktop Development. ... and on Web client application development. ...
Read more

Choosing The Best Mobile App Development Technology

A great app starts with the right mobile app development technology. ... hybrid and web app types. Home; Latest; About Us; Press; Hiring Headquarters ...
Read more

Choose Your Technology (Windows)

When you want to create a new desktop app, ... Choose Your Technology. ... App Developer Agreement
Read more

How to develop Desktop Apps using HTML/CSS/JavaScript ...

How to develop Desktop Apps using HTML/CSS/JavaScript? ... like a web app (HTML/JS/CSS). As a web developer who ... desktop app with web technologies ...
Read more

Windows 8* Store vs Desktop App Development | Intel ...

Windows 8* Store vs Desktop App Development. ... Developers should be aware that some device features and technologies may ... or web technologies ...
Read more

Week 1: Advantages of the Web for Mobile Application ...

... desktop Web development, ... Web technology for mobile applications can be read in Interview: Financial Times Experience with Web Apps on W3C's blog ...
Read more

Web Apps | Android Developers

Building Web Apps in WebView How to embed web pages into your Android application using ... Get the latest Android developer news and tips that will help ...
Read more

Desktop vs. Web Applications: A Deeper Look and Comparison ...

Different User Environments Can Impact Whether a Desktop or a Web ... Desktop vs. Web Applications: A ... Get Web, Data, and Mobile Development tips ...
Read more

No-cost desktop software development is dead on Windows 8 ...

No-cost desktop software development is ... for Metro style app development. To create desktop ... development, Web technology ...
Read more