SlideShare a Scribd company logo
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
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 30 minutes nap is a good idea.
• You want to build a “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
“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
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
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
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
this is very interesting given the state
of modern frontend tools
W W W. S P R E A K E R .C O M
…you can debug with chromium
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
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 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
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 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 :)

More Related Content

What's hot

Cross-Platform Desktop Apps with Electron (Condensed Version)
Cross-Platform Desktop Apps with Electron (Condensed Version)Cross-Platform Desktop Apps with Electron (Condensed Version)
Cross-Platform Desktop Apps with Electron (Condensed Version)
David Neal
 
Building Native Experiences with Electron
Building Native Experiences with ElectronBuilding Native Experiences with Electron
Building Native Experiences with Electron
Ben Gotow
 
Get that Corner Office with Angular 2 and Electron
Get that Corner Office with Angular 2 and ElectronGet that Corner Office with Angular 2 and Electron
Get that Corner Office with Angular 2 and Electron
Lukas Ruebbelke
 
Cross-Platform Desktop Apps with Electron (JSConf UY)
Cross-Platform Desktop Apps with Electron (JSConf UY)Cross-Platform Desktop Apps with Electron (JSConf UY)
Cross-Platform Desktop Apps with Electron (JSConf UY)
David Neal
 
Electron - Build desktop apps using javascript
Electron - Build desktop apps using javascriptElectron - Build desktop apps using javascript
Electron - Build desktop apps using javascript
Austin Ogilvie
 
Building desktop applications with web technologies - ELECTRON the easy way
Building desktop applications with web technologies - ELECTRON the easy wayBuilding desktop applications with web technologies - ELECTRON the easy way
Building desktop applications with web technologies - ELECTRON the easy way
stefanjudis
 
Building Cross Platform Apps with Electron
Building Cross Platform Apps with ElectronBuilding Cross Platform Apps with Electron
Building Cross Platform Apps with Electron
Chris Ward
 
Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)
Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)
Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)
Eddie Lau
 
Electron
ElectronElectron
Electron
Jens Siebert
 
Develop Desktop Apps with Electron
Develop Desktop Apps with ElectronDevelop Desktop Apps with Electron
Develop Desktop Apps with Electron
Eueung Mulyana
 
.NET no Browser - Webassembly com Blazor!
.NET no Browser - Webassembly com Blazor!.NET no Browser - Webassembly com Blazor!
.NET no Browser - Webassembly com Blazor!
Rodrigo Kono
 
Drupal RPG - A Backend Server Story
Drupal RPG - A Backend Server StoryDrupal RPG - A Backend Server Story
Drupal RPG - A Backend Server Story
Eladio Jose Abquina
 
ProtoPie with Electron
ProtoPie with ElectronProtoPie with Electron
ProtoPie with Electron
Scotty Kim
 
electron for emberists
electron for emberistselectron for emberists
electron for emberists
Aidan Nulman
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
Paul Jensen
 
Ten years later
Ten years laterTen years later
Ten years later
Cristian Vat
 
From Web to Mobile with Stage 3D
From Web to Mobile with Stage 3DFrom Web to Mobile with Stage 3D
From Web to Mobile with Stage 3D
Jean-Philippe Doiron
 
Debugging IE Performance Issues with xperf, ETW and NavigationTiming
Debugging IE Performance Issues with xperf, ETW and NavigationTimingDebugging IE Performance Issues with xperf, ETW and NavigationTiming
Debugging IE Performance Issues with xperf, ETW and NavigationTimingNicholas Jansma
 
Testing your Single Page Application
Testing your Single Page ApplicationTesting your Single Page Application
Testing your Single Page Application
Wekoslav Stefanovski
 

What's hot (20)

Cross-Platform Desktop Apps with Electron (Condensed Version)
Cross-Platform Desktop Apps with Electron (Condensed Version)Cross-Platform Desktop Apps with Electron (Condensed Version)
Cross-Platform Desktop Apps with Electron (Condensed Version)
 
Building Native Experiences with Electron
Building Native Experiences with ElectronBuilding Native Experiences with Electron
Building Native Experiences with Electron
 
Get that Corner Office with Angular 2 and Electron
Get that Corner Office with Angular 2 and ElectronGet that Corner Office with Angular 2 and Electron
Get that Corner Office with Angular 2 and Electron
 
Cross-Platform Desktop Apps with Electron (JSConf UY)
Cross-Platform Desktop Apps with Electron (JSConf UY)Cross-Platform Desktop Apps with Electron (JSConf UY)
Cross-Platform Desktop Apps with Electron (JSConf UY)
 
Electron - Build desktop apps using javascript
Electron - Build desktop apps using javascriptElectron - Build desktop apps using javascript
Electron - Build desktop apps using javascript
 
Building desktop applications with web technologies - ELECTRON the easy way
Building desktop applications with web technologies - ELECTRON the easy wayBuilding desktop applications with web technologies - ELECTRON the easy way
Building desktop applications with web technologies - ELECTRON the easy way
 
Building Cross Platform Apps with Electron
Building Cross Platform Apps with ElectronBuilding Cross Platform Apps with Electron
Building Cross Platform Apps with Electron
 
Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)
Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)
Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)
 
Electron
ElectronElectron
Electron
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
Develop Desktop Apps with Electron
Develop Desktop Apps with ElectronDevelop Desktop Apps with Electron
Develop Desktop Apps with Electron
 
.NET no Browser - Webassembly com Blazor!
.NET no Browser - Webassembly com Blazor!.NET no Browser - Webassembly com Blazor!
.NET no Browser - Webassembly com Blazor!
 
Drupal RPG - A Backend Server Story
Drupal RPG - A Backend Server StoryDrupal RPG - A Backend Server Story
Drupal RPG - A Backend Server Story
 
ProtoPie with Electron
ProtoPie with ElectronProtoPie with Electron
ProtoPie with Electron
 
electron for emberists
electron for emberistselectron for emberists
electron for emberists
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
 
Ten years later
Ten years laterTen years later
Ten years later
 
From Web to Mobile with Stage 3D
From Web to Mobile with Stage 3DFrom Web to Mobile with Stage 3D
From Web to Mobile with Stage 3D
 
Debugging IE Performance Issues with xperf, ETW and NavigationTiming
Debugging IE Performance Issues with xperf, ETW and NavigationTimingDebugging IE Performance Issues with xperf, ETW and NavigationTiming
Debugging IE Performance Issues with xperf, ETW and NavigationTiming
 
Testing your Single Page Application
Testing your Single Page ApplicationTesting your Single Page Application
Testing your Single Page Application
 

Similar to Building a Desktop Streaming console with Node.js and WebKit

Everything-as-code. A polyglot adventure. #DevoxxPL
Everything-as-code. A polyglot adventure. #DevoxxPLEverything-as-code. A polyglot adventure. #DevoxxPL
Everything-as-code. A polyglot adventure. #DevoxxPL
Mario-Leander Reimer
 
Everything-as-code - A polyglot adventure
Everything-as-code - A polyglot adventureEverything-as-code - A polyglot adventure
Everything-as-code - A polyglot adventure
QAware GmbH
 
Docker for Development
Docker for DevelopmentDocker for Development
Docker for Development
allingeek
 
LXC to Docker Via Continuous Delivery
LXC to Docker Via Continuous DeliveryLXC to Docker Via Continuous Delivery
LXC to Docker Via Continuous DeliveryDocker, Inc.
 
Learn Electron for Web Developers
Learn Electron for Web DevelopersLearn Electron for Web Developers
Learn Electron for Web Developers
Kyle Cearley
 
A complete guide to Node.js
A complete guide to Node.jsA complete guide to Node.js
A complete guide to Node.js
Prabin Silwal
 
Node azure
Node azureNode azure
Node azure
Emanuele DelBono
 
Electron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easyElectron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easy
Ulrich Krause
 
Practical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.jsPractical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.js
async_io
 
Docker in development
Docker in developmentDocker in development
Docker in development
sethvoltz
 
차세대컴파일러, VM의미래: 애플 오픈소스 LLVM
차세대컴파일러, VM의미래: 애플 오픈소스 LLVM차세대컴파일러, VM의미래: 애플 오픈소스 LLVM
차세대컴파일러, VM의미래: 애플 오픈소스 LLVM
Jung Kim
 
WebAssemlby vs JavaScript
WebAssemlby vs JavaScriptWebAssemlby vs JavaScript
WebAssemlby vs JavaScript
Alexandr Skachkov
 
JavaScript : A trending scripting language
JavaScript : A trending scripting languageJavaScript : A trending scripting language
JavaScript : A trending scripting language
AbhayDhupar
 
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?CC-Castle; The best Real-Time/Embedded/HighTech language EVER?
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?
Albert Mietus
 
Developing Desktop Apps with Electron & Ember.js - FITC WebU2017
Developing Desktop Apps with Electron & Ember.js - FITC WebU2017Developing Desktop Apps with Electron & Ember.js - FITC WebU2017
Developing Desktop Apps with Electron & Ember.js - FITC WebU2017
Aidan Nulman
 
Nodejs Native Add-Ons from zero to hero
Nodejs Native Add-Ons from zero to heroNodejs Native Add-Ons from zero to hero
Nodejs Native Add-Ons from zero to hero
Nicola Del Gobbo
 
Настройка окружения для кросскомпиляции проектов на основе docker'a
Настройка окружения для кросскомпиляции проектов на основе docker'aНастройка окружения для кросскомпиляции проектов на основе docker'a
Настройка окружения для кросскомпиляции проектов на основе docker'a
corehard_by
 
Devoxx France: Développement JAVA avec un IDE dans le Cloud: Yes we can !
Devoxx France: Développement JAVA avec un IDE dans le Cloud: Yes we can !Devoxx France: Développement JAVA avec un IDE dans le Cloud: Yes we can !
Devoxx France: Développement JAVA avec un IDE dans le Cloud: Yes we can !
Florent BENOIT
 
Node.js Anti Patterns
Node.js Anti PatternsNode.js Anti Patterns
Node.js Anti Patterns
Ben Hall
 

Similar to Building a Desktop Streaming console with Node.js and WebKit (20)

Everything-as-code. A polyglot adventure. #DevoxxPL
Everything-as-code. A polyglot adventure. #DevoxxPLEverything-as-code. A polyglot adventure. #DevoxxPL
Everything-as-code. A polyglot adventure. #DevoxxPL
 
Everything-as-code - A polyglot adventure
Everything-as-code - A polyglot adventureEverything-as-code - A polyglot adventure
Everything-as-code - A polyglot adventure
 
Docker for Development
Docker for DevelopmentDocker for Development
Docker for Development
 
LXC to Docker Via Continuous Delivery
LXC to Docker Via Continuous DeliveryLXC to Docker Via Continuous Delivery
LXC to Docker Via Continuous Delivery
 
Learn Electron for Web Developers
Learn Electron for Web DevelopersLearn Electron for Web Developers
Learn Electron for Web Developers
 
A complete guide to Node.js
A complete guide to Node.jsA complete guide to Node.js
A complete guide to Node.js
 
Node azure
Node azureNode azure
Node azure
 
Electron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easyElectron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easy
 
Practical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.jsPractical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.js
 
Docker in development
Docker in developmentDocker in development
Docker in development
 
Wider than rails
Wider than railsWider than rails
Wider than rails
 
차세대컴파일러, VM의미래: 애플 오픈소스 LLVM
차세대컴파일러, VM의미래: 애플 오픈소스 LLVM차세대컴파일러, VM의미래: 애플 오픈소스 LLVM
차세대컴파일러, VM의미래: 애플 오픈소스 LLVM
 
WebAssemlby vs JavaScript
WebAssemlby vs JavaScriptWebAssemlby vs JavaScript
WebAssemlby vs JavaScript
 
JavaScript : A trending scripting language
JavaScript : A trending scripting languageJavaScript : A trending scripting language
JavaScript : A trending scripting language
 
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?CC-Castle; The best Real-Time/Embedded/HighTech language EVER?
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?
 
Developing Desktop Apps with Electron & Ember.js - FITC WebU2017
Developing Desktop Apps with Electron & Ember.js - FITC WebU2017Developing Desktop Apps with Electron & Ember.js - FITC WebU2017
Developing Desktop Apps with Electron & Ember.js - FITC WebU2017
 
Nodejs Native Add-Ons from zero to hero
Nodejs Native Add-Ons from zero to heroNodejs Native Add-Ons from zero to hero
Nodejs Native Add-Ons from zero to hero
 
Настройка окружения для кросскомпиляции проектов на основе docker'a
Настройка окружения для кросскомпиляции проектов на основе docker'aНастройка окружения для кросскомпиляции проектов на основе docker'a
Настройка окружения для кросскомпиляции проектов на основе docker'a
 
Devoxx France: Développement JAVA avec un IDE dans le Cloud: Yes we can !
Devoxx France: Développement JAVA avec un IDE dans le Cloud: Yes we can !Devoxx France: Développement JAVA avec un IDE dans le Cloud: Yes we can !
Devoxx France: Développement JAVA avec un IDE dans le Cloud: Yes we can !
 
Node.js Anti Patterns
Node.js Anti PatternsNode.js Anti Patterns
Node.js Anti Patterns
 

More from Emanuele Rampichini

What is quality? Why should i care?
What is quality? Why should i care? What is quality? Why should i care?
What is quality? Why should i care?
Emanuele Rampichini
 
I segreti di una campagna di crowdfunding civico di successo
I segreti di una campagna di crowdfunding civico di successoI segreti di una campagna di crowdfunding civico di successo
I segreti di una campagna di crowdfunding civico di successo
Emanuele Rampichini
 
Lavorare con tecnologie "Cool" senza rinunciare all'accessibilità
Lavorare con tecnologie "Cool" senza rinunciare all'accessibilitàLavorare con tecnologie "Cool" senza rinunciare all'accessibilità
Lavorare con tecnologie "Cool" senza rinunciare all'accessibilità
Emanuele Rampichini
 
How to push a react js application in production and sleep better
How to push a react js application in production and sleep betterHow to push a react js application in production and sleep better
How to push a react js application in production and sleep better
Emanuele Rampichini
 
Speed up your Titanium app development with automated tests - TiConf EU 2014
Speed up your Titanium app development with automated tests - TiConf EU 2014Speed up your Titanium app development with automated tests - TiConf EU 2014
Speed up your Titanium app development with automated tests - TiConf EU 2014
Emanuele Rampichini
 
AngularDevConf - Tools and testing
AngularDevConf - Tools and testingAngularDevConf - Tools and testing
AngularDevConf - Tools and testing
Emanuele Rampichini
 
Coderetreat 2013 @cowo42 (Osimo - AN)
Coderetreat 2013 @cowo42 (Osimo - AN)Coderetreat 2013 @cowo42 (Osimo - AN)
Coderetreat 2013 @cowo42 (Osimo - AN)Emanuele Rampichini
 

More from Emanuele Rampichini (7)

What is quality? Why should i care?
What is quality? Why should i care? What is quality? Why should i care?
What is quality? Why should i care?
 
I segreti di una campagna di crowdfunding civico di successo
I segreti di una campagna di crowdfunding civico di successoI segreti di una campagna di crowdfunding civico di successo
I segreti di una campagna di crowdfunding civico di successo
 
Lavorare con tecnologie "Cool" senza rinunciare all'accessibilità
Lavorare con tecnologie "Cool" senza rinunciare all'accessibilitàLavorare con tecnologie "Cool" senza rinunciare all'accessibilità
Lavorare con tecnologie "Cool" senza rinunciare all'accessibilità
 
How to push a react js application in production and sleep better
How to push a react js application in production and sleep betterHow to push a react js application in production and sleep better
How to push a react js application in production and sleep better
 
Speed up your Titanium app development with automated tests - TiConf EU 2014
Speed up your Titanium app development with automated tests - TiConf EU 2014Speed up your Titanium app development with automated tests - TiConf EU 2014
Speed up your Titanium app development with automated tests - TiConf EU 2014
 
AngularDevConf - Tools and testing
AngularDevConf - Tools and testingAngularDevConf - Tools and testing
AngularDevConf - Tools and testing
 
Coderetreat 2013 @cowo42 (Osimo - AN)
Coderetreat 2013 @cowo42 (Osimo - AN)Coderetreat 2013 @cowo42 (Osimo - AN)
Coderetreat 2013 @cowo42 (Osimo - AN)
 

Recently uploaded

H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
H.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdfH.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdf
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
MLILAB
 
Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024
Massimo Talia
 
weather web application report.pdf
weather web application report.pdfweather web application report.pdf
weather web application report.pdf
Pratik Pawar
 
Event Management System Vb Net Project Report.pdf
Event Management System Vb Net  Project Report.pdfEvent Management System Vb Net  Project Report.pdf
Event Management System Vb Net Project Report.pdf
Kamal Acharya
 
HYDROPOWER - Hydroelectric power generation
HYDROPOWER - Hydroelectric power generationHYDROPOWER - Hydroelectric power generation
HYDROPOWER - Hydroelectric power generation
Robbie Edward Sayers
 
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
obonagu
 
Automobile Management System Project Report.pdf
Automobile Management System Project Report.pdfAutomobile Management System Project Report.pdf
Automobile Management System Project Report.pdf
Kamal Acharya
 
Gen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdfGen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdf
gdsczhcet
 
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptxCFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
R&R Consult
 
Standard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - NeometrixStandard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - Neometrix
Neometrix_Engineering_Pvt_Ltd
 
MCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdfMCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdf
Osamah Alsalih
 
ethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.pptethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.ppt
Jayaprasanna4
 
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL   GENERAL FAMILIARIZATION COURSETECHNICAL TRAINING MANUAL   GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
DuvanRamosGarzon1
 
ASME IX(9) 2007 Full Version .pdf
ASME IX(9)  2007 Full Version       .pdfASME IX(9)  2007 Full Version       .pdf
ASME IX(9) 2007 Full Version .pdf
AhmedHussein950959
 
COLLEGE BUS MANAGEMENT SYSTEM PROJECT REPORT.pdf
COLLEGE BUS MANAGEMENT SYSTEM PROJECT REPORT.pdfCOLLEGE BUS MANAGEMENT SYSTEM PROJECT REPORT.pdf
COLLEGE BUS MANAGEMENT SYSTEM PROJECT REPORT.pdf
Kamal Acharya
 
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdfHybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
fxintegritypublishin
 
Cosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdfCosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdf
Kamal Acharya
 
CME397 Surface Engineering- Professional Elective
CME397 Surface Engineering- Professional ElectiveCME397 Surface Engineering- Professional Elective
CME397 Surface Engineering- Professional Elective
karthi keyan
 
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
bakpo1
 
Immunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary AttacksImmunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary Attacks
gerogepatton
 

Recently uploaded (20)

H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
H.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdfH.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdf
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
 
Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024
 
weather web application report.pdf
weather web application report.pdfweather web application report.pdf
weather web application report.pdf
 
Event Management System Vb Net Project Report.pdf
Event Management System Vb Net  Project Report.pdfEvent Management System Vb Net  Project Report.pdf
Event Management System Vb Net Project Report.pdf
 
HYDROPOWER - Hydroelectric power generation
HYDROPOWER - Hydroelectric power generationHYDROPOWER - Hydroelectric power generation
HYDROPOWER - Hydroelectric power generation
 
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
 
Automobile Management System Project Report.pdf
Automobile Management System Project Report.pdfAutomobile Management System Project Report.pdf
Automobile Management System Project Report.pdf
 
Gen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdfGen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdf
 
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptxCFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
 
Standard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - NeometrixStandard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - Neometrix
 
MCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdfMCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdf
 
ethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.pptethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.ppt
 
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL   GENERAL FAMILIARIZATION COURSETECHNICAL TRAINING MANUAL   GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
 
ASME IX(9) 2007 Full Version .pdf
ASME IX(9)  2007 Full Version       .pdfASME IX(9)  2007 Full Version       .pdf
ASME IX(9) 2007 Full Version .pdf
 
COLLEGE BUS MANAGEMENT SYSTEM PROJECT REPORT.pdf
COLLEGE BUS MANAGEMENT SYSTEM PROJECT REPORT.pdfCOLLEGE BUS MANAGEMENT SYSTEM PROJECT REPORT.pdf
COLLEGE BUS MANAGEMENT SYSTEM PROJECT REPORT.pdf
 
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdfHybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
 
Cosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdfCosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdf
 
CME397 Surface Engineering- Professional Elective
CME397 Surface Engineering- Professional ElectiveCME397 Surface Engineering- Professional Elective
CME397 Surface Engineering- Professional Elective
 
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
 
Immunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary AttacksImmunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary Attacks
 

Building a Desktop Streaming console with Node.js and WebKit

  • 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 :)