Electron is an open-source framework developed by GitHub. It allows for the development of desktop GUI applications using the popular Node.js runtime. Electron is the main framework behind two notable open-source source code editors: GitHub's Atom and Microsoft's Visual Studio Code.

1. © 2016 Priramo
© 2016 Priramo
By Priyaranjan Mohanty

2. © 2016 Priramo2
Don’t Worry we are not going to talk
Quantum Physics
This is something which we will be using to create
Desktop Applications

3. © 2016 Priramo3
But Why to create a
Desktop App ?

4. © 2016 Priramo4
People are not constantly connected.
They don’t want to compromise with their privacy.
They like to experience faster performance.
They would prefer to be the owner instead of a tenant.
Sometimes there is a sophisticated client need.
Most importantly its getting easier to create one now.
Because

5. © 2016 Priramo5
Offline
Printers, Devices & Other local hardware
On-Premise
Internal, LOB
Edit Local Files
App Store
Kiosk
Desktop > Intranet
Sometimes it “just feels right”
Some of the Business Needs

6. © 2016 Priramo6
Disconnected Data Entry
Editor
Time Management
Media Player
Email Client
Messaging, Collaboration
Mapping, Route Planner
Social Media Client
And many more that you can think of …
Few Application Ideas
Bulk Media Editor
File Management, Backup
Document Generation, Reading
Audio, Video Conferencing
Games
Personal Assistant
Database Client
Calendar

7. © 2016 Priramo7

8. © 2016 Priramo8
Story of Electron
Features
Architecture
Hello World
Hello Universe
Potential
Roadmap
Up Ahead

9. © 2016 Priramo9
Story of Electron
The journey of an idea to make things simple and easy.

10. © 2016 Priramo10
It all started with the search for
A foundation for Atom
Github needed a tool to build the text editor on – with
JavaScript, HTML and CSS

11. © 2016 Priramo11
Path to Electron
node-webkit
nw.js
Chromium Embedded
Framework
Atom Shell
Electron [now]
Cheng Zhao
Lead Electron Developer
Contributor to nw.js
Github [ @zcbenz ]
Tokyo, Japan

12. © 2016 Priramo12
Journey of Electron so far
Project Began
January 2013
Open Sourced
May 2014
Named Electron
April 2015
Released API 1.0
June 2016

13. © 2016 Priramo13
Formal Introduction
Electron
A framework for building cross platform desktop
applications with web technology

14. © 2016 Priramo14
An Artist’s Impression of Electron

15. © 2016 Priramo15
Features
All the cool things that are happened to be provided
with electron to achieve the native behaviors.

16. © 2016 Priramo16
Core Features
Web Technology
HTML, CSS, JS
Latest & Greatest
All the chrome goodies
No Native Skills
Unless you want to
One Browser
Design once

17. © 2016 Priramo17
Core Features
File System
All of Node.js APIs
Three Platforms
Windows, Mac OS X, Linux
Modules
npm ecosystem
Native Menu
Dialogs & Notifications

18. © 2016 Priramo18
Core Features
Windows Installers
No Configuration
Automatic Updates
Mac & Windows with Squirrel
Crash Reporting
Submit to Remote Server
Debugging & Profiling
Content tracing by Chromium

19. © 2016 Priramo19
Architecture
Explore the magic box of electron to understand the
components and processes underneath

20. © 2016 Priramo
5.3.332.37
6.5.0
1.4.0
53.0.2785.113
20
Under the Hood

21. © 2016 Priramo21
Chromium
• The open-source web browser project from Google.
• Provides tabbed window manager, or shell for the web.
• Have a minimalist user interface.
• Uses V8 as the JavaScript engine.
• Uses Blink as the layout engine.
• Electron uses content module/content API.

22. © 2016 Priramo22
Node JS
• An open-source JavaScript runtime.
• Uses V8 JavaScript engine.
• Enables you to run JavaScript outside the browser.
• Provides an interactive shell (REPL: read-eval-print-loop)
where you can execute raw JavaScript code.
• Uses an event-driven, non-blocking I/O model that
makes it lightweight and efficient.
• Node.js' package ecosystem, npm, is the largest
ecosystem of open source libraries in the world.

23. © 2016 Priramo23
V8 JavaScript Engine
• An open-source JavaScript Engine developed by The
Chromium Project.
• Written in C++ and JavaScript.
• Implements ECMAScript as specified in ECMA-262, 3rd
edition.
• Runs on Windows XP or later, Mac OS X 10.5+, and Linux
systems that use IA-32, ARM or MIPS processors.
• Compiles JavaScript into native machine codes.

24. © 2016 Priramo24
The Two Processes
Main
Application Lifecycle
Renderer
Web Page
Node.js APIs ipc
Electron APIs
ipc DOM Node.js
APIsElectron APIs
Creates
Communicates

25. © 2016 Priramo25
The Two Processes
Main
Renderer
Renderer
Renderer
Renderer
App
Web Page

26. © 2016 Priramo26
The Two Processes
Chrome File Edit View
Main
Chrome
Renderer
Each Tab
Older Versions
Newer Versions

27. © 2016 Priramo27
Hello World
Let’s build the very first desktop application using
electron and get started.

28. © 2016 Priramo28
Getting Started
package.json main.js index.html

29. © 2016 Priramo29
package.json
{
"name" : "hello-world-app",
"version": "0.1.0",
"main" : "main.js"
}

30. © 2016 Priramo30
main.js (Main Process)
const electron = require('electron');
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow = null;
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height:600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function () {
mainWindow = null
})
})

31. © 2016 Priramo31
index.html (Renderer Process)
<html>
<head>
<script>
window.onload = function() {
var fs = require('fs')
var p = document.createElement('p')
p.textContent = fs.readFileSync('dataFile.txt')
document.body.appendChild(p)
}
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

32. © 2016 Priramo32
Global Electron
npm install –g electron
electron .

33. © 2016 Priramo33
Hurray !!!

34. © 2016 Priramo34
Power of Chrome to the App

35. © 2016 Priramo35
Hello Universe
Deep dive into the electron ecosystem

36. © 2016 Priramo36
Electron APIs
Main Process
app
BrowserWindow
Dialog
ipcMain
MenuItem
powerSaverBlocker
systemPreferences
Tray and more …
Renderer Process
desktopCapturer
File Object
ipcRenderer
remote
webFrame
<webview> Tag
window.open function
Both Process
clipboard
crashReporter
Environment Variables
nativeImage
Process
screen
shell
Synopsis

37. © 2016 Priramo37
Hard Things Made Easy
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({transparent: true, frame: false})
win.show()
globalShortcut.register('CommandOrControl+Shift+J', () => {
mainWindow.webContents.toggleDevTools();
})
app.on('will-quit', () => {
globalShortcut.unregisterAll()
})
Accelerators can contain multiple modifiers and key codes, combined by the + character.

38. © 2016 Priramo38
Hard Things Made Easy
crashReporter.start({
productName: 'YourName',
companyName: 'YourCompany',
submitURL: 'https://your-domain.com/url-to-submit',
autoSubmit: true
})
shell.moveItemToTrash('someFile.txt')
shell.openExternal('https://github.com')

39. © 2016 Priramo39
Hard Things Made Easy (ipc)
// In main process.
const {ipcMain} = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.sender.send('asynchronous-reply', 'pong')
})
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.returnValue = 'pong'
})
ipcMain
Communicate asynchronously from the main process to renderer processes.

40. © 2016 Priramo40
Hard Things Made Easy (ipc)
ipcRenderer
Communicate asynchronously from a renderer process to the main process.
// In renderer process (web page).
const {ipcRenderer} = require('electron')
// prints "pong" to be returned from ipcMain
console.log(ipcRenderer.sendSync('synchronous-message', 'ping'))
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

41. © 2016 Priramo41
Electron Tools
electron-prebuilt
Install prebuilt Electron binaries for command-line use using npm.
electron-compile
Use ES2015, CoffeeScript, LESS, SCSS in your app without a pre-compilation step.
electron-packager
Package and distribute your app.
devtron
Official DevTools extension. Provides features to debug all electron components.
spectron
Test Electron apps using ChromeDriver.

42. © 2016 Priramo42
Bolierplates
electron-quick-start
Clone the repo to try a simple app.
electron-boilerplate
Comprehensive boilerplate by szwacz which even generates installers.
bozon
Scaffold, run, test, and package your app.
SkelEktron
A ready to go app template with some useful features built-in like logger, builder & updater etc.
electron-react-boilerplate
Boilerplate based on React and webpack.

43. © 2016 Priramo43
Useful Components
React Desktop
UI toolkit for macOS and Windows built with React.
cookies
Adds support for 'document.cookie'.
chrome-tabs
Chrome like tabs.
menubar
High-level way to create a menubar app.
Photon
UI toolkit for building beautiful apps.

44. © 2016 Priramo44
Electron API Demo App

45. © 2016 Priramo45
Potential
Initially developed for GitHub's Atom editor, Electron
has since been used to create applications by many.

46. © 2016 Priramo46
Impactful Footprints
Atom
By Github

47. © 2016 Priramo47
Impactful Footprints
Slack Desktop
App
By Slack

48. © 2016 Priramo48
Impactful Footprints
Visual Studio
Code
By Microsoft

49. © 2016 Priramo49
Impactful Footprints
WordPress
Desktop App
By WordPress

50. © 2016 Priramo50
Impactful Footprints
Postman

51. © 2016 Priramo51
Impactful Footprints
WhatsApp

52. © 2016 Priramo52
Impactful Footprints
Hive Kitematic Wagon ScreenCat Mojibar WebTorrent PhoneGap
Ionic Lab Avocode Nuclide Pixate Tofino Play Music Netbeast
Sencha Test Nylas N1 AirTame GitKraken Jibo Gif Maker

53. © 2016 Priramo53
Roadmap
Present state and future scope of improvement

54. © 2016 Priramo54
Electron Downloads
500K
1M
1.2M
4.23.2015
Atom Shell get
renamed to Electron
2016

55. © 2016 Priramo55
Github Stats as of now
8 branches
11,000+ commits
248 releases
450+ contributors
4,000+ forks
300+ open issues
10+ open pull requests
1,700+ watchers
35,900+ stars
4,500+ closed issues
2,300+ closed pull requests
and counting…

56. © 2016 Priramo56
Items in line
Chrome Web Push support.
Google Cast (Chromecast) in Electron.
Better support for Linux ARM machines.
Implementation of V8 inspector '--inspect‘.
Enhancements of dialog and menu management.
APIs to control system's onscreen keyboard.
Feature to add header and footer content for PDF.
Run electron renderers inside chromium sandbox.
And many more…

57. © 2016 Priramo57
References
Chromium
http://blog.chromium.org/
https://www.chromium.org/developers/design-documents
https://chromium.googlesource.com/chromium/src/+/lkgr/docs
Node.js
https://en.wikipedia.org/wiki/Node.js#Technical_details
https://nodejs.org/api/
http://blog.modulus.io/absolute-beginners-guide-to-nodejs
V8 JavaScript Engine
http://v8-io12.appspot.com/
http://thibaultlaurens.github.io/javascript/2013/04/29/how-the-v8-engine-works/
https://en.wikipedia.org/wiki/V8_(JavaScript_engine)
https://github.com/eclipsesource/j2v8

58. © 2016 Priramo58
Resources
Electron
http://electron.atom.io/
https://github.com/sindresorhus/awesome-electron
Discuss: https://discuss.atom.io/c/electron
Slack: http://atom-slack.herokuapp.com/
@ElectronJS: https://twitter.com/ElectronJS
Email: electron@github.com
https://app.pluralsight.com/library/courses/electron-playbook/table-of-contents
https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658
https://www.toptal.com/javascript/electron-cross-platform-desktop-apps-easy
Study Materials

59. © 2016 Priramo59
Most things were
Before they became
EASY