Save 37% off PRO during our Black Friday Sale! »

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. BUILDING REAL-WORLD DESKTOP APPS WITH ELECTRON AND HOW SLACK HAS

    USED ELECTRON TO SCALE @ANUJRNAIR
  2. WHAT DIFFERENTIATES A WEB APP FROM A DESKTOP APP?

  3. A LONG LONG TIME AGO … ❤ & ❤

  4. None
  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 ✅ ❓
  6. Web HTML CSS JavaScript CROSS BROWSER COMPATIBLE APPLICATION

  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
  8. Chromium NodeJS + Electron =

  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:
  10. WHO IS USING ELECTRON?

  11. CREATING AN APP $ npm init -y $ npm install

    electron --save-dev $ touch index.js $ npx electron index.js AND WE GET …
  12. ✨ NOTHING ✨

  13. LIGHTWEIGHT PROCESSES

  14. ELECTRON ARCHITECTURE BASED OFF OF Main Renderer Renderer Renderer

  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
  16. A WINDOW

  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
  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>
  19. LOCAL CONTENT

  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
  21. REMOTE CONTENT

  22. NOW WE’RE JUST DEVELOPING A WEBAPP AS USUAL OR ARE

    WE? SPOILER: WE’RE NOT.
  23. Video of dynamically requiring file system node module and using

    it to read all files in current directory
  24. None
  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
  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
  27. HOW DOES SLACK USE ELECTRON?

  28. SLACK DESKTOP ARCHITECTURE Main BrowserView BrowserView BrowserView BrowserWindow ✅ Node

    ❌ DOM ✅ Node ✅ DOM ❌ Node ✅ DOM
  29. BrowserWindow BrowserView

  30. BrowserView BrowserView BrowserView SLACK DESKTOP ARCHITECTURE ✅ Node ❌ DOM

    ✅ Node ✅ DOM ❌ Node ✅ DOM Main BrowserWindow Redux Redux Redux Redux
  31. Deeper integra)on with the OS ⏬ Consolida)ng mul)ple BrowserView into

    one Increased Slack client performance WHATS NEXT FOR SLACK & ELECTRON?
  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
  33. THANK YOU! @ANUJRNAIR P.S. WE’RE HIRING!