Successfully reported this slideshow.
Your SlideShare is downloading. ×

Building Cross Platform Apps with Electron

Ad

Create AmazingCross-
Platform Desktop Node Apps
with Electron
ViennaJS, June
@chrischinch

Ad

Use any of these?

Ad

What is it?
• From GitHub*
• JavaScript as a ‘desktop’
Application
• Version 1.0 released in May
*You might have heard of ...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 14 Ad
1 of 14 Ad

Building Cross Platform Apps with Electron

Download to read offline

Electron is a fantastic tool for creating cross-platform apps with HTML, CSS, and JavaScript that look and feel relatively native to the hosted Platform. In this presentation I'll give a quick overview of what's possible.

Electron is a fantastic tool for creating cross-platform apps with HTML, CSS, and JavaScript that look and feel relatively native to the hosted Platform. In this presentation I'll give a quick overview of what's possible.

More Related Content

Slideshows for you (19)

Building Cross Platform Apps with Electron

  1. 1. Create AmazingCross- Platform Desktop Node Apps with Electron ViennaJS, June @chrischinch
  2. 2. Use any of these?
  3. 3. What is it? • From GitHub* • JavaScript as a ‘desktop’ Application • Version 1.0 released in May *You might have heard of them
  4. 4. Install and Setup npm install electron-prebuilt -g brew install Caskroom/cask/electron
  5. 5. End result
  6. 6. For GUI fans
  7. 7. For CLI fans electron .
  8. 8. 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.
  9. 9. main.js const 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;
 });
 });
  10. 10. The app
  11. 11. Packaging • Create asar archive • Copy files into Electron app • Rename, distribute, etc… • Use 3rd party tool 👍
  12. 12. 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
  13. 13. Going native • Notifications • Recent documents • Menus • Progress bars, thumbnails, represented file, dock, System preferences…
  14. 14. Thank You! Chris Ward gregariousmammal.com @chrischinch Developer Relations & Technical Writer I have stickers and merchandise!

×