Building Desktop Applications With JavaScript And Electron

Electron is a Javascript runtime environment based on Node.js and chromuim which enables developers to build Desktop applications with web technolgoies i.e Javascript,CSS and HTML

Electron is a web application runtime built on Node.js and the open source Google project Chromuim,which brings web technoglogies to the Desktop allowing developers to build Desktop applications for major operating systems such as Windows,MAC and Linux ,using JavaScript ,HTML and CSS.

Lets clear some confusion about Electron so what Electron is and what it is not ?

What Electron is ?

It is a JavaScript runtime for building desktop applications It is a runtime which provides a native Cross OS API It is Node.js but in the Desktop It is a chromium browser What Electron is not ?

It is not a JavaScript binding to GUI libraries of Popular OS such MAC,WIndows and Linux It is not a JavaScript framework Electron makes use of web technologies such as CSS and HTML to create GUI interfaces and its cross operating system runtime api to access os functionality

Electron is a relatively young project created by GitHub to build its Atom Editor ,previously was known as Atom Shell .It is free and open source ,it's being used by big companies such as Microsoft to build its visual studio IDE and Facebook to build its editor nuclide .

How to install Electron ?

electron-prebuilt is an npm module that lets you install prebuilt electron binaries from the command line

npm install -g electron-prebuilt How to create your first Electron app

Create an electron application inside a folder for example myApp

Now on your command line just type :

electron myApp/ electron-packager - package and distribute your electron app in OS executables (.app, .exe etc) electron-builder - create installers for Windows and OS X. It's built to work together with electron-packager menubar - high level way to create menubar desktop applications with electron

Starting with version 0.36 electron can capture desktop screen using desktopCapturer module

// In the renderer process. var desktopCapturer = require('electron').desktopCapturer;

desktopCapturer.getSources({types: ['window', 'screen']}, function(error, sources) { if (error) throw error; for (var i = 0; i < sources.length; ++i) { if (sources[i].name == "Electron") { navigator.webkitGetUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: sources[i].id, minWidth: 1280, maxWidth: 1280, minHeight: 720, maxHeight: 720 } } }, gotStream, getUserMediaError); return; } } });

function gotStream(stream) { document.querySelector('video').src = URL.createObjectURL(stream); }

function getUserMediaError(e) { console.log('getUserMediaError'); } }

jQuery Problem with Electron

comments powered by Disqus