Scribd Logo
Upload

Welcome to Scribd!

  • Building Desktop Applications With Electron

    Uploaded by

    Raphael
    12 views41 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views41 pages

    Building Desktop Applications With Electron

    Uploaded by

    Raphael

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 41

    2

    • What is Electron?

    3
    4
    5
    6
    7
    Main/Browser Process

    IPC

    Renderer Process Renderer Process Renderer Process

    8
    • My first Electron App

    9
    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 = null

    function 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 process
    require('./renderer.js’)
    </script>
    </body>
    </html>

    13
    const { ipcMain } = require('electron');

    ipcMain.on('hello-async', (event, arg) => {


    console.log(arg) // print 'hello-renderer’
    event.sender.send('hello-async-reply', 'hello-main')
    });

    ipcMain.on('hello-sync', (event, arg) => {


    console.log(arg)
    event.returnValue = 'hello-main'
    });

    const { ipcRenderer } = require('electron');

    console.log(ipcRenderer.sendSync('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 start

    15
    • Features – Electron API

    16
    17
    18
    19
    https://electronjs.org/docs

    https://www.safaribooksonline.com/library/view/introducing-
    electron/9781491996041/
    https://github.com/electron-userland
    https://www.pluralsight.com/courses/electron-
    fundamentals

    20
    • Missing functionality?

    21
    https://github.com/paulcbetts/electron-rebuild
    https://www.npmjs.com/package/node-gyp

    22
    23
    • Security

    24
    25
    https://electronjs.org/docs/tutorial/security

    26
    • Microsoft and Electron

    27
    28
    29
    30
    31
    • Future of Electron

    32
    33
    • Pros and Cons

    34
    35
    36
    https://www.skype.com/en/

    38
    39
    https://snapcraft.io/
    https://snapcraft.io/skype
    https://insights.ubuntu.com/2018/02/01/skype-now-
    available-as-a-snap-for-linux-users/

    40

    You might also like