Transcription
2
What is Electron?3
4
5
6
7
Main/Browser ProcessIPCRenderer ProcessRenderer ProcessRenderer Process8
My first Electron App9
10
{"name": "my-app","version": "1.0.0","description": "A minimal Electron application","main": "main.js","scripts": {"start": "electron ."},"devDependencies": {"electron": " 1.8.2-beta.5"}}11
const { app, BrowserWindow} require('electron')const path require('path')const url require('url')let window nullfunction createWindow () {mainWindow new BrowserWindow({width: 800,height: 600,show: false,})mainWindow.loadURL(url.format({pathname: path.join( dirname, 'index.html’),protocol: 'file:’,slashes: true}))mainWindow.on('closed', function () {mainWindow null})}app.on('ready', createWindow)// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.12
!DOCTYPE html html head meta charset "UTF-8" title Hello World! /title /head body h1 Hello World! /h1 !-- All of the Node.js APIs are available in this renderer process. -- We are using Node.js script document.write(process.versions.node) /script ,Chromium script document.write(process.versions.chrome) /script ,and Electron script document.write(process.versions.electron) /script . script // You can also require other files to run in this processrequire('./renderer.js’) /script /body /html 13
const { ipcMain } require('electron');ipcMain.on('hello-async', (event, arg) {console.log(arg) // print eply', 'hello-main')});ipcMain.on('hello-sync', (event, arg) {console.log(arg)event.returnValue 'hello-main'});const { ipcRenderer } nc('hello-sync', 'hello-renderer')) // prints "hello-main"ipcRenderer.on('hello-async-reply', (event, arg) {console.log(arg) // prints "hello-main"});ipcRenderer.send('hello-async', 'hello-renderer');14
npm install npm start15
Features – Electron API16
17
18
19
20
Missing functionality?21
s://www.npmjs.com/package/node-gyp22
23
Security24
25
https://electronjs.org/docs/tutorial/security26
Microsoft and Electron27
28
29
30
31
Future of Electron32
33
Pros and Cons34
35
36
https://www.skype.com/en/38
39
able-as-a-snap-for-linux-users/40
All of the Node.js APIs are available in this renderer process. -- We are using Node.js script document.write(process.versions.node) /script , Chromium script document.write(process.versions.chrome) /script , and Electron script document.write(process.versions.electron)
