senchacon 2016: advanced techniques for buidling ext js apps with electron - jason cline
TRANSCRIPT
![Page 1: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/1.jpg)
Advanced Techniques forBuilding Ext JS Apps
with ElectronJason Cline
@clinejm
![Page 2: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/2.jpg)
Build ‘native’ desktop applications with Web technology
What is Electron?
![Page 3: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/3.jpg)
What is Electron?
Chrome NodeJS
![Page 4: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/4.jpg)
Sencha Uses ElectronArchitec
t Themer InspectorTest Studio
![Page 5: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/5.jpg)
Who uses Electron?
![Page 6: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/6.jpg)
Control the runtime
Why Electron?
![Page 7: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/7.jpg)
Desktop integration
Why Electron?
![Page 8: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/8.jpg)
Local access to NodeJS for real work
Why Electron?
![Page 9: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/9.jpg)
ElectronSupported 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!
![Page 10: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/10.jpg)
ElectronBuild 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.
![Page 11: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/11.jpg)
Render
Electron Processes
Main
./main.js ./app.jsnew BrowserWindow()
process.type: 'browser' 'render'
System UIHeavy Lifting
Presentation(DOM)
![Page 12: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/12.jpg)
ElectronOrganization• 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
![Page 13: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/13.jpg)
Inter-process Communication (IPC)
![Page 14: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/14.jpg)
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/...
![Page 15: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/15.jpg)
Native GUI Integration
![Page 16: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/16.jpg)
Native GUI Integration
Electron provides access to many native elements such as:
• File Pickers
• Folder Pickers
• Tray Icons
• Notifications / “Balloons”
![Page 17: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/17.jpg)
tbar: [{ xtype: 'electronfilefield', options: { filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] },{ name: 'All Files', extensions: ['*'] }] }, bind: '{filename}', listeners: { change: 'onFileChange' } }]
electronfilefield
• Replacement for filefield
• Uses Electron’s dialog module
• Supports data-binding
![Page 18: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/18.jpg)
Native Menus
![Page 19: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/19.jpg)
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
![Page 20: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/20.jpg)
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
![Page 21: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/21.jpg)
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' }, {
...
![Page 22: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/22.jpg)
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:
![Page 23: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/23.jpg)
Fit and Finish
![Page 24: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/24.jpg)
const Path = require('path');
const COMPANY = 'Acme';const COMPANY_LOWER = COMPANY.toLowerCase();
const profileDir = (function () { var ret = os.homedir();
switch (os.platform()) { case 'win32': return Path.join(process.env.APPDATA, `${COMPANY}`);
case 'darwin': return Path.join(ret, `Library/Application Support/${COMPANY}`);
case 'linux': return Path.join(ret, `.local/share/data/${COMPANY_LOWER}`); }
return Path.join(ret, `.${COMPANY_LOWER}`);})();
Respecting Native Conventions
• User file locations vary by platform:- Windows• C:\Users\Jason\AppData\Roaming\Acme\
- Mac OS X• /Users/Jason/Library/Application Support/Acme/
- Linux (may vary by distro)• /home/jason/.local/share/data/acme/
- When in doubt:• /home/jason/.acme/
![Page 25: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/25.jpg)
win = new BrowserWindow({ width: initData.width || 1200, height: initData.height || 900, x: initData.x, y: initData.y, maximized: initData.maximized});
win.on('move', trackWindow);win.on('resize', trackWindow);
function trackWindow () { if (win.isMaximized()) { ... } else { windowBox = win.getBounds(); }
if (!syncTimer) { syncTimer = setTimeout(saveWindowState, 500); }}
Tracking The BrowserWindow
• Create the BrowserWindow using saved size information (no flicker)
• Track move and resize events at the level of the BrowserWindow.
• Buffer changes (they fire quickly)
![Page 26: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/26.jpg)
Downside?
![Page 27: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/27.jpg)
Enterprise Distribution
Challenges
![Page 28: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/28.jpg)
Code Signing
Challenges
![Page 29: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/29.jpg)
Create an Installer
Challenges
![Page 30: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/30.jpg)
How to Update?
Challenges
![Page 31: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/31.jpg)
User Adoption
Challenges
![Page 32: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/32.jpg)
Code Security
Challenges
![Page 33: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/33.jpg)
Build ‘native’ desktop applications with Web technology
Summary
![Page 34: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/34.jpg)
Questions?
![Page 35: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/35.jpg)
github.com/sencha/electron-demo
![Page 36: SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - Jason Cline](https://reader035.vdocument.in/reader035/viewer/2022070518/58ec47fb1a28ab35628b46c9/html5/thumbnails/36.jpg)