building a desktop streaming console with electron and reactjs
TRANSCRIPT
Building a Desktop Streaming console with
Electron and ReactJS
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
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
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
W W W. S P R E A K E R .C O M
How much “Real World”™
W W W. S P R E A K E R .C O M
How much “Real World”™
W W W. S P R E A K E R .C O M
How much “Real World”™
W W W. S P R E A K E R .C O M
How much “Real World”™
W W W. S P R E A K E R .C O M
How much “Real World”™
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?
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
W W W. S P R E A K E R .C O M
package.json main_process
renderer_process
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
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…)
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
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)
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
W W W. S P R E A K E R .C O M
SystemJS + JSPMUniversal 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
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)
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
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
W W W. S P R E A K E R .C O M
…you can leverage desktop integration
• Menu • Notifications • Shortcuts • Multiple displays • …
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
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/
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
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
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
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
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
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
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)
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
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)
W W W. S P R E A K E R .C O M
all these things makes me very happy!
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
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.
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)
Thanks!I broadcasted this talk to my colleagues
using the product we built :)
W W W. S P R E A K E R .C O M
One more thing…
https://www.spreaker.com/jobs