BUILDING DESKTOP APPLICATIONS WITH

By Abram Adams

Who Am I?

Demo!

Apps Built On Electron?

Why?

Benefits Of Desktop Apps

Local File System Access
Network Access
Frameless Windows
Multi-Threaded Processes
Access to OS Features (clipboard, notifications, etc.)
Database Access (Directly via NodeJS)
Start/Stop/Interact with Native/OS Services
Develop Native-Feeling User Experiences
Fixes Age Old "Back Button" Issue
NO MORE BROWSER WARS!!
Too Many To List

How?

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

DEMO!

Main Process

The main process is responsible for creating and managing BrowserWindow instances and various application events.

Render Process

The render process is responsible for running the user-interface of your app, or in other words, a web page which is an instance of webContents.

Processes

Credit: https://medium.com/@ccnokes/deep-dive-into-electrons-main-and-renderer-processes-7a9599d5c9e2

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

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

 //...
}

<!-- index.html --->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <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>
</html>

Demo!

Node.js as a first class citizen

ECMAScript 2015/ES6 support
Leverage ~700k npm modules
You can do what previously had to be done server side

DEMO

But Wait, there's more!

DEMO!

Conclusion

Resources

https://electronjs.org/community

@Abram_Adams

aadams@cfxchange.com

https://github.com/abramadams

http://cfml-slack.herokuapp.com/