김태희(로토/Roto) [Travel Systems CX]
Coupang Web Developer
Hello!
Electron!
Travel CX
김태희 / 로토(roto)
what is this?
Simply put
Create a desktop application using Web technology
Apps
vs NW.js
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 startrequire .npmc config file.
electron-react-bolierplate
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
Q & A
Thank you!
Hello! electron!
By 김태희(로토/Roto) [Travel Systems CX]
