ELECTRON DESKTOP DEVELOPMENT FOR WEB DEVELOPERS Chris Woodruff

ELECTRON DESKTOP DEVELOPMENT FOR WEB DEVELOPERS Chris Woodruff @cwoodruff@live. com #devsum 17

Don’t forget to evaluate this session in the Dev. Sum app!

ELECTRON D E S K T O P D E V E L O P M E N T F O R W E B D E V E L O P E R S

4 Why do we need to create desktop apps?

5 We still need desktop apps because… 1 People are not always connected to their company network or Internet 2 They would like to have better performance 3 There is a need due to privacy 4 There may be a very complex client need that requires making a desktop app

6 Business Needs for Desktop Apps Offline Some people like desktop app over Internet web apps Printers and other local hardware Sometimes just feels better Local files editing Social Marketing Analytics On-premise Kiosks

7 Some Ideas for Electron Apps Editors and Reading Apps Images and Pictures Audio/Video Conferencing Communication Apps Social Media Games

8 History of Electron Project began at Git. Hub January 2013

9 Project Open Sourced May 2014 Renamed Electron April 2015

10 Released version 1. 0. 0 June 2016 Current version 1. 6. 8 May 2017

11 Building Blocks for Electron

12 Core Features Web Standards File System All Major OS Platforms Native OS Features • Windows • Menus • CSS • Linux • Dialogs • Javascript • mac. OS • Notifications • HTML You can use all of the Node. js APIs • i. OS

13 Core Features Native Installers Auto Updates npm ecosystem Using Squirrel for mc. OS and Windows Analytics Reporting Debugging All the goodness of you expect from debugging in Chrome

14 What is inside Electron?

15 The Two Sides of Electron Renderer Main Application Lifecycle Node. js APIs Creates Web Page IPC DOM Node. js APIs Communicates Electron APIs

16 The Two Sides of Electron Renderer Web Page Main Renderer App Renderer

17 DEMO

18 Installation npm install –g electron

19 Structure package. json main. js index. html

20 package. json { "name" : "electron-app", "version" : "0. 1. 0", "main" : "main. js" }

main. js 'use strict'; const electron = require('electron'); const app = electron. app; const Browser. Window = electron. Browser. Window; let main. Window; function create. Main. Window() { main. Window = new Browser. Window({ width: 600, height: 400 }); main. Window. load. URL(`file: //${__dirname}/index. html`); main. Window. on('closed', function() { main. Window = null; }); } app. on('ready', create. Main. Window); app. on('window-all-closed', () => { if (process. platform !== 'darwin') { app. quit(); } }); 21

22 index. html <!doctype html> <head> <meta charset="utf-8"> <title>Electron App</title> </head> <body> <h 1>Electron App</h 1> <p>Node. js version <script>document. write(process. versions. node)</script></p> <p>Chrome version <script>document. write(process. versions. chrome)</script></p> <p>Electron version <script>document. write(process. versions. electron)</script></p> </body> </html>

23 Execution electron.

24 Packaging npm install –g electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags. . . ] electron-packager. --platform=win 32 --arch=x 64 --out=dist --overwrite --prune

25 Demos • Advanced Events • Menus • Dev. Tools • IPC • Testing • Packaging

26 Applications built with Electron 3. Tweeten 2. Git. Book Editor 1. Git. Hub Desktop 4. Yeoman app 5. Basecamp

10. Atom Editor 6. Postman 9. Visual Studio Code 7. Wordpress app 9. Slack

28 Resources Code for all demos at https: //github. com/cwoodruff/devsum 17_electron

Thanks for Attending Don’t forget to evaluate this session in the Dev. Sum app Contact me: www. chriswoodruff. com cwoodruff@live. com @cwoodruff Facebook/chris. woodruff

And…. Last but not least – don’t forget to evaluate this session in the Dev. Sum app!