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
