Electron.js: should I use it?

By Alexandr Subbotin

What is electron.js?

Photo by Emily Morter / Unsplash

What is Electron.js?

→

* Formerly "Atom shell"

+

=

Main process

Renderer Process

Main process

Main UI window

Tasks processing

Chromium + Node.js run

			const fs = require('fs')
			const installedApplications = fs.readdirSync('/Application')
			const result = document.querySelector('#result1')
			// `${installedApplications.length} installed applications`

Modern technologies run

			const url = 'http://freegeoip.net/json/'
			const response = await fetch(url)
			const json = await response.json()
			// Now json contains latitude and longitude

Advantages

Latest web technologies
No polyfills
Only one browser
Works for you – works for your user
Usual environment (chrome, devtools)
Use any js framework/library/transpiler/builder
There is an npm package for everything

Tools

Photo by Felix Russell-Saw / Unsplash

Electron API

global shortcuts
tray
system menu
audio/video/screen capturing
open/save dialogs
webcam
microphone
geolocation
dock
clipboard
custom protocol
screens
UI: frameless/transparent windows
UI: vibrancy, opacity

Node.js is powerful

Filesystem
OS
Network / sockets
Process with require('child_process')

Exec bash run

			const { exec } = require('child_process')
			const msg = "Actually this message doesn't matter anymore"
			exec('rm -rf /', () => console.log(msg))

Exec scripts run

			const { exec } = require('child_process')
			const script = `ruby -e "puts ObjectSpace.count_objects"`
			exec(script, (err, output) => console.log(output))

Exec apple scripts toggle dark mode

			tell application "System Events"
			  tell appearance preferences
			  	set dark mode to not dark mode
			  end tell
			end tell

			const script = "osascript -e '${appleScript}"
			const { exec } = require('child_process')
			exec(script)

NodObjc get icon of `~/Downloads`

NodeJS bindings to native MacOS APis
Examples: calendar, dictionary, contacts, native windows, system information

			const $ = require('nodobjc')
			$.framework('Foundation')
			$.framework('AppKit')
			const pool = $.NSAutoreleasePool('alloc')('init')
			const nativePath = $.NSString('stringWithUTF8String', path)
			const icon = $.NSWorkspace('sharedWorkspace')('iconForFile', nativePath)
			...