Download presentation
Presentation is loading. Please wait.
1
ELECTRON DESKTOP DEVELOPMENT FOR WEB DEVELOPERS
Chris Woodruff @cwoodruff #devsum17
2
Don’t forget to evaluate this session in the DevSum app!
3
DESKTOP DEVELOPMENT FOR WEB DEVELOPERS
ELECTRON DESKTOP DEVELOPMENT FOR WEB DEVELOPERS
4
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 Communication Apps Images and Pictures Social Media Audio/Video Conferencing Games
8
History of Electron January 2013 Project began at GitHub
9
May 2014 Project Open Sourced April 2015 Renamed Electron
10
June 2016 Released version 1.0.0 May 2017 Current version 1.6.8
11
Building Blocks for Electron
12
You can use all of the Node.js APIs
Core Features HTML CSS Javascript Web Standards You can use all of the Node.js APIs File System Windows Linux macOS iOS All Major OS Platforms Menus Dialogs Notifications Native OS Features
13
Core Features Native Installers Auto Updates Analytics Reporting
npm ecosystem Native Installers Using Squirrel for mcOS and Windows Auto Updates Analytics Reporting All the goodness of you expect from debugging in Chrome Debugging
14
What is inside Electron?
15
The Two Sides of Electron
Main Application Lifecycle Renderer Web Page Creates Node.js APIs IPC IPC DOM Node.js APIs Communicates Electron APIs Electron APIs
16
The Two Sides of Electron
Main App Renderer Web Page Renderer Renderer Renderer
17
DEMO
18
npm install –g electron
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" }
21
main.js 'use strict'; const electron = require('electron');
const app = electron.app; const BrowserWindow = electron.BrowserWindow; let mainWindow; function createMainWindow() { mainWindow = new BrowserWindow({ width: 600, height: 400 }); mainWindow.loadURL(`file://${__dirname}/index.html`); mainWindow.on('closed', function() { mainWindow = null; }); } app.on('ready', createMainWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } main.js
22
index.html <!doctype html> <html> <head>
<meta charset="utf-8"> <title>Electron App</title> </head> <body> <h1>Electron App</h1> <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
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...] electron-packager . --platform=win32 --arch=x64 --out=dist --overwrite --prune
25
Demos Advanced Events Menus DevTools IPC Testing Packaging
26
Applications built with Electron
3. Tweeten 2. GitBook Editor 4. Yeoman app 1. GitHub Desktop 5. Basecamp
27
10. Atom Editor 6. Postman 9. Visual Studio Code 7. Wordpress app 9. Slack
28
Resources Code for all demos at
29
Thanks for Attending Don’t forget to evaluate this session in the DevSum app Contact me: @cwoodruff Facebook/chris.woodruff
30
And…. Last but not least – don’t forget to evaluate this session in the DevSum app!
Similar presentations
![Introducing NativeScript [Pavel Kolev Software Telerik: a Progress company]](/24/7101017/big_thumb.jpg "Introducing NativeScript [Pavel Kolev Software Telerik: a Progress company]>")
