By combining the cores of Chrome and Node.js, Electron opens the escape hatch on the itty-bitty living space of the web browser and gives your Ext JS application many of the phenomenal cosmic powers of native applications. In this session, you'll learn some of the key techniques Sencha has used to build native desktop applications, based on Electron.
9. Electron
Supported Platforms
• Applications can run on
- Windows (32 or 64)
- Mac OS X
- Linux (x86, x86_64, and armv7l)
• Applications can be built on:
- Windows (32 or 64)
- Mac OS X
- Linux (x86 or x86_64)
Don’t forget to sign your binaries!
10. Electron
Build Process
• Builds use the electron-packager Node.js package.
• Uses npm scripts instead of gulp or grunt.
- Simplicity is good… can always switch over if needs require.
• The electron-packager wraps the compiled Ext JS application as produced by
Sencha Cmd.
• Application code will be stored in an “asar” file.
- See http://electron.atom.io/docs/tutorial/application-packaging/
- Just for convenience, not as a secure storage mechanism.
12. Electron
Organization
• Render process is almost a normal web app
- Entry point is “app.js” in root folder
- Other code is in “./app” folder
• Main process logic is just Node.js code
- Entry point is “main.js” in root folder
- Other code is in “./main” folder
14. var remote = require('electron').remote;
var service = remote.require('./main/service');
var v = service.heavyWork(42, result => {
console.log(`Work is done: ${result}`);
});
console.log(`Initial work value: ${v}`);
// log:
// > Initial work value: 21
// > Work is done: 427
Use remote To Off-load Work
• Push heavy workloads to the main
process.
• Initial result is synchronously
returned!
• Callbacks can be used to return data
asynchronously as well.
• Very convenient compared to raw IPC
methods.
module.exports = {
heavyWork (value, done) {
setTimeout(() => {
done(value * 10 + 7);
}, 2500);
return v / 2;
}
};
./main/service.js
./app/...
19. Native Menus
Electron provides native menu access, but…
• Menu creation is easiest with a template
• Templates have no conditional pieces
• API’s to maintain menu state (checked, visible, enabled) are rather new
• Editing menus after creation is difficult
20. mixins: [
'Ext.electron.menu.Manager'
],
nativeMenus: {
app: [{
label: 'File',
submenu: [{
label: 'Reopen',
submenu: 'getReopenMenu'
}, {
label: 'Exit',
accelerator: 'CmdOrCtrl+Q',
click: 'onExit'
}]
},
...
Ext.electron.menu.Manager
• Declarative, dynamic menus
• Menu and menu item properties can
be specified via:
- Value
- Inline function
- Named controller method
• Click handlers can be:
- Inline function
- Named controller method
21. getReopenMenu () {
var vm = this.getViewModel();
return this.recentFiles.map(file => {
return {
label: file,
click () {
vm.set('filename', file);
}
};
});
}
./app/…/MainController.js
Ext.electron.menu.Manager
• Submenus can be built in code
nativeMenus: {
app: [{
label: 'File',
submenu: [{
label: 'Reopen',
submenu: 'getReopenMenu'
}, {
...
22. onFileChange (picker, path) {
var recentFiles = this.recentFiles;
let i = recentFiles.indexOf(path);
if (i > -1) {
recentFiles.splice(i, 1);
}
recentFiles.push(path);
if (recentFiles.length > 3) {
recentFiles.shift();
}
this.getView().reloadNativeMenu('app');
}
Ext.electron.menu.Manager
• Call reload method when state
changes to update the menu: