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.

Transcript

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

   View Slide

2. WHAT DIFFERENTIATES A WEB APP FROM
   A DESKTOP APP?
   

   View Slide

3. A LONG LONG TIME AGO …
   ❤
   &
   ❤
   

   View Slide

4. View Slide

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 ✅ ❓
   

   View Slide

6. Web
   HTML
   CSS
   JavaScript
   CROSS BROWSER COMPATIBLE APPLICATION
   

   View Slide

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
   

   View Slide

8. Chromium NodeJS
   +
   Electron
   =
   

   View Slide

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:
   

   View Slide

10. WHO IS USING ELECTRON?
    

    View Slide

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

    View Slide

12. ✨ NOTHING ✨
    

    View Slide

13. LIGHTWEIGHT PROCESSES
    

    View Slide

14. ELECTRON ARCHITECTURE
    BASED OFF OF
    Main
    Renderer Renderer
    Renderer
    

    View Slide

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
    

    View Slide

16. A WINDOW
    

    View Slide

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
    

    View Slide

18. GIVE INDEX.HTML SOME CONTENT
    
    
    
    My Electron App
    
    
    This is my Electron App!
    
    
    

    View Slide

19. LOCAL CONTENT
    

    View Slide

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
    

    View Slide

21. REMOTE CONTENT
    

    View Slide

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

    View Slide

23. Video of dynamically requiring file system node module
    and using it to read all files in current directory
    

    View Slide

24. View Slide

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
    

    View Slide

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
    

    View Slide

27. HOW DOES SLACK USE ELECTRON?
    

    View Slide

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

    View Slide

29. BrowserWindow
    BrowserView
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide