Playing with HTML, JS and CSS out of the sandbox

1. Building a Desktop
Streaming console with
Node.js and WebKit
Playing with HTML, JS and CSS out of the
sandbox

2. 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

3. 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

4. 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

5. W W W. S P R E A K E R .C O M
How much“Real World”™

6. W W W. S P R E A K E R .C O M
How much“Real World”™

7. W W W. S P R E A K E R .C O M
How much“Real World”™

8. W W W. S P R E A K E R .C O M
How much“Real World”™

9. W W W. S P R E A K E R .C O M
How much“Real World”™

10. 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

11. 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

12. 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

13. W W W. S P R E A K E R .C O M
package.json main_process
renderer_process

14. 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…)

15. 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

16. W W W. S P R E A K E R .C O M
…you can debug with chromium
tools

17. W W W. S P R E A K E R .C O M
…you can leverage desktop
integration
• Menu
• Notifications
• Shortcuts
• Multiple displays
• …

18. 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

19. 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/

20. 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

21. 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

22. 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

23. 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

24. 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 page
Generate 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

25. 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

26. 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)

27. W W W. S P R E A K E R .C O M
all these things makes me very
happy!

28. 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

29. 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.

30. Thanks!
This talk was proudly streamed to my
colleagues using the product we built :)