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

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/

Building Desktop Apps with Electron

By Abram Adams

Building Desktop Apps with Electron

  • 921