JavaScript and Desktop Apps - Introduction to Electron
•
4 likes•4,893 views
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
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to JavaScript and Desktop Apps - Introduction to Electron
Similar to JavaScript and Desktop Apps - Introduction to Electron (20)
More from Brainhub
More from Brainhub (20)
Recently uploaded
Recently uploaded (20)
JavaScript and Desktop Apps - Introduction to Electron
- 1. JavaScript and desktop apps Short introduction to Electron environment
- 3. JavaScript ?
- 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
- 9. ELECTRON!
- 10. OK, but how to start?
- 11. Necessary packages npm install --save electron
- 12. Main process Node API Creating windows Renderer process UI HTML CSS JavaScript IPC Resources extensive tasks
- 13. Resources extensive tasks Creating windows Main process Node API Renderer process UI HTML CSS JavaScript IPC Renderer process Renderer process Renderer process
- 14. app.js const app = require('electron').app; const createWindow = require('./createWindow.js'); app.on('ready', createWindow); app.on('window-all-closed', function() { app.quit(); });
- 15. 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;
- 16. 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>
- 17. renderer.js // react, knockout, favorite framework :)
- 18. renderer.js // react, knockout, favorite framework :) // COMMUNICATION with main process!
- 19. IPC - demo
- 20. Native modules in Electron
- 22. Necessary packages npm install --save-dev electron-rebuild ./node_modules/.bin/electron-rebuild
- 24. Necessary packages npm install --global electron-packager electron-packager dist
- 25. Electron API
- 26. Electron API ● Accelerator ● app ● autoUpdater ● BrowserWindow ● clipboard ● Cookies ● crashReporter ● desktopCapturer ● dialog ● DownloadItem ● EnvironmentVariables ● globalShortcut ● ipcMain/ipcRenderer ● Locales ● Menu, MenuItem ● net ● powerMonitor ● process ● systemPreferences ● Tray
- 27. Thank you! :)