Intro to Electron
Native Desktop Apps
Built with Web Technologies
What is Electron?
- Open source project from GitHub
- Formerly named "Atom Shell"
- Originally built as native shell for Atom editor
- forked from NodeWebKit (now NW.js)
- Build cross-platform, desktop apps using HTML, CSS, and JavaScript
- Mixes Chromium and NodeJS into a common application framework
Upsides of using Electron
- Built on latest V8
- ES2015 goodness
- transpilers be like, what?
- Seamlessly use NodeJS modules in web UI
- access to local machine resources like file system, spawn local processes, etc.
- module loaders be like, what?
- Access native platform services
- Cross-platform (mostly) APIs
- e.g. menus, tray, window chrome
- Auto-updater (OSX & Windows)
Writing for multiple browsers is frustrating...
With Electron
You are only writing for
1
modern browser!!!!
Downsides of Electron
- Each BrowserWindow is a new Chrome process
- high memory/cpu use
- Cross-platform isn't entirely "free"
- Creating really "native looking" apps is not easy
- No standard CSS library for each platform
- Mac OSX look - Photon (seems to have died)
- Mixed behavior of some native APIs (e.g. tray)
- Liberal use of "if/else" for platform-specific handling
Electron Architecture
- Multi-process
- "main" process
- controls application and (in general) "talks" to native OS services
- launches "renderer" process(es)
- an electron application minimally requires just a main process js file & package.json
- "renderer" process
- renders web page
- like a tab in desktop Chrome
Electron Architecture (cont.)
- Electron modules provide access to various native and web services via API
- main process - tray, dialog, menu, DownloadItem
- renderer - webFrame, desktopCapturer, file
- both - clipboard, shell, screen, environment vars
- main and renderer process communicate via IPC protocol
- ipcMain & ipcRenderer modules are used
- messages are sent async or sync
- example - fileOpenDialog is used in main process
- gets message to launch dialog
- passes file list back to renderer when complete
Electron Examples
GitKraken - graphical git client
Electron Examples
Brave - ad-blocking web browser
Electron Examples
Nyals N1 - email client
Electron Examples
Kitematic - Docker container management
The Demo
- NPM package.json explorer
- easier to visualize specific properties of the NPM package
- property-specific "editors" assist in maintenance
- better visibility to dependency changes/updates
disclaimer: It's NOT done, yet ;)
- Show key features of Electron
- ES2015 used throughout with no Babel
- NodeJS modules used in UI with no browserify/webpack
- Read/write local file system
- Uses native platform features like tray and dialog
Resources and Links
- The demo repo
- The ubiquitous "awesome" repo
- Packaging and deployment "must have" - electron-builder
- The Electron website, quick start, and API test app
Intro to Electron
By Andrew MacKenzie
Intro to Electron
A quick intro to Electron for the Ottawa JS Meetup Aug 2016
