electron. build cross platform desktop apps with web technologies!
Post on 08-Jan-2017
477 Views
Preview:
TRANSCRIPT
Electron is a framework for creating native applications with web
technologies like JavaScript, HTML and CSS.
What is Electron?
Electron History
● Created GitHub (2013)
● Formally Atom Shell
● Open sourced (May 2014)
● Electron v1.0.0 (May 9th 2016)
Main Process
Main process responsible for the integration and interaction with GUI
operating system, for creating web pages.
Renderer Process
Each web page in Electron runs in its own process, which is called renderer
process.
Application Packaging
• electron-packager
• electron-builder
• grunt-electron-builder
• gulp-electron
// command line
# electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
App
Methods
• app.quit()
• app.getAppPath()
• app.getVersion()
• app.setName(name)
• app.addRecentDocument(path)
• app.setUserTasks(tasks)
• app.dock.setMenu(menu)
• …
Main Process
BrowserWindow
Options
• width
• height
• resizable
• movable
• minimizable
• maximizable
• closable
• show
Main Process
• skipTaskbar
• kiosk
• title
• icon
• frame
• autoHideMenuBar
• webPreferences
• …
BrowserWindow
Events:
• close
• closed
• responsive
• hide
• show
• move
• focus
• blur
Main Process
• enter-full-screen
• leave-full-screen
• minimize
• swipe
• …
BrowserWindow
BrowserWindow instance properties:
• win.webContents - render and control web pages.
• win.id
Main Process
BrowserWindow
BrowserWindow instance methods:
• win.close()
• win.focus()
• win.blur()
• win.isFocused()
• win.show()
• win.hide()
• win.isVisible()
• win.setMenu(menu)
Main Process
• win.flashFrame(flag)
• win.setKiosk(flag)
• win.isKiosk()
• win.loadURL(url[, options])
• win.setThumbarButtons(buttons)
• win.setAutoHideMenuBar(hide)
• win.setIgnoreMouseEvents(ignore)
• ....
Communication between processes
Electron has several ways to communicate between the main process and renderer processes. Like
ipcRenderer and ipcMain modules for sending messages, and the remote module for RPC style
communication.
• ipcRenderer - renderer process
• ipcMain - main process
• remote - renderer process
autoUpdater
Requires:
• HTTP server API
• code-sign
• installer (for Windows)
Server Response:
Main Process
autoUpdater
Events:
• error
• checking-for-update
• update-available
• update-not-available
• update-downloaded
Main Process
Methods:
• autoUpdater.setFeedURL(url)
• autoUpdater.checkForUpdates()
• autoUpdater.quitAndInstall()
Electron API
• Accelerator
• Global Shortcut
• Dialog
• Menu
• Tray
• Desktop Capturer
• Shell
More on http://electron.atom.io/docs
Native Node Modules
# npm install --save-dev electron-rebuild
// every time after install native module
# ./node_modules/.bin/electron-rebuild
Debuging Electron App
• Electron includes default Chrome DevTools Extension.
• Add DevTools Extension
• Debug main process (--debug=[port]; --debug-brk=[port])
• Devtron (IPC monitor; Event inspector; App Linter; Require graph)
Testing Electron App
Spectron – Electron Testing Framework built on ChromeDriver and WebDriverIO
• Full list Chromium and Electron APIs
• Interact with and verify the behavior of multiple windows from a single test.
• Can be used with any testing library like Mocha, Jasmine, AVA, Chai
Electron vs nw.js
• Entry of Application: js vs html
• Build System: libchromiumcontent vs Chromium
• Node Integration: node_bindings vs patching Chromium
• Context: Multi-context vs Single-context
http://tangiblejs.com/posts/nw-js-and-electron-compared-2016-edition
top related