Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Electron - Build cross platform desktop apps
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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!
  • DennyBiasiolli

    Feb. 9, 2017

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.

Views

Total views

378

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

9

Shares

0

Comments

0

Likes

1

×