electron - build cross platform desktop applications

© 2016 Priramo© 2016 Priramo

ELECTRONBy Priyaranjan Mohanty

© 2016 Priramo2

Don’t Worry we are not going to talkQuantum Physics

This is something which we will be using to create

Desktop Applications

© 2016 Priramo3

But Why to create a

Desktop App ?

© 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

© 2016 Priramo5

OfflinePrinters, Devices & Other local hardwareOn-PremiseInternal, LOBEdit Local FilesApp StoreKioskDesktop > IntranetSometimes it “just feels right”

Some of the Business Needs

© 2016 Priramo6

Disconnected Data EntryEditorTime ManagementMedia PlayerEmail ClientMessaging, CollaborationMapping, Route PlannerSocial Media Client

And many more that you can think of …

Few Application IdeasBulk Media EditorFile Management, BackupDocument Generation, ReadingAudio, Video ConferencingGamesPersonal AssistantDatabase ClientCalendar

© 2016 Priramo8

Story of ElectronFeaturesArchitectureHello WorldHello UniversePotentialRoadmap

Up Ahead

© 2016 Priramo9

Story of ElectronThe journey of an idea to make things simple and easy.

© 2016 Priramo10

It all started with the search for

A foundation for AtomGithub needed a tool to build the text editor on – with JavaScript, HTML and CSS

© 2016 Priramo11

Path to Electron

node-webkitnw.js

Chromium EmbeddedFramework

Atom ShellElectron [now]

Cheng ZhaoLead Electron

DeveloperContributor to nw.jsGithub [ @zcbenz ]

Tokyo, Japan

© 2016 Priramo12

Journey of Electron so far

Project BeganJanuary 2013

Open SourcedMay 2014

Named ElectronApril 2015

Released API 1.0June 2016

© 2016 Priramo13

Formal Introduction

ElectronA framework for building cross platform desktop applications with web technology

© 2016 Priramo14

An Artist’s Impression of Electron

© 2016 Priramo15

FeaturesAll the cool things that are happened to be provided with electron to achieve the native behaviors.

© 2016 Priramo16

Core Features

Web TechnologyHTML, CSS, JS

Latest & GreatestAll the chrome

goodies

No Native SkillsUnless you want to

One BrowserDesign once

© 2016 Priramo17

Core Features

File SystemAll of Node.js

APIs

Three PlatformsWindows, Mac OS X,

Linux

Modulesnpm ecosystem

Native MenuDialogs &

Notifications

© 2016 Priramo18

Core Features

Windows InstallersNo Configuration

Automatic UpdatesMac & Windows with

Squirrel

Crash ReportingSubmit to Remote

Server

Debugging & ProfilingContent tracing by Chromium

© 2016 Priramo19

ArchitectureExplore the magic box of electron to understand the components and processes underneath

© 2016 Priramo20

5.3.332.37

6.5.0

1.4.0

53.0.2785.113

Under the Hood

© 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.

© 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.

© 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.

© 2016 Priramo24

The Two Processes

MainApplication Lifecycle

RendererWeb Page

Node.js APIs ipcElectron APIs

ipc DOM Node.js APIsElectron APIs

Creates

Communicates

© 2016 Priramo25

The Two Processes

MainRenderer

RendererRendererRenderer

App

Web Page

© 2016 Priramo26

The Two ProcessesChrome File Edit View

MainChromeRenderer

Each Tab

Older Versions

Newer Versions

© 2016 Priramo27

Hello WorldLet’s build the very first desktop application using electron and get started.

© 2016 Priramo28

Getting Started

package.json main.js index.html

© 2016 Priramo29

package.json

{"name" : "hello-world-

app","version": "0.1.0","main" : "main.js"

}

© 2016 Priramo30

main.js (Main Process)const electron = require('electron');const app = electron.appconst 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

})})

© 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>

© 2016 Priramo32

Global Electron

npm install –g electron

electron .

© 2016 Priramo33

Hurray !!!

© 2016 Priramo34

Power of Chrome to the App

© 2016 Priramo35

Hello UniverseDeep dive into the electron ecosystem

© 2016 Priramo36

Electron APIsMain ProcessappBrowserWindowDialogipcMainMenuItempowerSaverBlockersystemPreferencesTray and more …

Renderer ProcessdesktopCapturerFile ObjectipcRendererremotewebFrame<webview> Tagwindow.open function

Both ProcessclipboardcrashReporterEnvironment VariablesnativeImageProcessscreenshellSynopsis

© 2016 Priramo37

Hard Things Made Easyconst {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.

© 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')

© 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'

})

ipcMainCommunicate asynchronously from the main process to renderer processes.

© 2016 Priramo40

Hard Things Made Easy (ipc)ipcRendererCommunicate asynchronously from a renderer process to the main process.

// In renderer process (web page).const {ipcRenderer} = require('electron')

// prints "pong" to be returned from ipcMainconsole.log(ipcRenderer.sendSync('synchronous-message', 'ping'))

ipcRenderer.on('asynchronous-reply', (event, arg) => { console.log(arg) // prints "pong" })

ipcRenderer.send('asynchronous-message', 'ping')

© 2016 Priramo41

Electron Toolselectron-prebuiltInstall prebuilt Electron binaries for command-line use using npm.

electron-compileUse ES2015, CoffeeScript, LESS, SCSS in your app without a pre-compilation step.electron-packagerPackage and distribute your app.

devtronOfficial DevTools extension. Provides features to debug all electron components.spectronTest Electron apps using ChromeDriver.

© 2016 Priramo42

Bolierplateselectron-quick-startClone the repo to try a simple app.electron-boilerplateComprehensive boilerplate by szwacz which even generates installers.

bozonScaffold, run, test, and package your app.

SkelEktronA ready to go app template with some useful features built-in like logger, builder & updater etc.electron-react-boilerplateBoilerplate based on React and webpack.

© 2016 Priramo43

Useful ComponentsReact DesktopUI toolkit for macOS and Windows built with React.

cookiesAdds support for 'document.cookie'.

chrome-tabsChrome like tabs.

menubarHigh-level way to create a menubar app.

PhotonUI toolkit for building beautiful apps.

© 2016 Priramo45

PotentialInitially developed for GitHub's Atom editor, Electron has since been used to create applications by many.

© 2016 Priramo52


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

© 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…

© 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…

© 2016 Priramo57

ReferencesChromiumhttp://blog.chromium.org/https://www.chromium.org/developers/design-documentshttps://chromium.googlesource.com/chromium/src/+/lkgr/docs

Node.jshttps://en.wikipedia.org/wiki/Node.js#Technical_detailshttps://nodejs.org/api/http://blog.modulus.io/absolute-beginners-guide-to-nodejsV8 JavaScript Enginehttp://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

© 2016 Priramo58

ResourcesElectronhttp://electron.atom.io/https://github.com/sindresorhus/awesome-electron

Discuss: https://discuss.atom.io/c/electronSlack: http://atom-slack.herokuapp.com/@ElectronJS: https://twitter.com/ElectronJS

Email: [email protected]

https://app.pluralsight.com/library/courses/electron-playbook/table-of-contentshttps://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658https://www.toptal.com/javascript/electron-cross-platform-desktop-apps-easy

Study Materials