1.일렉트론이란? + NW.js vs. Eelectron 2.중요점 3.설명 4.선행요구사항 5.구조 6.Main Process 7.Renderer Process 8.쉽게 이해하기 9.IPC 10.전체적인 흐름 11.Package 12.시작하기 13.참고 14.THANK YOU

1. 일렉트론(Electron)
2017. 12.
정주기
jju.ki@hotmail.com

2. 1. 일렉트론이란? + NW.js vs. Eelectron
2. 중요점
3. 설명
4. 선행요구사항
5. 구조
6. Main Process
7. Renderer Process
8. 쉽게 이해하기
9. IPC
10. 전체적인 흐름
11. Package
12. 시작하기
13. 참고
14. THANK YOU
목 차

3. JavaScript, HTML, CSS로 이뤄진 데스크탑 애플리케이션 오픈소스 프레임워크
GITHub에서 Atom 에디터를 만들 때 활용한 Electron이라는 Web기반 크로스
플랫폼 기술을 공유(open source project, MIT License)
NodeJs 및 기본적인 웹개발 지식이 있다면 진입장벽이 낮다는 장점
(웹개발자가 데스크톱앱 개발도 가능하다는 의미)
한번의 작성으로 여러 플랫폼에서 구동이 가능하다는 장점
(Windows OS, Mac OS, Linux)
인스톨과 업데이트를 신경 쓸 필요가 거의 없다는 장점
배포시 실행 파일 OS에 맞게 생성 (ex. electron.exe, electron.app, electron)
현재 다양한 애플리케이션이 제작 – Atom, Visual Studio Code, Slack,
GitHub Desktop, WorkPress.com, Discord 등등
(https://electronjs.org/apps 참조)
1. What is Electron?

4. 1. What is Electron?
Project가 안정적이지 못하다는 단점
주요 major버그들은 공통적으로 존재(Atom, Slack 등등)
전통적인 데스크톱 앱이 아니므로 제약이 많음
(Electron에서 OS별 API를 지원해야 함)

5. 기타 추가 정보
API docs - https://electronjs.org/docs/api
가이드 - https://electronjs.org/docs/tutorial
깃헙 - https://github.com/electron/electron
개발툴 정보(Nodejs)
http://kuimoani.tistory.com/entry/Nodejs-
%EA%B0%9C%EB%B0%9C%ED%88%B4-%EB%B9%84%EA%B5%90
1. What is Electron?

6. NW.js(node-webkit) – http://blog.hazard.kr/archives/tag/electron 발췌
Electron 비교
NW.js 장점
- 초보자에게도 쉬운 접근성
- 크롬 확장 및 API 지원
- nwjc를 통해 지적 재산권 보호 지원 기능(소스 코드 보호)
- 키오스크, 항상위, 메뉴, 투명화 등 기본기능 지원
* 키오스크 - 브라우저에 있는 단추바, 메뉴, 창 때문에 웹 페이지가 좁아 보인
다면 kiosk 모드를 이용하면 된다. 이 모드를 선택하면 많은 공간을 차지하는
브라우저에 모든 요소들 툴바, 메뉴, 보더를 사라지게 한다.
1. NW.js vs. Electron

7. NW.js(node-webkit) – http://blog.hazard.kr/archives/tag/electron 발췌
Electron 비교
NW.js 단점
- 크롬의 대부분기능을 담아 무거움
- 자체적으로 앱 패키징이 없기 때문에 타 모듈 등을 사용해야 함
- 소스코드 보호기능이 성능을 약 30% 하락시킴
- 피드백이 느림(github issue피드백 기준 평균 7일)
1. NW.js vs. Electron

8. NW.js(node-webkit) – http://blog.hazard.kr/archives/tag/electron 발췌
Electron 비교
Electron 장점
- 크롬의 핵심 기능만 넣었기 때문에 가벼움
- 앱의 Hang 및 Crash 처리를 자체 지원
- HTML5 및 ECMAScript6등 최신 기술을 가장 빠르게 지원
- 자체적으로 쉽게 사용가능한 앱 패키징 및 업데이트 모듈 지원
- 항상 위, 메뉴, 투명화 등 기본적으로 앱에 필요한 기능 지원
- 절약 모드를 무력화 하는 API 및 웹 표준 DRM 등 더 다양한 기능 지원
1. NW.js vs. Electron

9. NW.js(node-webkit) – http://blog.hazard.kr/archives/tag/electron 발췌
Electron 비교
Electron.js 단점
- 크롬 확장 미지원
- 소스보호 기능 없음(퍼포먼스 이슈로 공식적으로 지원할 예정 없음)
1. NW.js vs. Electron

10. 일렉트론을 이용하여 개발된 프로그램
윈도우스토어, 애플앱스토어 (PC) 등 배포가능
브라우저 샌드박싱 정책으로 웹에서 접근되지 않는 부분도 접근이 가능함
일렉트론 역사(위키백과)
2013년 4월 11일, 일렉트론은 아톰 셸로 시작되었다.
2014년 5월 6일, 아톰과 아톰 셸은 MIT 라이선스와 더불어 오픈 소스로 되었다.
2015년 4월 17일, 아톰 셸은 일렉트론으로 이름이 바뀌었다.
2016년 5월 11일, 일렉트론은 버전 1.0에 도달하였다.
2016년 5월 20일, 일렉트론은 패키지된 앱을 맥 앱 스토어로 제출할 수 있게 허용하였다.
2016년 8월 2일, 일렉트론 앱의 윈도우 스토어 지원이 추가되었다.
1. What is Electron?

11. 2. Why is this important?
전형적인 데스크탑 애플리케이션 각 OS별 네이티브 랭귀지로 쓰여짐
이는 세가지 애플리케이션(OS별)이 만들어진다는것을 의미
Electron은 웹 랭귀지를 이용하여 한번의 작성으로 개발 가능하다는것을 의미

12. 3. How, even?
Electron은 크게 3가지의 조합으로 이루어져 있다
Chromium, Node.Js 그리고 Native APIs(for three systems function)
예를 들어 파일 대화창, 알림, 아이콘 등등
#Chromium – 오픈소스 웹 브라우저 프로젝트로 구글 크롬은 크로미엄 코드를
사용하여 개발된다. 크로미엄의 이름은 금속 원소인 크롬에서 따왔다.

13. 4. Prereqs
Electron을 이용한 개발을 하기 앞서 먼저 두가지 경험이 필요하다.
하나는 웹사이트 개발, 다른 하나는 JavaScript
먼저 HTML, CSS, JS를 익히고 Node를 설치하면 된다.

14. 5. Structure of an Electron application
Electron은 Main Process와 Renderer Process로 나뉘어져 있다. Main Process
는 Node.js 기반으로 Node.js 모듈을 사용할 수 있으며 쉽게 back-end라고 할
수 있다. Renderer Process는 chromium 브라우저에 보이게 되는 웹페이지이며
front-end영역이라고 보면 된다.

15. 6. Main Process
Main Process는 electron app의 시작점이 된다. 이것은 앱의 시작부터 종료까
지의 life를 관리한다. 그리고 Renderer Process를 생성하며 native 요소들을 호
출한다.

16. 7. Renderer Process
Renderer Process는 앱의 브라우저 윈도우이다. Main process와 다르게 이것
은 여러 개의 요소들이 독립적으로 존재할 수 있다. 또한 히든 처리가 가능하
여 백그라운드 처리가 가능하게 해준다. 주로 index.html 형태의 이름으로 되어
있다. 이것들은 전형적인 HTML파일이지만 기타 웹 브라우저와 다르게
Electron안에서 전체적인 Node API를 사용할 수 있다.

17. 8. Think of it like this
크롬(혹은 다른 웹브라우저)에서 각 탭들과 웹페이지가 있다고 생각하면 크롬
을 Main Process 각 웹페이지 탭을 rendere process라고 생각하면 된다. 하나
의 웹페이지 탭을 닫거나 새로 실행한다 하더라도 크롬은 여전히 동작하고 있
다.

18. 9. IPC
Main과 Renderer process들은 서로 역할이 다르므로 통신이 필요하다. 그렇기
때문에 각 IPC(interprocess communication)가 존재한다. 이 IPC를 이용하여 메
시지를 주고 받는다.

19. 10. Put it all together
Node 앱들과 마찬가지로 Electron 앱들도 package.json 이라는 파일을 사용한
다. 여기에는 main process의 위치를 정의하고 Electorn은 앱이 실행될때 해당
위치를 찾는다. 그리고 main process에서 renderer process를 만들때 IPC를 이
용하여 메시지를 주고 받는다.

20. 11. Packging
앱을 완성했을때 electron-packager라는 커맨드라인툴을 이용하면 된다.
그리고 package.json파일을 앱의 package에 추가해줘야 한다.

21. 12. Get started
1. Nodejs.org에서 node설치하기
2. 윈도우 cmd > node –v 설치되었는지 버전확인
3. Nodejs가 설치되었다면 npm명령어를 이용하여 electron 설치
4. C:workspacenodejselectron 해당경로에 디렉토리 생성
5. C:workspacenodejselectron>npm -g install electron-prebuilt 실행
6. C:workspacenodejselectron>npm init

22. 12. Get started
시작될 js명

23. 12. Get started
// index.js
const electron = require('electron') // 일렉트론 모듈
const app = electron.app // 앱 생명주기 조작 모듈
const BrowserWindow = electron.BrowserWindow // 네이티브 브라우저 창을 만드는 모듈.
// 모든창이 닫혔을때의 이벤트
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
// 일렉트론 초기화완료 및 브라우저 생성 준비완료 이벤트
app.on('ready', function() {
// 새로운 브라우저 창을 생성
mainWindow = new BrowserWindow({width: 800, height: 600});
// 그리고 현재 디렉터리의 index.html을 로드합니다.
mainWindow.loadURL('file://' + __dirname + '/index.html');
// 선언한 윈도우창 닫기 이벤트
mainWindow.on('closed', function() {
// 윈도우 객체의 참조를 삭제합니다 보통 멀티 윈도우 지원을 위해
// 윈도우 객체를 배열에 저장하는 경우가 있는데 이 경우
// 해당하는 모든 윈도우 객체의 참조를 삭제해 주어야 합니다.
mainWindow = null;
});
});

24. 12. Get started
// index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<h1>Hello Electron World</h1>
</body>
</html>

25. 12. Get started
7. C:workspacenodejs>electron ./electron

26. 13. References
https://electronjs.org/
https://en.wikipedia.org/wiki/Electron_(software_framework)
https://creamycode.github.io/javascript/2016/10/18/Electron/
http://jlord.us/essential-electron/
http://idenrai.tistory.com/59

27. 14. END
THANK YOU