JavaScript and Desktop Apps - Introduction to Electron
4 likes4,901 views
The document provides a brief introduction to creating desktop applications using Electron and JavaScript, including setting up an HTTP server and creating windows. It outlines necessary packages, sample code for handling the main process and renderer process, and resources for further learning. Additionally, it lists Electron APIs and mentions the distribution of the app using electron-packager.
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! :)