Build cross platform desktop apps with JavaScript, HTML, and CSS
Electron is an open source framework that allows developers to use web technologies to build desktop applications
If you can build a website, you can build a desktop app.
let myNotification = new Notification('Title', {
body: 'Something important'
})
myNotification.onclick = () => {
console.log('Notification clicked')
}
{
"name": "electron-lightning-app",
"productName": "Lightning Talk App",
"version": "0.1.0",
"main": "main.js",
"devDependencies": {
"electron": "^1.*",
"electron-packager": "^8.*",
"scripts": {
"package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64
--icon=/icons/mac/icon.icns
--prune=true --out=release-builds",
"package-win": "electron-packager . electron-lightning-app --overwrite
--asar=true --platform=win32
--arch=ia32 --icon=/icons/win/icon.ico
--prune=true --out=release-builds
--version-string.ProductName=\"Lightning Talk App\"",
"package-linux": "electron-packager . electron-lightning-app --overwrite --asar=true
--platform=linux --arch=x64
--icon=/icons/png/1024x1024.png
--prune=true --out=release-builds"
}
}
Running our package scripts would produce 3 release-able builds into ./release-builds
NATIVE UI
MAIN PROCESS
RENDER PROCESS
RENDER PROCESS
HOST OS
IPC
IPC
START
START
3 main Components of Electron
Chrome
C++
Node JS
Larger applications with more and more content that demand more resources
Electron uses a "slim" version of Chrome that massively cuts down on the file size of an electron application and removes some of the resource intensive features of Chrome
But some of the ownership is on the developers to write smaller applications, it's our job to be a efficient as possible but Google is always working to improve this.
Microsoft provides 210+ NPM modules for working with windows 10 (Geolocation, Bluetooth, Printers, PDFS, GPIO...)
Electron Fiddle lets you create and play with small Electron experiments.
: brew cask install electron
: choco install electron