![Page 1: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/1.jpg)
Building a Desktop Streaming console with
Node.js and WebKit
Playing with HTML, JS and CSS out of the sandbox
![Page 2: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/2.jpg)
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
![Page 3: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/3.jpg)
W W W. S P R E A K E R .C O M
Who are you?
• Software engineer @{companyName} • JavaScript enthusiasts • Github pushers on https://github.com/{{githubUsername}} • “{{very || notSo}} active” tweeting birds @{{twitterHandle}} • {{otherUnrelatedPassion}} Lover
![Page 4: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/4.jpg)
W W W. S P R E A K E R .C O M
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
![Page 5: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/5.jpg)
W W W. S P R E A K E R .C O M
How much “Real World”™
![Page 6: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/6.jpg)
W W W. S P R E A K E R .C O M
How much “Real World”™
![Page 7: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/7.jpg)
W W W. S P R E A K E R .C O M
How much “Real World”™
![Page 8: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/8.jpg)
W W W. S P R E A K E R .C O M
How much “Real World”™
![Page 9: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/9.jpg)
W W W. S P R E A K E R .C O M
How much “Real World”™
![Page 10: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/10.jpg)
W W W. S P R E A K E R .C O M
“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
![Page 11: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/11.jpg)
W W W. S P R E A K E R .C O M
“Use HTML, CSS, and JavaScript with Chromium
and Node.js to build your app.
electron website
![Page 12: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/12.jpg)
W W W. S P R E A K E R .C O M
Our winner was?
Faster, Stronger… Better (cit.)
npm install -g electron
![Page 13: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/13.jpg)
W W W. S P R E A K E R .C O M
package.json main_process
renderer_process
![Page 14: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/14.jpg)
W W W. S P R E A K E R .C O M
basically you are writing a client app…
• ReactJS • SystemJS • JSPM • Babel • other libs (moment, underscore, emojione, url,
reconfig, analytics* etc…)
![Page 15: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/15.jpg)
W W W. S P R E A K E R .C O M
this is very interesting given the state of modern frontend tools
![Page 16: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/16.jpg)
W W W. S P R E A K E R .C O M
…you can debug with chromium tools
![Page 17: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/17.jpg)
W W W. S P R E A K E R .C O M
…you can leverage desktop integration
• Menu • Notifications • Shortcuts • Multiple displays • …
![Page 18: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/18.jpg)
W W W. S P R E A K E R .C O M
you can go down a bit…RPC server to expose app API
use raw sockets
![Page 19: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/19.jpg)
W W W. S P R E A K E R .C O M
…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/
![Page 20: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/20.jpg)
W W W. S P R E A K E R .C O M
…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
![Page 21: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/21.jpg)
W W W. S P R E A K E R .C O M
…you can unit test inside the electron environment
https://github.com/lele85/karma-electron-launcher
![Page 22: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/22.jpg)
W W W. S P R E A K E R .C O M
…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
![Page 23: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/23.jpg)
W W W. S P R E A K E R .C O M
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
![Page 24: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/24.jpg)
W W W. S P R E A K E R .C O M
… 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
![Page 25: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/25.jpg)
W W W. S P R E A K E R .C O M
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
![Page 26: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/26.jpg)
W W W. S P R E A K E R .C O M
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)
![Page 27: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/27.jpg)
W W W. S P R E A K E R .C O M
all these things makes me very happy!
![Page 28: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/28.jpg)
W W W. S P R E A K E R .C O M
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
![Page 29: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/29.jpg)
W W W. S P R E A K E R .C O M
but…
• It works for us • Makes desktop development fun • Makes desktop development fast.
![Page 30: Building a Desktop Streaming console with Node.js and WebKit](https://reader034.vdocuments.mx/reader034/viewer/2022042611/5871aade1a28abda6a8b56f7/html5/thumbnails/30.jpg)
Thanks!This talk was proudly streamed to my
colleagues using the product we built :)