Intro to Electron

Native Desktop Apps

Built with Web Technologies

What is Electron?

  • Open source project from GitHub
  • Formerly named "Atom Shell"
    • Originally built as native shell for Atom editor
    • forked from NodeWebKit (now NW.js)
  • Build cross-platform, desktop apps using HTML, CSS, and JavaScript
  • Mixes Chromium and NodeJS into a common application framework

Upsides of using Electron

  • Built on latest V8
    • ES2015 goodness
    • transpilers be like, what?
  • Seamlessly use NodeJS modules in web UI
    • access to local machine resources like file system, spawn local processes, etc.
    • module loaders be like, what?
  • Access native platform services
    • Cross-platform (mostly) APIs
    • e.g. menus, tray, window chrome
  • Auto-updater (OSX & Windows)

Writing for multiple browsers is frustrating...

With Electron

You are only writing for

1

modern browser!!!!

Downsides of Electron

  • Each BrowserWindow is a new Chrome process
    • high memory/cpu use
  • Cross-platform isn't entirely "free"
    • Creating really "native looking" apps is not easy
    • No standard CSS library for each platform
      • Mac OSX look - Photon (seems to have died)
    • Mixed behavior of some native APIs (e.g. tray)
    • Liberal use of "if/else" for platform-specific handling

Electron Architecture

  • Multi-process
  • "main" process
    • controls application and (in general) "talks" to native OS services
    • launches "renderer" process(es)
    • an electron application minimally requires just a main process js file & package.json
  • "renderer" process
    • renders web page
    • like a tab in desktop Chrome

Electron Architecture (cont.)

  • Electron modules provide access to various native and web services via API
    • main process - tray, dialog, menu, DownloadItem
    • renderer - webFrame, desktopCapturer, file
    • both - clipboard, shell, screen, environment vars
  • main and renderer process communicate via IPC protocol
    • ipcMain & ipcRenderer modules are used
    • messages are sent async or sync
    • example - fileOpenDialog is used in main process
      • gets message to launch dialog
      • passes file list back to renderer when complete
  •  

Electron Examples

GitKraken - graphical git client

Electron Examples

Brave - ad-blocking web browser

Electron Examples

Nyals N1 - email client

Electron Examples

Kitematic - Docker container management

The Demo

  • NPM package.json explorer
    • easier to visualize specific properties of the NPM package
    • property-specific "editors" assist in maintenance
    • better visibility to dependency changes/updates

disclaimer: It's NOT done, yet ;)

  • Show key features of Electron
    • ES2015 used throughout with no Babel
    • NodeJS modules used in UI with no browserify/webpack
    • Read/write local file system
    • Uses native platform features like tray and dialog

Resources and Links

Made with Slides.com