This document provides an overview of the Electron framework for building cross-platform desktop applications using web technologies. It discusses Electron's motivation as addressing the need for cross-platform apps, its usage of web technologies like HTML, CSS, and JavaScript to build desktop UIs, and its integration of native OS capabilities. The document outlines Electron's architecture, deployment options, and ways to integrate existing code like C/C++, native shared libraries, and .NET code into Electron applications. Sample code is referenced to demonstrate key concepts.

1. Electron
Cross Platform desktop applications with Web Technologies

2. Agenda
 Motivation
 Introduction
 OS Interoperability
 Deployment Options
 Integrate legacy code

3. Motivation
On the need for going cross platform

4. History
Desktop
Mobile /
Tablet
Hybrid
Web ♥
Native
> 1990 > 2008 > 2011 > 2016
C/C++
Java
C#/Mono
later: Chrome Apps
Objective-C (iOS)
Java (Android)
C# (Windows Phone)
Cordova
Xamarin
React Native
PWA
Native Web Views
W3C Standards

5. Mobile OS Market Share
0
10
20
30
40
50
60
70
80
90
100
Android
iOS
Series 40
SymbianOS
Windows
BlackBerry OS

6. Desktop OS Market Share
0
10
20
30
40
50
60
70
80
90
100
Windows
OS X
Linux

7. One Codebase for Everything

8. Introduction
An overview of the Electron framework

10. What is Electron?

11. How does Electron work?

12. Some real world projects
MICROSOFT TEAMS
GITHUB DESKTOP
SLACK GITHUB ATOM
NYLAS N1 MICROSOFT VSCODE

13. Usage stats for Electron

14. Anatomy of an Electron application

15. Anatomy of an Electron application

16. Anatomy of an Electron application

17. Anatomy of an Electron application

18. Sample
Basic Electron application in JavaScript
- un-opinionated, lets you choose a
frontend framework that fits best for you
- shows code / structure to boot up a
minimal Electron application
- https://github.com/electron/electron-
quick-start

19. OS Interoperability
Jumping out of the browser’s sandbox

20. OS Integration
 Native Dialogs
 Clipboard
 Menu / Context Menu
 Desktop Capturer
 Notifications
 File System Access
 Databases
 Global Shortcut
 Power Save Blocker
 Tray Icons
 Recent Item List (Windows, macOS)
 Dock Item Menu
 TouchBar support (macOS)
 … (based on Node.js module system)
https://electron.atom.io/docs/

21. Electron API Demos
 The Electron API Demos app interactively
demonstrates the most important features
of the Electron API. See what's possible
with Electron with sample code and
helpful tips for building your app.
https://github.com/electron/electron-api-
demos

22. Deployment Options
Building, Packaging and Distributing it

23. Electron-Forge
Bootstrap project creation
(supports different templates)
Build and package your app
(including native modules)
Publish to the Cloud
(supports GitHub, S3)

24. Electron-Packager
Archive
Disk Image
Mac App Store
Archive
Installer
Windows Store
Archive
RPM / DEB
FlatPak

25. Sample
Build and Package an Electron Application
- Uses Electron-Forge to bootstrap an
Electron Application
- Configures Electron-Packager to build
and package the application
- https://electronforge.io/ /
https://github.com/electron-
userland/electron-packager

26. Integrate legacy code
I’ve already a library for that

27. C/C++
Sources
OS dependent
static-linked library
Native Build Tools
V8
JavaScript Wrapper
Node.js Runtime
Node.js JS Libs
JavaScript Application
Electron Process
C/C++ Source Code

28. Sample
Integrate existing C/C++ source code
- Build a native V8 module via NAN (C)
- Build a native V8 module via N-API (C++)
- Call the native V8 module from JavaScript
- https://github.com/nodejs/abi-stable-
node-addon-examples

29. Native shared libraries
V8
node-ffi
Node.js Runtime
Node.js JS Libs
JavaScript Application
Electron Process
OS dependent
shared library

30. Sample
Integrate existing native shared libraries
- Using node-ffi for declaring external
function definitions
- Mapping parameter types
- Call the native library from JavaScript
- https://github.com/node-ffi/node-ffi

31. .net Source Code / Libraries
V8
edge
Node.js Runtime
Node.js JS Libs
JavaScript Application
Electron Process
.net Library
CLR

32. Sample
Integrate existing .net source code /
libraries
- Using edge.js for calling .net source
code / referring to existing assemblies
- Call the .net code from JavaScript
- https://github.com/agracio/edge-js

33. Q&A
Now it’s your turn