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.
JavaScript and desktop apps
Short introduction to Electron environment
Piotr Kowalski
CTO@Brainhub
JavaScript ?
http://www.lingscars.com
// Load the http module to create an http server.
var http = require('http');
// Configure our HTTP server to respond with...
https://msdn.microsoft.com/en-us/library/bb384843.aspx
https://richnewman.wordpress.com/category/tabbed-document-interface/
ELECTRON!
OK, but how to start?
Necessary packages
npm install --save electron
Main process
Node API
Creating windows
Renderer process
UI
HTML
CSS
JavaScript
IPC
Resources extensive
tasks
Resources extensive
tasks
Creating windows
Main process
Node API
Renderer process
UI
HTML
CSS
JavaScript
IPC
Renderer proc...
app.js
const app = require('electron').app;
const createWindow = require('./createWindow.js');
app.on('ready', createWindo...
createWindow.js
const BrowserWindow = require('electron').BrowserWindow;
const path = require('path');
const url = require...
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World...
renderer.js
// react, knockout, favorite framework :)
renderer.js
// react, knockout, favorite framework :)
// COMMUNICATION with main process!
IPC - demo
Native modules in Electron
https://nodejs.org/en/download/releases/
Necessary packages
npm install --save-dev electron-rebuild
./node_modules/.bin/electron-rebuild
Distributing the app
Necessary packages
npm install --global electron-packager
electron-packager dist
Electron API
Electron API
● Accelerator
● app
● autoUpdater
● BrowserWindow
● clipboard
● Cookies
● crashReporter
● desktopCapturer
● d...
Thank you! :)
JavaScript and Desktop Apps - Introduction to Electron
Upcoming SlideShare
Loading in …5
×

JavaScript and Desktop Apps - Introduction to Electron

4,570 views

Published on

As presented at DevDuck #2 - JavaScript meetup for developers (www.devduck.pl)
-----
Looking for a company to build you an electron desktop app? www.brainhub.eu

Published in: Software
  • Login to see the comments

JavaScript and Desktop Apps - Introduction to Electron

  1. 1. JavaScript and desktop apps Short introduction to Electron environment
  2. 2. Piotr Kowalski CTO@Brainhub
  3. 3. JavaScript ?
  4. 4. http://www.lingscars.com
  5. 5. // Load the http module to create an http server. var http = require('http'); // Configure our HTTP server to respond with Hello World to all requests. var server = http.createServer(function (request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.end("Hello Worldn"); }); // Listen on port 8000, IP defaults to 127.0.0.1 server.listen(8000); // Put a friendly message on the terminal console.log("Server running at http://127.0.0.1:8000/"); https://howtonode.org/hello-node
  6. 6. https://msdn.microsoft.com/en-us/library/bb384843.aspx
  7. 7. https://richnewman.wordpress.com/category/tabbed-document-interface/
  8. 8. ELECTRON!
  9. 9. OK, but how to start?
  10. 10. Necessary packages npm install --save electron
  11. 11. Main process Node API Creating windows Renderer process UI HTML CSS JavaScript IPC Resources extensive tasks
  12. 12. Resources extensive tasks Creating windows Main process Node API Renderer process UI HTML CSS JavaScript IPC Renderer process Renderer process Renderer process
  13. 13. app.js const app = require('electron').app; const createWindow = require('./createWindow.js'); app.on('ready', createWindow); app.on('window-all-closed', function() { app.quit(); });
  14. 14. createWindow.js const BrowserWindow = require('electron').BrowserWindow; const path = require('path'); const url = require('url'); let mainWindow = null; module.exports = function createWindow() { mainWindow = new BrowserWindow({width: 1024, height: 768}); mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true, })); mainWindow.webContents.openDevTools(); mainWindow.on('closed', function() { mainWindow = null; }); }; module.exports.mainWindow = mainWindow;
  15. 15. index.html <!DOCTYPE html> <html> <head> <meta charset=”UTF-8”> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <button id=”some-button”></button> <div id=”some-div”></div> </body> <script> require(‘./renderer.js’); </script> </html>
  16. 16. renderer.js // react, knockout, favorite framework :)
  17. 17. renderer.js // react, knockout, favorite framework :) // COMMUNICATION with main process!
  18. 18. IPC - demo
  19. 19. Native modules in Electron
  20. 20. https://nodejs.org/en/download/releases/
  21. 21. Necessary packages npm install --save-dev electron-rebuild ./node_modules/.bin/electron-rebuild
  22. 22. Distributing the app
  23. 23. Necessary packages npm install --global electron-packager electron-packager dist
  24. 24. Electron API
  25. 25. Electron API ● Accelerator ● app ● autoUpdater ● BrowserWindow ● clipboard ● Cookies ● crashReporter ● desktopCapturer ● dialog ● DownloadItem ● EnvironmentVariables ● globalShortcut ● ipcMain/ipcRenderer ● Locales ● Menu, MenuItem ● net ● powerMonitor ● process ● systemPreferences ● Tray
  26. 26. Thank you! :)

×