Free yourself from the Browser with Electron

class: center, middle, inverse, inverse

# Free yourself from the Browser with [Electron](http://electron.atom.io/)
---
class: center, middle, inverse

# About me
---
layout: false
class: center, middle, inverse
# Carmen Long
## Twitter: [@carmalou](https://twitter.com/carmalou)
## Blog: [carmalou.com](http://carmalou.com)
---
class: center, middle, inverse

# Electron..? Isn't that something in an Atom?
---
class: left, middle, inverse

### Electron is a JavaScript framework that allows you to use JavaScript outside of the browser to build desktop applications.
---
class: center, middle, inverse

# Whaaaat? Is this some kind of black magic?
---
class: left, middle, inverse

### Nope, it's just a Chromium window without the url bar, back buttons and other browser navigation tools.
---
class: center, middle, inverse

# Oh, Chromium? That's the black magic, right?
---
class: left, middle, inverse

### Nope. [Chromium](https://www.chromium.org/) is an open source browser that pre-dates Google Chrome. Google Chrome is based on Chromium.
---
class: center, middle, inverse

# Ok, so it's basically the browser.
---
class: center, middle, inverse

# Yes and no...
---
class: center, middle, inverse

# Yes
---
class: left, middle, inverse

### When the application opens, it uses a chromium window to display the files, which allows the use of HTML, CSS, and JavaScript.
---
class: center, middle, inverse

# No
---
class: left, middle, inverse

### The files exist on the computer. They are not being served from another location.
---
class: center, middle, inverse

# Sounds kinda cool. But why would I leave the browser?
---
class: left, middle, inverse

### With Electron we can use essentially the same code to run desktop apps and websites. This opens up a world of possibilities.
---
class: center, middle, inverse

# Free yourself from the Browser
---
class: center, middle, inverse

# Free yourself from the Internet
---
class: center, middle, inverse

# What is "offline?"
---
class: center, middle, inverse

# Intermittent Internet
---
class: center, middle, inverse

# No Internet Access
---
class: center, middle, inverse

# Webpage is down
---
class: center, middle, inverse

# Still not convinced?
---
class: center, middle, inverse

# One codebase, so it's easier to maintain
---
class: center, middle, inverse

# One codebase compiles for multiple platforms
---
class: center, middle, inverse

# Only uses Chromium, so no issues with varying browser requirements
---
class: center, middle, inverse

# Chrome dev tools!
---
class: center, middle, inverse

# Take existing knowledge and write a desktop app _today_
---
class: center, middle, inverse

# Examples
---
class: left, middle, inverse

## - [Slack](https://slack.com/)
## - [Atom](https://atom.io/)
## - [Visual Studio Code](https://code.visualstudio.com)
## - [Mapbox Studio Classic](https://www.mapbox.com/help/define-mapbox-studio-classic/)
---
class: center, middle, inverse

# Here are some you might not be familiar with
---
class: center, middle, inverse

# [HyperTerm](https://hyperterm.org/)

### A cool terminal emulator to run bash commands. And, it's inspectable.
---
class: center, middle, inverse

# [Brave](https://brave.com/)

### A browser that blocks ads and trackers
---
class: center, middle, inverse

# [Gitify](http://gitify.io/)

### Github notifications in the menubar
---
class: center, middle, inverse

# [Shake](http://kurisubrooks.com/shake)

### Earthquake early warning program for Japan
---
class: center, middle, inverse

# Ok, I'm in. Where should I start?
---
class: center, middle, inverse

# Electron apps have three basic parts

## - package.json (lists dependencies and points to main file)
## - main.js (opens and closes windows and loads html files)
## - index.html (the webpage being rendered)
---
class: center, middle, inverse

# Window
---
class: left, middle, inverse

```javascript
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var mainWindow;

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

// and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`);

// Emitted when the window is closed.
  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}
```
---
class: center, middle, inverse

# Open finder
---
class: left, middle, inverse

```javascript
var shell = require('electron').shell;

shell.showItemInFolder('full/file/path.extension');
```
---
class: center, middle, inverse

# Open files
---
class: left, middle, inverse

```javascript
var shell = require('electron').shell;

shell.openItem('full/file/path.extension');
```
---
class: center, middle, inverse

# Get system information
---
class: left, middle, inverse

```javascript
var os = require('os');
var whatIsMyComp = os.platform();

if(whatIsMyComp == 'darwin') {
  console.log('you are on mac');
  useMacFilePath();
}

if(whatIsMyComp == 'win32') {
  console.log('you are on windows');
  useWindowsFilePath();
}

if(whatIsMyComp == 'linux') {
  console.log('you are on linux');
  useLinuxFilePath();
}
```
---
class: center, middle, inverse

# Get screen size
---
class: left, middle, inverse

```javascript
var electronScreen = require('electron').screen;
var size = electronScreen.getPrimaryDisplay().size;

console.log(size.width); // width of screen in pixels
console.log(size.height); // height of screen in pixels
```
---
class: center, middle, inverse

# Communicate between processes
---
class: center, middle, inverse

# Main process
---
class: left, middle, inverse

## - Handles opening and closing windows
## - Can communicate with renderer process
## - Receives messages on `ipcMain`
## - Sends messages on `webContents`
---
class: center, middle, inverse

# Renderer process
---
class: left, middle, inverse

## - Controller for window
## - Each window has its own renderer process
## - Sends and receives messages on `ipcRenderer`
---

<p>Hi! My name is <span id="name">BLANK</span>.</p>

---
class: left, middle, inverse

# renderer.js sends message to main.js

```javascript
function openTheWindow() {
  ipcRenderer.send('open-name-window');
}```
---
class: left, middle, inverse

# main.js receives message from renderer.js

```javascript
ipcMain.on('open-name-window', function() {
  if(nameWindow != undefined) {
    return;
  }
  nameWindow = new BrowserWindow({ width: 400, height: 300 });
  nameWindow.loadURL(`file://${__dirname}/changeName.html`);
  nameWindow.on('closed', function() {
    nameWindow = null;
  });
});
```
---
class: left, middle, inverse

# new renderer process sends message to main.js

```javascript
function sendNameBack(event) {
  event.preventDefault();
  var tmpName = document.getElementById('newName').value;
  ipcRenderer.send('update-the-name', tmpName);
}
```
---
class: left, middle, inverse

# main.js sends message to main renderer window

```javascript
ipcMain.on('update-the-name', function(event, name) {
  // communicate with the window that sent the initial message
  // event.sender.send('render-the-name', name);

// communicate with a specific window
  mainWindow.webContents.send('render-the-name', name);

// close new window
  nameWindow.close();
});
```
---
class: center, middle, inverse

# So where do we go from here?
---
class: left, middle, inverse

## - Try it out yourself with [Electron Quick Start](https://github.com/electron/electron-quick-start)
## - Download the [Electron APIs Demo](http://electron.atom.io/#get-started)
---
class: left, middle, inverse

# References

- [http://electron.atom.io/](http://electron.atom.io/)
- [http://electron.atom.io/#get-started](http://electron.atom.io/#get-started)
- [https://github.com/sindresorhus/awesome-electron](https://github.com/sindresorhus/awesome-electron)
- [https://www.toptal.com/javascript/electron-cross-platform-desktop-apps-easy](https://www.toptal.com/javascript/electron-cross-platform-desktop-apps-easy)
- [https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658#.2g80fgpxv](https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658#.2g80fgpxv)
- [https://scotch.io/tutorials/creating-desktop-applications-with-angularjs-and-github-electron](https://scotch.io/tutorials/creating-desktop-applications-with-angularjs-and-github-electron)
---
class: center, middle, inverse

# Questions?