JavaScript and Desktop Apps - Introduction to Electron

JavaScript and desktop apps
Short introduction to Electron environment

// 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

https://msdn.microsoft.com/en-us/library/bb384843.aspx

https://richnewman.wordpress.com/category/tabbed-document-interface/

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 process
Renderer process
Renderer process

app.js
const app = require('electron').app;
const createWindow = require('./createWindow.js');
app.on('ready', createWindow);
app.on('window-all-closed', function() {
app.quit();
});

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;

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>

renderer.js
// react, knockout, favorite framework :)

renderer.js
// react, knockout, favorite framework :)
// COMMUNICATION with main process!

https://nodejs.org/en/download/releases/

Necessary packages
npm install --save-dev electron-rebuild
./node_modules/.bin/electron-rebuild

Necessary packages
npm install --global electron-packager
electron-packager dist

Electron API
● Accelerator
● app
● autoUpdater
● BrowserWindow
● clipboard
● Cookies
● crashReporter
● desktopCapturer
● dialog
● DownloadItem
● EnvironmentVariables
● globalShortcut
● ipcMain/ipcRenderer
● Locales
● Menu, MenuItem
● net
● powerMonitor
● process
● systemPreferences
● Tray

JavaScript and Desktop Apps - Introduction to Electron

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie JavaScript and Desktop Apps - Introduction to Electron

Ähnlich wie JavaScript and Desktop Apps - Introduction to Electron (20)

Mehr von Brainhub

Mehr von Brainhub (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

JavaScript and Desktop Apps - Introduction to Electron