Hello!
Electron!

Travel CX

김태희 / 로토(roto)

what is this?

Simply put

Create a desktop application using Web technology

Apps

https://electron.atom.io/apps/

vs NW.js

https://github.com/electron/electron/blob/master/docs-translations/ko-KR/development/atom-shell-vs-node-webkit.md

Tutorial

Your First Electron App

  • install node.js
mkdir hello_electron
cd hello_electron
npm init -y
npm install --save electron-prebuilt

Add main.js

const {app, BrowserWindow} = require('electron');

let win = null;

const createWindow = function(){
    win = new BrowserWindow({width: 900, height: 800});
    win.loadURL(`file://${__dirname}/index.html`);

    win.on('closed', () => {
        win = null;
    });

}
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
});

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
});

Add index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello! Electron!</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

Edit package.json

{
 ..
 main: "main.js",
 ..
}

Run!

node node_modules/electron-prebuilt/cli.js .

Simple way

git clone https://github.com/atom/electron-quick-start
cd electron-quick-start
npm install && npm start

require .npmc config file.

electron-react-bolierplate

https://github.com/chentsulin/electron-react-boilerplate

require .npmc config file.

how to module loading

commonjs
( https://webpack.github.io/docs/commonjs.html)

My experience

First try

  • CTA/PTA Desktop App

  • Very very very Simple(Just Webview)

  • avoid legacy browser issue (ex: IE 7, IE 8, IE 9)

But..

and second try

  • bali-e2e-test app

    • using node.js module

      • child_process

      • fs

      • url

      • path 

    • and client module

      • jquery

      • ansi-to-html

bali-e2e-test-app

main.js

script.js

index.html

style.css

bootstrap

Demo

Packaging

  •  Can be packaged as binary files for specific platforms
    • win(32 bit, 64bit)
    • mac
    • linux(32 bit, 64bit)

Another Document

https://github.com/electron/electron/tree/master/docs-translations/ko-KR

Q & A

Thank you!

Hello! electron!

By TaeHee Kim

Hello! electron!

Hello! electron!

  • 5,812

More from TaeHee Kim