Brief intro to hybrid app development

(HTML/CSS/JS, IO.js, Native C++ extensions & NPAPI)

$ whoami

Mykhailo @z0r1k Lieibenson

& more...

Why do we need it?

Code re-use between web and desktop

I.e. Slack web client and desktop;
or Kindle Cloud Reader;
or Popcorn Time.

Desktop can have additional functionality like background activity 

or notifications or whatever, you name it. 

So how do we…?

NW.js

Previously known as node-webkit

https://github.com/nwjs/nw.js/

NW.js is framework which allows to build native apps using web technologies.

It ships with IO.js 1.2.0

Friendly Node.JS backwards compatible fork 

It is compatible with NPM modules

So any Node framework can be used

It has OS level access

Clipboard, Tray/Menubar, Screen, File dialogs, etc.

It ships with browser

Chromium 41

Since it is browser you can use any 3rd party frontend library or framework

Since it is browser you can easily load assets from CDN for split testing

Also you can easily push stats to splunk or whatsoever 

Since it is a browser DevTools can be used for debugging

Since it is Chromium browser it is WebRTC enabled

Since it is Chromium HTML5 support is very good

It still supports NPAPI plugins

No PPAPI though :(

I’m not sure about NaCl (native client)

So "native plugin" can register custom mime-type and “render” on <embed> or <object>

Supports frameless and kiosk modes

Yes, you can disable “Back” button.

And you can resize, minimize, drag and do other actions with window too.

Multi-window support

Use JS to talk between windows
(i.e. postMessage API)

It supports data persistence

• File system access
• WebSQL DB
• IndexedDB
• PouchDB
• EJDB (Embedded JSON Database engine)
• NeDB (Node embedded database)
• LowDB is a flat JSON file database for Node
• StoreDB is a local database based on localStorage
• Web Storage (Local Storage, Session Storage, Application Cache)

Supports command line switches

• --url="website-url"
• --no-toolbar
• --disable-gpu --force-cpu-draw
• --disable-transparency
• all the switches supported by Content API of Chromium

Ships with ChromeDriver

So you can run test automation against nw.js app.
And against web version too.

Works fine with Mocha

Or any other unit test framework on both ends: 

client & io.js

You also can have 

C++ add-ons which extend NW.js and expose JS interface

Please read up on nw-gyp / node-gyp more. 

It allows to package your app for Mac, Windows & Linux
(single executable)

You also can ship bundled resources inside executable.

No mobile support!

Even though IO.js can be built for Android & probably iOS

How does it all work together?

Summary

• Write your app “backend” as node.js app
• Write your app “frontend” as web app
• Use OS specific functions in both “ends”
  (if available)
• Talk to your “remote backend” as regular
  (if needed)

• Keep your native code as NPAPI or NW-GYP
  (desktop browsers will drop NPAPI and have them as click-to-play)

• Don’t forget manifest file (package.json)

• Package your app

Example

Any alternatives to NW.JS?

Atom Shell

https://github.com/atom/atom-shell

Main difference is that NW.js entry point is browser and in Atom Shell it is a script (which can create browser)

CEF, QTWebView, Embeddable V8

(But it’s just JS runtime, so you still need renderer, etc).

And what about mobile?

Apache Cordova, PhoneGap, React Native, Native Script, Titanium, Ionic, etc.

All of these have completely different architecture and based on WebView

(JIT accelerated on iOS)

Any drawbacks of using this kind of black magic?

Yeah… some

• Package size (It includes io.js + chromium) ~ 60Mb (unpacked)

• Also it is Chromium and not Chrome so some difference in behaviour might appear

• It is shapshot of Chromium and IO.JS and there is no way to update
  (we have to wait for the next nw.js release)

• WebView on mobile (for mobile solutions) is different depending on OS

That’s pretty much it

Thank you!

Any questions?

Mykhailo @z0r1k Lieibenson