After Node.js brought JavaScript to the server, it was only inevitable that someone would take it to the next level and bring it to our desktop. And indeed this day has come. With the help of GitHub's Electron, front-end developers can now create fully featured desktop applications using JavaScript, HTML and CSS. In this talk, we'll go over the basics of developing an Electron app, talk about how Electron works under the hood and show how to build it and package it
3. Desktop Apps
Development Tools
Tasks
Media players
Email client
Calendar
Time management
Mapping
Social media clients
File management
Backup
Audio and Video Conferencing
Gaming
4. What is Electron
A framework for building cross
platform Desktop Applications
using web technologies
8. Cool Stuff
Web Technologies – No Native Skills needed
Javascript, HTML, CSS only.
One Browser
Chrome compatible only
Latest Features – ES 2015 & Chrome goodies.
Built-In NodeJS
All Node Capabilities - File system, networking etc..
npm ecosystem
Cross platform
Packaging for Windows, OS X, Linux
Native UX
Native Dialogs, Menus, Notifications etc…
9. Uncool Stuff
Web Technologies
Seriously it’s Javascript, HTML and CSS all the way.
Native Modules
Native Modules are written in C/C++ .
Debugging
Certain parts of the application are hard to debug.
Tooling
Some of the tooling is immature.
11. A Tale Of Two processes
Main
Application lifecycle
Browser window ipc
Node.js menu dialog
Renderer
Web page
ipc webFrame
Node.js
DOM remote
Creates
12. A Tale Of Two processes
Main
Application lifecycle
Browser window ipc
Node.js menu dialog
Renderer
Web page
ipc webFrame
Node.js
DOM remote
Creates
13. A Tale Of Two processes
Main
Application lifecycle
Renderer
Web page
Renderer
Web page
Renderer
Background Worker
16. Getting Started
Create an index.html file
...
<body>
<h1>Hello Electron!</h1>
We are using node
<script>
var dv=document.createElement('div');
dv.innerHTML=`We are using node ${process.versions.node}
<br/>Chrome ${process.versions.chrome}<br/>
Electron ${process.versions.electron}`;
document.body.appendChild(dv);
</script>
</body>
...
18. Running Your App
Install Electron prebuilt binaries using npm.
$ npm install electron-prebuilt --save-dev // -g
Run your app with the Electron Command
$ electron your-app/
20. Processes Communication
The Main and Renderer Processes can communicate using their
ipc modules.
Each type of processes has it’s own ipc module.
In the Renderer process use the ipcRenderer module to send
and listen to messages
const ipcRenderer = require('electron').ipcRenderer; ipcRenderer.on('asynchronous-
reply', function(event, arg) { console.log(arg); // prints "pong"
});
ipcRenderer.send('asynchronous-message', 'ping');
21. Processes Communication
In the Main process use the ipcMain module to listen and reply
to messages.
const ipcMain = require('electron').ipcMain;
ipcMain.on('asynchronous-message', function(event, arg) {
console.log(arg); // prints "ping"
event.sender.send('asynchronous-reply', 'pong');
});
22. Processes Communication
The remote module provides a simple way to do inter-process
communication (IPC) between the renderer process (web page) and
the main process.
It allow method invocation 0f main process objects without explicitly
using the ipc modules.
const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;
var win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('https://github.com');
24. Packaging and Distributing
Install Electron packager using npm.
$ npm install electron-packager --save-dev / -g
Run your app with the Electron Command
$ electron-packager app-name
--platform=win32
--arch=x64
26. Electron Tools
Electron API Demos app
Electron App for interactively exploring the Electron API.
Devtron
Electron Extension for Chrome’s Devtools.
Allow inspection and monitoring of your app.
Spectron
Framework for writing integrations tests.
Built on top of ChromeDriver and WebDriverIO.
27. Community Electron Tools & Resources
electron-builder - Create installers.
electron-boilerplate
generator-electron - yeoman generator
Awesome electron
https://github.com/sindresorhus/awesome-electron