This document discusses building cross-platform applications using Electron. Electron allows you to create desktop applications using JavaScript, HTML, and CSS. It works by using Chromium and Node.js, allowing you to build the app using web technologies and then package it as a native application for various platforms like Windows, Mac, and Linux. The document covers how to set up an Electron project, the underlying architecture involving the main and renderer processes, how to debug apps, and when Electron may or may not be a good fit for a project.

1. ELECTRON
CROSS PLATFORM APPLICATIONS WITH

2. STARTING
I WANT... BUT I DON'T KNOW HOW TO START

3. CROSS PLATFORM IT'S EASY
YES, YOU CAN!

4. JS + HTML + CSS
HAVE YOU WORKED WITH WEB? YOU'RE WINNER!

5. ELECTRON
WHAT'S INSIDE?
OS
ELECTRON
RM

6. HOW TO
START
$ npm install electron
Electron 2.0.5
Node 8.9.3
Chromium 61.0.3163.100

7. HOW TO
START
$ npm run electron:start
"scripts": {
"electron:start": "electron ."
}
Upgrade the package.json

8. HOW TO

9. ARCHITECTURE
WHAT'S UNDER THE HOOD?
Chromium
Main Process
Renderer Process Renderer Process Renderer Process

10. ARCHITECTURE
COMMUNICATION
Chromium
IPC
(Inter Process Communication)
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.sender.send('asynchronous-reply', 'pong')
})
const { ipcRenderer } = require('electron')
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

11. ARCHITECTURE
ADVANTAGES
1. Integration with any JS framework
2. Easy debugging & profiling
3. Generate Installers
4. Native menus, dialogs, notifications, ...
5. Automatic updates (Squirrel)

12. ARCHITECTURE
DISADVANTAGES
1. Slower than Native
2. Limited capability
3. Resource burning
4. Has many nuances related with JS

13. ELECTRON IS POPULAR
THE APPS WHICH USE ELECTRON
DockStation Skype Discord Visual Studio Code Slack

14. USE OR NOT TO USE. THAT IS THE QUESTION
ELECTRON IS RECOMMENDED IF
1. You know JS, HTML, CSS
2. You don't have money
3. You don't have much time
4. You don't have human resources
5. You have CRaZY ArCHiTEcT!!11

15. ADDITIONAL INFO
LINKS
https://electronjs.org/
https://egghead.io/courses/build-a-desktop-application-with-electron
https://github.com/chentsulin/electron-react-boilerplate
OFFICIAL SITE
https://electronjs.org/docs
FAST START (COURSE)
BOILERPLATE (BASED ON REACT)

16. THANK YOU!
IGOR KOZLOVSKY
igor@dockstation.io
https://github.com/igor-lemon
https://dockstation.io