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!
- Slides: 30