What is electron

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

Why Electron

If you can build a website, you can build a desktop app.

Native integration with host OS
Cohesive branding
Large community
Cross platform apps
Lightweight(ish)
Automatic updates
Debugging and profiling tools
Bug reporting
Easy installer wizards

Who is using electron

Skype
Slack
Visual Studio Code
Github
Discord
Atom
Kitematic (Docker app)
WhatsApp
GooglePlay

What does an electron app look like?

Example notifcation

let myNotification = new Notification('Title', {
    body: 'Something important'
})
  
myNotification.onclick = () => {
    console.log('Notification clicked')
}

Example package scripts

{
 "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

HOST OS

IPC

START

3 main Components of Electron

Chrome

C++

Node JS

Cross-platform desktop apps written in JavaScript!!

CHROME IS GREEDY (for good reasons)

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

Google is working on it

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.

Where can I start?

https://github.com/electron/electron

https://github.com/electron/fiddle

https://www.npmjs.com/~nodert-win10

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

ELECTRON

By jwcnewton