Electron JS | Build cross-platform desktop applications with web technologies

Build cross platform desktop apps with JavaScript,
HTML, and CSS

Why we need ‘Desktop Applications’? [1/2]
3
● Secure
● To work ‘Offline’
○ On premises
○ We are ‘NOT CONSTANTLY CONNECTED’
● For professional level applications
○ Photoshop, AutoCAD etc.
● Hosting?

Why we need ‘Desktop Applications’? [2/2]
● Connect with peripheral devices & other local hardware
● Edit any local files
● Novice users - non tech savvy
4

Other Desktop App Development Tools
● JavaFX
● Qt
● Gtk+
● NW.js
● Kivy
● Lazarus
● Xojo
● Enyo
● Haxe
5

If you can build a website,
you can build a desktop app.
7

Electron
● Open source library
● Developed by GitHub - Led by Cheng Zhao
● Cross-platform desktop applications
● Use web technologies - HTML, CSS & JavaScript.
● Combines Chromium and Node.js into a single runtime
● Mac, Windows, and Linux
8

Atom Shell
Framework originally
written for Atom
GitHub's hackable text
editor
became
open-source Lorem ipsum dolor sit
amet, consectetur
Apps compatible with
Mac App Store
April 2013 May 2014 April 2015 May 2016 May 2016 August 2016
9
renamed as
Electron
Electron
v1.0.0
Windows Store
support

● Electron enables you to create desktop applications
with pure JavaScript by providing a runtime with rich
native (operating system) APIs.
● Electron is NOT a JavaScript binding to GUI libraries.
● Electron uses web pages as its GUI
○ “Chromium browser, controlled by JavaScript”
● Electron App: Web pages running in a browser that can
leverage your OS APIs.
11

It takes care of the hard parts.
So you can focus on the core of your application
12

● Enable auto update
○ Squirrel/Squirrel.Windows - installation/update framework
● Native Components
○ Create native application menus and context menus,
dialogs, system tray & notifications etc.
● Crash reporting
○ Submit crash reports to a remote server.
● Debugging & Profiling
○ Collect tracing data from Chromium's content module for
finding performance bottlenecks and slow operations.
13

Install Electron?
● Recommended: Install as a development dependency
○ Allows you to work on multiple apps with different Electron
versions
● Global Installation
● Proxies
● Custom Mirrors & Caches
● Customized
15

Install Electron as a development dependency
● npm
○ Package manager/ software registry
○ Open-source building blocks of code
(third party packages)
○ Install, update, share & distribute
● npm install --save-dev electron
16

● Create a new empty folder for your new Electron
application.
● Run npm init
● npm will guide you to create a basic package.json file
18

● Install electron:
○ npm install --save-dev electron
20

● Add a start script that instructs node to execute the
current package with electron runtime.
○ "start": "electron ."
22

Folder Structure
23
your-app/
|__packagage.json
|__main.js
|__index.html

1. package.json
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
24

2. main.js
const {app, BrowserWindow} = require('electron')
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadFile('index.html')
}
app.on('ready', createWindow)
25

3. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
26

Main Process
29
● Runs package.json's main script.
● The script that runs in the main process can display a
GUI by creating web pages.
● An Electron app always has one main process, but
never more.

Renderer Process
30
● Based on Chromium's multi-process architecture
● Electron uses Chromium for displaying web pages
● Each web page in Electron runs in its own process

31
● The main process creates web pages by creating
BrowserWindow instances.
● Each BrowserWindow instance runs the web page in its
own renderer process.
● When a BrowserWindow instance is destroyed, the
corresponding renderer process is also terminated.

32
● The main process manages all web pages and their
corresponding renderer processes.
● Each renderer process is isolated and only cares about
the web page running in it.

33
● In web pages, calling native GUI related APIs is not
allowed.
○ Managing native GUI resources in web pages is very
dangerous
○ It is easy to leak resources
● If you want to perform GUI operations in a web page,
the renderer process of the web page must
communicate with the main process to request that the
main process perform those operations.

Application Distribution
1. Download Electron's prebuilt binaries
2. Packaging
○ can be done manually
○ Third party packaging tool
■ electron-forge
■ electron-builder
■ Electron-packager
37

Pros [1/5]
● Electron Apps Are Similar to Web Apps
○ Relies entirely on web standards
■ HTML, CSS, JS
● Can focus on the core functionality
○ Electron already handles the hard part in software
development
38

Pros [2/5]
● Reuse of resources
○ Same team working on a web-application can easily
implement a desktop application.
○ Several things from the web-application can be
reused in the desktop app:
■ Business logic (services, helpers)
■ Design
■ General application structure
○ Saves time and money.
39

Pros [3/5]
● Chromium engine for rendering UI
○ Developer tools
■ Don’t have to think of an external debugger
■ easy to measure performance, conduct profiling or
detect memory leaks
○ Hot / Live reload
■ See changes instantly
○ Storage access
■ LocalStorage, SessionStorage, IndexedDB to persist
application state. 40

Pros [4/5]
● Provides various core functionalities:
○ Auto-update
○ crash reporter
○ installer creator
○ system-specific/native-ish features
■ Menu, system dialogs, file selection dialogs,
notifications, printer, etc
■ Shortcuts bindings
○ Open file manager & external links
○ Screenshots & PDF
41

Pros [5/5]
● Reuse of npm modules, out of the box
● No cross-browser compatibility issues
● No loading of remote assets (then no latency)
● Hardware Access
○ Keyboard shortcuts
42

Cons [1/2]
● JavaScript
● No built-in MVC
● Not as feature-rich or mature as NW.js
43

Cons [2/2]
● Size & Memory Usage!
○ Node JS + Chromium
○ Electrino - experimental featherweight alternative
● Cross Platform Builds?
○ If your app has native dependencies, it can be compiled only
on the target platform.
■ macOS code Signing works only on MacOS.
44

Resources for learning Electron
● electronjs.org/docs - all of Electron's documentation
● electron/electron-quick-start - a very basic starter Electron app
● electronjs.org/community#boilerplates - sample starter apps created
by the community
● electron/simple-samples - small applications with ideas for taking
them further
● electron/electron-api-demos - an Electron app that teaches you how
to use Electron
● hokein/electron-sample-apps - small demo apps for the various
Electron APIs
47

References
● https://electronjs.org/
● https://electronjs.org/docs/faq
● https://www.npmjs.com/package/electron
● https://slides.com/juliamaksimchik/electron-awesome
● https://www.tutorialspoint.com/electron/
● https://steemit.com/technology/@ryanbaer/getting-started-with-electron-pt-3-how
-the-hell-does-this-thing-work
● https://www.arroyolabs.com/2016/08/electron-and-cross-platform-applications/
● https://ourcodeworld.com/articles/read/259/how-to-connect-to-a-mysql-database
-in-electron-framework
48

Electron JS | Build cross-platform desktop applications with web technologies

Recommended

More Related Content

What's hot (20)

Similar to Electron JS | Build cross-platform desktop applications with web technologies (20)

More from Bethmi Gunasekara (6)

Recently uploaded (20)

Electron JS | Build cross-platform desktop applications with web technologies