Building Real-World Desktop Apps With Electron

Building Real-World Desktop Apps With Electron

Building Real-World Desktop Apps With Electron
And how Slack has used Electron to scale

There’s one surprising thing which links the VS Code, Slack, WhatsApp, Github and Atom desktop apps together - they have all been built using JavaScript, HTML, and CSS. Thanks to Electron, building these powerful, cross-platform desktop apps is easier than you think.

Today we’ll learn how to do just that. We’ll talk about the pros and cons of building Electron apps, and look at a real-world example to see how Slack has been created. We’ll dive into Slack’s architecture, and investigate why we solved some of the problems we faced in the way we did.

2b26368789484f1924e791cabcdba983?s=128

Anuj Nair

July 19, 2018
Tweet

Transcript

  1. 4.
  2. 5.

    Internet connec)on ✅ ✅ Sound and Video ✅ ✅ Push

    no)fica)ons ✅ ✅ Graphics renderings ✅ ✅ Offline capabili)es ✅ ✅ Graphics renderings ✅ ✅ Full OS access ❌ ✅ Cross pla=orm compa)ble ✅ ❓
  3. 7.

    CROSS PLATFORM COMPATIBLE APPLICATION WITH FULL ACCESS TO THE OPERATING

    SYSTEM MacOS Windows Linux SwiF Objec)ve-C C++ Visual Basic C Java Python
  4. 9.

    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:
  5. 11.

    CREATING AN APP $ npm init -y $ npm install

    electron --save-dev $ touch index.js $ npx electron index.js AND WE GET …
  6. 15.

    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
  7. 16.
  8. 17.

    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
  9. 18.

    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>
  10. 20.

    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
  11. 23.

    Video of dynamically requiring file system node module and using

    it to read all files in current directory
  12. 24.
  13. 25.

    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
  14. 26.

    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
  15. 30.

    BrowserView BrowserView BrowserView SLACK DESKTOP ARCHITECTURE ✅ Node ❌ DOM

    ✅ Node ✅ DOM ❌ Node ✅ DOM Main BrowserWindow Redux Redux Redux Redux
  16. 31.

    Deeper integra)on with the OS ⏬ Consolida)ng mul)ple BrowserView into

    one Increased Slack client performance WHATS NEXT FOR SLACK & ELECTRON?
  17. 32.

    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