building cross platform apps with electron
TRANSCRIPT
![Page 1: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/1.jpg)
Create Amazing Cross-Platform Desktop Node Apps with Electron
ViennaJS, June @chrischinch
![Page 2: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/2.jpg)
Use any of these?
![Page 3: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/3.jpg)
What is it?
• From GitHub*
• JavaScript as a ‘desktop’ Application
• Version 1.0 released in May
*You might have heard of them
![Page 4: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/4.jpg)
Install and Setup
npm install electron-prebuilt -g
brew install Caskroom/cask/electron
![Page 5: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/5.jpg)
End result
![Page 6: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/6.jpg)
For GUI fans
![Page 7: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/7.jpg)
For CLI fans
electron .
![Page 8: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/8.jpg)
An Electron project
index.html: The web page rendered by default.
main.js: Starts app and creates a browser window to render HTML.
package.json: Lists application dependencies, meta data and files needed.
![Page 9: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/9.jpg)
main.jsconst electron = require('electron'); const app = electron.app;const BrowserWindow = electron.BrowserWindow;var mainWindow = null; app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); }});app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadURL('file://' + __dirname + '/app/index.html'); mainWindow.on('closed', function() { mainWindow = null; });});
![Page 10: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/10.jpg)
The app
![Page 11: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/11.jpg)
Packaging
• Create asar archive
• Copy files into Electron app
• Rename, distribute, etc…
• Use 3rd party tool 👍
![Page 12: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/12.jpg)
Electron Packager
electron-packager
/Users/chrisward/Workspace/sp_electron MarvelBrowse
--platform=darwin --arch=x64 --asar --prune
—version=1.2.5
--out=/Users/chrisward/Workspace --overwrite
--icon=/Users/chrisward/Workspace/sp_electron/marvel-app.icns
![Page 13: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/13.jpg)
Going native
• Notifications
• Recent documents
• Menus
• Progress bars, thumbnails, represented file, dock, System preferences…
![Page 14: Building Cross Platform Apps with Electron](https://reader034.vdocument.in/reader034/viewer/2022052318/5871aaf11a28abda6a8b573b/html5/thumbnails/14.jpg)
Thank You!Chris Ward gregariousmammal.com @chrischinch Developer Relations & Technical Writer
I have stickers and merchandise!