Post on 13-Feb-2017
© Copyright SELA Software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
SELA DEVELOPER PRACTICEJUNE 19-23, 2016
Nir NoyConsultant, Web, Sela@noynir
Bringing Javascript to the Desktop with Electron
Why Desktop?OfflineLocal hardware(printers, devices etc…)SecurityOn-premiseApp storeLocal AccessKioskIt Just ”Feels Right”
Desktop AppsDevelopment ToolsTasksMedia playersEmail clientCalendarTime managementMappingSocial media clientsFile management
Backup
Audio and Video ConferencingGaming
What is ElectronA framework for building cross platform Desktop Applications using web technologies
What is ElectronCreated by GitHub as the shell for the Atom text editor.
Road to Electron
Chromium Embedded Framework
NW.JS
What’s Under the Hood
+ =NodeJS Chromium
Cool StuffWeb Technologies – No Native Skills needed
Javascript, HTML, CSS only.One Browser
Chrome compatible onlyLatest Features – ES 2015 & Chrome goodies.
Built-In NodeJSAll Node Capabilities - File system, networking etc..npm ecosystem
Cross platformPackaging for Windows, OS X, Linux
Native UXNative Dialogs, Menus, Notifications etc…
Uncool StuffWeb Technologies
Seriously it’s Javascript, HTML and CSS all the way.Native Modules
Native Modules are written in C/C++ .Debugging
Certain parts of the application are hard to debug.Tooling
Some of the tooling is immature.
How Does it Work?
A Tale Of Two processes
A Tale Of Two processes
Main Application lifecycle
Browser window ipc
Node.js menu dialog
Renderer Web page
ipc webFrame
Node.jsDOM remote
Creates
A Tale Of Two processes
Main Application lifecycle
Browser window ipc
Node.js menu dialog
Renderer Web page
ipc webFrame
Node.jsDOM remote
Creates
A Tale Of Two processes
Main Application lifecycle
Renderer Web page
Renderer Web page
Renderer Background Worker
Getting StartedHello Electron App
Getting StartedCreate a main.js file
...app.on('ready',() => {
mainWindow=new BrowserWindow({width:800, height:600}); mainWindow.loadURL('file://'+ __dirname +'/index.html'); mainWindow.on('closed',function(){
mainWindow=null; });
});app.on('window-all-closed',() => {
if (process.platform != 'darwin') { app.quit(); }});
Getting StartedCreate an index.html file
...<body> <h1>Hello Electron!</h1> We are using node <script> var dv=document.createElement('div'); dv.innerHTML=`We are using node ${process.versions.node}
<br/>Chrome ${process.versions.chrome}<br/> Electron ${process.versions.electron}`; document.body.appendChild(dv); </script>
</body>...
Project SetupCreate a Package.json file
{"name" : "your-app", "version" : "0.1.0", "main" : "main.js"
}
Running Your AppInstall Electron prebuilt binaries using npm.
$ npm install electron-prebuilt --save-dev // -g
Run your app with the Electron Command$ electron your-app/
Demo
Hello Electron
Processes CommunicationThe Main and Renderer Processes can communicate using their ipc modules.Each type of processes has it’s own ipc module.In the Renderer process use the ipcRenderer module to send and listen to messages
const ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('asynchronous-reply', function(event, arg) {
console.log(arg); // prints "pong"
});
ipcRenderer.send('asynchronous-message', 'ping');
Processes CommunicationIn the Main process use the ipcMain module to listen and reply to messages.
const ipcMain = require('electron').ipcMain;
ipcMain.on('asynchronous-message', function(event, arg)
{ console.log(arg); // prints "ping"
event.sender.send('asynchronous-reply', 'pong');
});
Processes CommunicationThe remote module provides a simple way to do inter-process communication (IPC) between the renderer process (web page) and the main process.
It allow method invocation 0f main process objects without explicitly using the ipc modules.
const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;
var win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('https://github.com');
Demo
Advanced Demo
Packaging and Distributing Install Electron packager using npm.
$ npm install electron-packager --save-dev / -g
Run your app with the Electron Command$ electron-packager app-name --platform=win32 --arch=x64
Built With ElectronVisual Studio Code
Atom
SlackWhat’s App
Electron ToolsElectron API Demos app
Electron App for interactively exploring the Electron API.Devtron
Electron Extension for Chrome’s Devtools.Allow inspection and monitoring of your app.
SpectronFramework for writing integrations tests.Built on top of ChromeDriver and WebDriverIO.
Community Electron Tools & Resourceselectron-builder - Create installers.electron-boilerplate generator-electron - yeoman generator
Awesome electronhttps://github.com/sindresorhus/awesome-electron
Questions
Thank youNir Noy | @noynir | nirn@sela.co.il
https://github.com/noynir/ElectronExamples