Playing with HTML, JS and CSS out of the sandbox.

1. Building a Desktop
Streaming console with
Electron and ReactJS
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 45 minutes nap is a good idea.
• You want to build a cross platform
“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
“
Use HTML, CSS, and JavaScript with Chromium
and Node.js to build your app.
nw.js or Electron?

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

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

13. W W W. S P R E A K E R .C O M
this looks very interesting given the
state of modern frontend tools

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
WHY React.js
• Unopinionated render engine for the DOM
• Can be fast enough… try to do 16ms render loop
with angular bidirectional binding
• Battle tested by Facebook

16. W W W. S P R E A K E R .C O M
HOW React.js
• Multiple store single dispatcher flux architecture “for
something" (USER ACTIONS, WEB API, PUSH
NOTIFICATION)
• We rolled out our solution for specific tasks (EVENT
EMITTERS, FINITE STATE MACHINES)

17. W W W. S P R E A K E R .C O M
Why we used stateful
components
• Sateless components are cool but sometimes you just
need trade purity for performance

18. W W W. S P R E A K E R .C O M
SystemJS + JSPM
Universal dynamic module loader - loads ES6 modules,
AMD, CommonJS and global scripts in the browser and
NodeJS. Works with both Traceur and Babel.
jspm is a package manager for the SystemJS universal
module loader, built on top of the dynamic ES6 module
loader

19. W W W. S P R E A K E R .C O M
SystemJS
• Unopinionated (not a client tool)
• Understands dependencies tree
• Dependencies versioning done right (can you hear
me npm?)
• Can do client side transpiling* (keep an eye on
performance here)
• Has an advanced bundler for production (transpiling,
minification, bundle arithmetic)

20. W W W. S P R E A K E R .C O M
JSPM
• jspm init
• jspm install
• jspm bundle
You can have ES6 ready environment ready in two
minutes*.
* Beware the automagic beast… could bite you :)
https://www.youtube.com/watch?v=NpMnRifyGyw

21. W W W. S P R E A K E R .C O M
back to electron…you can use your
loved chrome dev tools

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

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

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

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

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

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

28. W W W. S P R E A K E R .C O M
native 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

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

30. W W W. S P R E A K E R .C O M
keep in mind something about
desktop apps…
Given: 2 operating systems
And: 10 os versions to support
And: a lot of different hardware
And: a lot of USB devices someone can plug
And: ∞ trash software common user can install
Then: YOUR APP WILL ALWAYS FAIL

31. W W W. S P R E A K E R .C O M
…act accordingly
• gather all data you can on the host pc
• log on filesystem (log4js, Dispatcher)
• set up a server side issue reporting API
• dont’t assume anything about application state when
something goes terribly wrong
• monitor (universal analytics to the rescue)

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

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

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

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

36. W W W. S P R E A K E R .C O M
but…
• It worked for us
• Makes desktop development fun
• Makes desktop development fast.

37. W W W. S P R E A K E R .C O M
It worked for us
• 22k downloads in 16 days
• now 800 downloads per day
• 25k sessions (mean time 1h 30m)
• 11 releases delivered via autoupdate
(1.0.0 => 1.0.11)

38. Thanks!
I broadcasted this talk to my colleagues
using the product we built :)

39. W W W. S P R E A K E R .C O M
One more thing…
https://www.spreaker.com/jobs