JavaScript and Desktop Apps - Introduction to Electron

JavaScript and desktop appsShort introduction to Electron environment

Piotr KowalskiCTO@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 Hello World to all requests.var server = http.createServer(function (request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.end("Hello World\n");});

// Listen on port 8000, IP defaults to 127.0.0.1server.listen(8000);

// Put a friendly message on the terminalconsole.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/

ELECTRON!

OK, but how to start?

Necessary packagesnpm 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 processRenderer process

Renderer process

app.jsconst app = require('electron').app;const createWindow = require('./createWindow.js');

app.on('ready', createWindow);app.on('window-all-closed', function() {

app.quit();});

createWindow.jsconst 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!

IPC - demo

Native modules in Electron

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

Necessary packagesnpm install --save-dev electron-rebuild

./node_modules/.bin/electron-rebuild

Distributing the app

Necessary packagesnpm install --global electron-packager

electron-packager dist

Electron API

Electron API● Accelerator● app● autoUpdater● BrowserWindow● clipboard● Cookies● crashReporter● desktopCapturer● dialog● DownloadItem● EnvironmentVariables● globalShortcut● ipcMain/ipcRenderer

● Locales● Menu, MenuItem● net● powerMonitor● process● systemPreferences● Tray

Thank you! :)

JavaScript and Desktop Apps - Introduction to Electron

Software

Transcript of JavaScript and Desktop Apps - Introduction to Electron