Live deck with pertinent links:
Electron
Native apps with web technologies
Brian Capouch
Main Electron website
Plan of attack
- Overview: what Electron is and what it does
- A look at some Electron apps in the wild
- Two coding examples
1. About Electron
What is Electron?
- A runtime for desktop applications
- Combines Chromium and Node.js
- V8 engine shared in common
- Not all of Chromium is included
- Primarily written in C++
A short history
- Released in July, 2013 as Atom Shell
- Developed by Github for Atom editor
- Open-sourced in 2014
- 575 contributors, >13k commits
Why are people using it?
- Cross-platform
- Leverage webdev tools and skills
- Leverage user UI familiarity
- Possible to even leverage code
Overview - How does it work?
- Chrome's "process per window"
- A single (windowless) master process has privilege
- (Possibly) Multiple renderer processes
- IPC required between master and renderers
2. Some Electron apps
A sampler
Fun facts about Brave
- Co-founded by Brendan Eich
- Marshall Rose is a senior engineer
- Integrated micropayments functionality
- Built-in adaptive ad blocking
Atom's touts
- Maintained by github (like Electron)
- Has many add-on packages
- Integrated package manager, apm
VSC features
- Intellisense
- Integrated git
- Live interactive debugging
- Extensible via "Marketplace"
- Open sourced in 2015
- Founder Steward Butterfield also founded Flickr
- "Twitter for business"
- “Yeah the power of slack is that if you don’t follow it all then time you’ve lost the conversation."
3. Example Code
Example #1: electron-quick-start
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
main.js
// Set up required resources
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')main.js
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))main.js
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)index.html
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>