Live deck with pertinent links:

Electron

Native apps with web technologies

Brian Capouch

Main Electron website

Plan of attack

  • Overview: what Electron is and what it does 
  • A look at some Electron apps in the wild
  • Two coding examples

1. About Electron

What is Electron?

  • A runtime for desktop applications
  • Combines Chromium and Node.js
  • V8 engine shared in common
  • Not all of Chromium is included
  • Primarily written in C++

A short history

  • Released in July, 2013 as Atom Shell
  • Developed by Github for Atom editor
  • Open-sourced in 2014
  • 575 contributors, >13k commits

Why are people using it?

  • Cross-platform 
  • Leverage webdev tools and skills
  • Leverage user UI familiarity
  • Possible to even leverage code

Overview - How does it work?​

  • Chrome's "process per window"
  • A single (windowless) master process has privilege
  • (Possibly) Multiple renderer processes
  • IPC required between master and renderers

2. Some Electron apps

A sampler

Fun facts about Brave

  • Co-founded by Brendan Eich
  • Marshall Rose is a senior engineer
  • Integrated micropayments functionality
  • Built-in adaptive ad blocking

Atom's touts

  • Maintained by github (like Electron)
  • Has many add-on packages
  • Integrated package manager, apm

VSC features

  • Intellisense 
  • Integrated git
  • Live interactive debugging
  • Extensible via "Marketplace"
  • Open sourced in 2015
  • Founder Steward Butterfield also founded Flickr
  • "Twitter for business"
  • “Yeah the power of slack is that if you don’t follow it all then time you’ve lost the conversation."

3. Example Code

Example #1: electron-quick-start

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
main.js

// Set up required resources
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')
main.js

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
main.js

// Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
index.html

<body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>

  <script>
    // You can also require other files to run in this process
    require('./renderer.js')
  </script>

Example 2: Dual webapp/desktop

Electron

By capouch

Electron

Developing native apps with web technologies

  • 1,860