Building Real-World Desktop Apps With Electron

BUILDING REAL-WORLD DESKTOP APPS WITH ELECTRON AND HOW SLACK HAS
USED ELECTRON TO SCALE @ANUJRNAIR

WHAT DIFFERENTIATES A WEB APP FROM A DESKTOP APP?

A LONG LONG TIME AGO … ❤ & ❤

Internet connec)on ✅ ✅ Sound and Video ✅ ✅ Push
no)ﬁca)ons ✅ ✅ Graphics renderings ✅ ✅ Oﬄine capabili)es ✅ ✅ Graphics renderings ✅ ✅ Full OS access ❌ ✅ Cross pla=orm compa)ble ✅ ❓

Web HTML CSS JavaScript CROSS BROWSER COMPATIBLE APPLICATION

CROSS PLATFORM COMPATIBLE APPLICATION WITH FULL ACCESS TO THE OPERATING
SYSTEM MacOS Windows Linux SwiF Objec)ve-C C++ Visual Basic C Java Python

Chromium NodeJS + Electron =

x languages → HTML, CSS, JavaScript Cross pla=orm compa)ble No
cross browser compa)bility issues Crash repor)ng and code debugging 1 JavaScript / Node community Cohesive Experience Self upda)ng applica)ons ✨ Installers WHY USE ELECTRON? ENGINEERING: PRODUCT:

WHO IS USING ELECTRON?

CREATING AN APP $ npm init -y $ npm install
electron --save-dev $ touch index.js $ npx electron index.js AND WE GET …

✨ NOTHING ✨

LIGHTWEIGHT PROCESSES

ELECTRON ARCHITECTURE BASED OFF OF Main Renderer Renderer Renderer

CREATING A WINDOW const { app, BrowserWindow } = require('electron')
let win function createWindow() { win = new BrowserWindow({ width: 800, height: 600, title: 'My Electron App' }) } app.on('ready', createWindow) index.js

A WINDOW

LOAD SOME CONTENT const { app, BrowserWindow } = require('electron')
let win function createWindow() { win = new BrowserWindow({ width: 800, height: 600, title: 'My Electron App' }) win.loadURL(`file://${__dirname}/index.html`); } app.on('ready', createWindow) index.js

GIVE INDEX.HTML SOME CONTENT <html lang="en"> <head> <meta charset='utf-8'> <title>My
Electron App</title> </head> <body> This is my Electron App! </body> </html>

LOCAL CONTENT

LOAD A REMOTE PAGE const { app, BrowserWindow } =
require('electron') let win function createWindow() { win = new BrowserWindow({ width: 800, height: 600, title: 'My Electron App' }) win.loadURL('https://google.com'); } app.on('ready', createWindow) index.js

REMOTE CONTENT

NOW WE’RE JUST DEVELOPING A WEBAPP AS USUAL OR ARE
WE? SPOILER: WE’RE NOT.

Video of dynamically requiring ﬁle system node module and using
it to read all ﬁles in current directory

Only load secure content (HTTPS, WSS, FTPS) Disable NodeJS in
renderers that display remote content Verify integrity of scripts via CSP and SRI Don't trust external resources SECURITY CONSIDERATIONS ESPECIALLY IF YOU’RE LOADING REMOTE CONTENT

SECURE USAGE OF NODEJS win = new BrowserWindow({ width: 800,
height: 600, title: 'My Electron App', webPreferences: { nodeIntegration: false, preload: path.join(__dirname, 'preload.js') } }) const fs = require('fs') global.desktop = { files: () => fs.readdirSync(__dirname) } index.js preload.js

HOW DOES SLACK USE ELECTRON?

SLACK DESKTOP ARCHITECTURE Main BrowserView BrowserView BrowserView BrowserWindow ✅ Node
❌ DOM ✅ Node ✅ DOM ❌ Node ✅ DOM

BrowserWindow BrowserView

BrowserView BrowserView BrowserView SLACK DESKTOP ARCHITECTURE ✅ Node ❌ DOM
✅ Node ✅ DOM ❌ Node ✅ DOM Main BrowserWindow Redux Redux Redux Redux

Deeper integra)on with the OS ⏬ Consolida)ng mul)ple BrowserView into
one Increased Slack client performance WHATS NEXT FOR SLACK & ELECTRON?

SHOULD I USE ELECTRON? ⏬ Cross pla=orm compa)bility Hard parts
made easy Cohesive experience 1 The community Do you need a desktop app? Security best prac)ces Memory considera)ons YES NO AS ALWAYS, IT DEPENDS

THANK YOU! @ANUJRNAIR P.S. WE’RE HIRING!

Building Real-World Desktop Apps With Electron

Building Real-World Desktop Apps With Electron

Anuj Nair

More Decks by Anuj Nair

Other Decks in Programming

Featured

Transcript