building a desktop streaming console with node.js and webkit

Building a Desktop Streaming console with

Node.js and WebKit

Playing with HTML, JS and CSS out of the sandbox

W W W. S P R E A K E R .C O M

Who am i?Emanuele Rampichini

• Software engineer @spreaker • JavaScript enthusiast • Github pusher on https://github.com/lele85 • “Not so active” tweeting bird @emauele_r • Mountain Bike Lover

https://github.com/lele85


Who are you?

• Software engineer @{companyName} • JavaScript enthusiasts • Github pushers on https://github.com/{{githubUsername}} • “{{very || notSo}} active” tweeting birds @{{twitterHandle}} • {{otherUnrelatedPassion}} Lover


Why are you here listening to me?

• You don’t know • You are not listening • You have to change 6 trains to get home, it’s gonna be a long way back so

you think that a 30 minutes nap is a good idea.

• You want to build a “Real World Desktop Application”™ using JavaScript


How much “Real World”™


“NW.js lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies. It was previously known as "node-webkit" project.

nwjs website


“Use HTML, CSS, and JavaScript with Chromium

and Node.js to build your app.

electron website


Our winner was?

Faster, Stronger… Better (cit.)

npm install -g electron


package.json main_process

renderer_process


basically you are writing a client app…

• ReactJS • SystemJS • JSPM • Babel • other libs (moment, underscore, emojione, url,

reconfig, analytics* etc…)


this is very interesting given the state of modern frontend tools


…you can debug with chromium tools


…you can leverage desktop integration

• Menu • Notifications • Shortcuts • Multiple displays • …


you can go down a bit…RPC server to expose app API

use raw sockets


…you can get more from chromium

https://github.com/atom/electron/blob/master/docs/api/chrome-command-line-switches.md

http://peter.sh/experiments/chromium-command-line-switches/

https://github.com/atom/electron/blob/master/docs/api/chrome-command-line-switches.md

http://peter.sh/experiments/chromium-command-line-switches/


…or you can start digging “into the rabbit hole”

Electron is moving faaaast, use NaN to write add-ons, dynamic libs can give you headaches


…you can unit test inside the electron environment

https://github.com/lele85/karma-electron-launcher

https://github.com/lele85/karma-electron-launcher


…you have autoupdates out of the box*

* Works only with signed app, works in a different way on windows

Single script on a server returning

update zip uri and metadata


crash reports are super easy to collect and test!

Every native crash (out of memory, segmentation faults) electron send a POST to configured submitUrl with:

platform informations memory dump in minidump format


… not so easy to decode :)For each version you deliver you need to get electron

debug symbols from project release pageGenerate symbols for your native libs with breakpad

tool dump_syms*Put them in a folder (with a standard structure) and use minidump_stackwalk* to symbolize them in a correct

way

* you can build these tools from break pad source tree


you can add branding and package your app for mac and windows in a breeze

https://github.com/atom/grunt-electron-installer

https://github.com/maxogden/electron-packager


you can distribute your code in a “safe way”

Inside electron you can treat your asar bundle as a normal directory. (you may want to uglify/obfuscate your code)


all these things makes me very happy!


Sadly electron has some downsides…

• You are bundling Chromium with every update. compressed app size is around 40MB

• You can’t hit Mac App Store and Windows Marketplace

• Sometimes you have to dig into tools source code (this can be fun) and spend time on github project issue tracker


but…

• It works for us • Makes desktop development fun • Makes desktop development fast.

Thanks!This talk was proudly streamed to my

colleagues using the product we built :)

building a desktop streaming console with node.js and webkit

Engineering