ruk·si

⚛️ Electron

Updated at 2016-12-10 02:25

Electron is a cross platform desktop applications using web technologies. You wrap your code in a small browser.

Features that pure web page cannot do.

  • Run Node.js code inside browser context.
  • Open file manager at a particular location.
  • Open links in external browser.
  • Open native error or information popup window.
  • Show application in tray (bottom right on Windows, top right on OS X)
  • Use ipc to send messages between windows/processes.
  • Access to operating system information os package.
  • Fluid control of copy and pasting.
  • Use URL protocols to open your application e.g. electron-api-demos://.
  • Take full screen screenshot.
  • Automatic updates and Windows installer.

You have main process that controls other windows. You create new windows with BrowserWindow. You can use invisible windows to run background tasks with show: false. You can remove default toolbar with frame: false or even transparent: true.

You can handle crashes of windows by reloading the window again. window.webContents.on('crashed', function () {}); and window.on('unresponsive', function () {}); handle most of the cases.

Follow the guidelines for toolbar menus. There are also some guidelines on right click context menus.

Avoid overwriting system-wide keyboard shortcuts.

Links

  • Electron: Building cross platform desktop applications using web technologies.
  • nativefier: Wrap web apps to native containers.
  • awesome-electron: Nice example of an applications made with Electron.

Sources