Desktop apps with Electron, for fun and profit

Slides from a talk I gave at an internal R&D event.

The objective was to give an overview and practical use cases for cross-platform applications built with Electron.

Links found in the slides

Slide 20
http://electron.atom.io/apps/
http://www.builtwithelectron.com/
http://electron.atom.io/docs/
http://jlord.us/essential-electron/
https://github.com/electron/electron/

Slide 21
https://blog.codinghorror.com/the-principle-of-least-power/

Transcript

1. DESKTOP APPS WITH ELECTRON for fun and profit Dhaya Benmessaoud Front-end Developer
2. MULTI-PLATFORM DEV
3. ELECTRON
4. ELECTRON Terminal ~/my-app
 $ npm start > my-app@0.0.1 start /Users/d.benmessaoud/my-app > electron .
5. ELECTRON
6. FEATURES npm run package
7. FEATURES npm run package package.json 1 2 3 4 5 6 7 8 9 10 ... "scripts": { "start": "electron ./app", "package": "npm run package:linux && npm run package:mac && npm run package:win", "package:linux": "build --linux", "package:mac": "build --mac", "package:win": "build --win --ia32 --x64" }, ...
8. ELECTRON
9. FEATURES
10. FEATURES
11. WORKFLOW main process
12. WORKFLOW main process app.js 1 2 3 4 5 6 const { app } = require('electron'); app.on('ready', () => { console.log('hello world'); });
13. WORKFLOW main process renderer process renderer process renderer process ipc
14. WORKFLOW main process renderer process renderer process renderer process app.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const { app, BrowserWindow } = require('electron'); app.on('ready', () => { const mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadURL(__dirname + '/app.html'); mainWindow.on('closed', () => { app.quit(); }); }); ipc
15. POPULARITY editors
16. POPULARITY productivity
17. POPULARITY communication
18. POPULARITY specialized tools
19. IN APPLICATION app.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const { app, shell } = require('electron'); const Feed = require('./feed'); const Notification = require('./notification'); app.on('ready', () => { Feed.on('new', (article) => { Notification.send({ title: article.title, content: article.author, icon: article.avatar, onclick: () => shell.openExternal(article.url), tray: app.tray }); }); });
20. FURTHER READING… Apps made with Electron
 http://electron.atom.io/apps/
 http://www.builtwithelectron.com/ Guides, API Reference
 http://electron.atom.io/docs/
 http://jlord.us/essential-electron/ Contribute
 https://github.com/electron/electron
21. Atwood’s Law, 1895 « Any application that can be written in JavaScript, will eventually be written in JavaScript » Notice and acknowledgments All product names, logos, and brands are property of their respective owners. All company, product and service names used in this presentation are for identification purposes only. Icons made by Dave Gandy, Freepik, Icomoon, Madebyoliver, TutsPlus, Yannick, from www.flaticon.com.