3. 1. Electron
• 2013년 시작(Atom shell)
• Github에서 공개
• Atom에디터를 만들다 보니 Framework가 생각보다 좋아서 프로젝트 분리 &
공개.
• 상대적으로 활발한 커뮤니티 활동이 이루어지고 있고, 빠른 개발이 특징.
• 2016년 1.0 공개 (현재 1.4.x)
• 버전 업데이트가 빠른편
• Node / Chromium 의 버전에 서브버전이 올라감
Desktop GUI Application을 만들기 위한 Framework
4. 2. Electron Framework 구조
main process renderer process
BrowserWindow
BrowserWindow
정보 획득
BrowserWindow
Method 호출
BrowserWindow를 가져온다
실제 실행을 위한 구간
5. 3. Hello World
index.js index.htmlpackage.js
* Based on https://github.com/sindresorhus/electron-boilerplate/tree/master/boilerplate
10. 4. 뭘로 공부하나요?
• 기본적으로는 Document만 보면서도 충분히 개발이 가능.
• 검색팁 : Gxxgle Query 에 github (예 : github electron xxxx )
• Slack 과 Microsoft 가 개발한 것 참고
• Slack은 macOS의 경우 Beta 부터
• Github Electron 팀과 위 두개 회사가 굉장히 돈독한 관계를 가지고 있음
• 주로 Meetup을 두 회사의 사무실에서 개최
• 서로 많은 의견을 주고 받고 있음.
• Document에 언급 되지 않은 방식을 두 회사에서 사용할 때가 있음
보강 되어가는 Document site
13. 1. Electron 을 사용하게 된 계기
• 개발자들이 Web Service 특화
• 초기 개발은 Cloud(SaaS)로 개발
• 시장 Target은 북미/중국
• Feedback (1) : 실행이 안되요 - 지역적 packet loss, 보안에 따른 접속 문제
발생.
• Feedback (2) : Confidential 문제
• Offline Tool 로 전환이 필요
• 빠르게 우리 기술로 할 수 있는 방법은?
• NW.js vs Electron
대다수 ProtoPie 개발진이 Web based
14. 2. Electron 도입과 검토
• 빠른 개발이 가능
• Chromium - 최신 기술 모두 도입이 가능
• 브라우저에 따른 브랜드 & 버전에 대한 고려가 필요 없음
• 개방형 개발 플랫폼
• 타사 Source 검토가 용이
• 단점 : 역으로 자사 Source 도 개방이 됨
• Desktop App이 가져야 할 기능
• 많은 부분에서 Electron에서 기능 제공 하나, Undo / Rede 등은 직접 구축 해
야 함.
• 디자이너 프로그램의 가져야할 숙명 : 이미지 용량 처리
15. 3. 당면과제와 해결 방안
• Source 보호는 어떻게 할 것인가?
• Asar라는 압축 툴을 제공하나, 압축 해제도 제공함.
• Service가 아니라 Tool을 판매해야 하는 업에는 치명적.
• Business Logic을 최대한 Backend로 옮기자.
• 그 후, Backend를 Binary로 build 하자.
• 무거운 Resource 처리는 어떻게 할 것인가?
• Chrome이 메모리는 많이 먹지만, 그래픽 처리가 훌륭하다.
• 이미지 최적화 Logic 추가
• 다양한 Object 처리가 필요하다.
• 초기 Model이 변경 될 가능성이 높아 Refactoring이 자주 일어날 수 있음
• Typescript 도입을 통한 Strict 한 check
26. 3-1. Front-End Framework
• AngularJS or React
• 자체 Model을 가지고 있어 Binding을 위한 작업이 필요
• Logic이 Client에 의존 될 가능성이 있음
• 전체적인 Pattern 에 맞게 하기 위해 Framework에 손을 대야 할 수 있음
• 결론
• ES6/7의 기능으로 진행 : 브라우저에 최적화가 필요 없고, 최신 기술을 활용
가능.
• Typescript 도입 : Strict한 Rule 적용과 Refactoring에 유리
Framework 의 선택
27. 3-2. Front-End Framework
DOM을 활용한 Architecture
• 다양한 객체가 생성과 소멸을 반복적으로 한다.
• 모든 상황에 대응하는 Controller가 상당히 커지거나, Side Effect가 우려됨
• DOM이 스스로 자신을 정의 하고 이벤트를 가지고 있을 방법이 없을까?
DOM Element
Original
Data
Event
Controlle
r
Custom
Method
DOM 생성 시 독립 된
처리가 가능할 수 있도록
정의 하여, 독립성 보장
32. 1. Chrome Debugger & Devtron
• Chrome Debugger
• 사용 방법은 일반적 Chrome 개발과 같음
• Build 시에 활성화 되지 않도록 주의가 필요할 수 있음.
• Devtron
• Electron에서 좀 더 자세한 Debugging을 원할 때 사용
• 호출 되는 Library 상태 확인.
• App에서 활성화 된 Event 확인.
• IPC모니터링 : 개인적으로 활용
• Lint Checker
일반적인 Debugging
33. 2. ProtoPie에서 활용하는 방법
• 한눈에 Raw 데이터를 보고 싶다
• 파일에서 열리는 데이터는 가공이 되어서, Client 로 전달 됨.
• 솔루션 : http server를 활용 한다.
• 실시간으로 나한테 맞는 log를 찍어보고 싶다.(server dependency)
• 제공 되는 Tool을 활용하기엔 한 눈에 들어오지 않을 수 있음
• 솔루션 : Shell에서 log를 실시간으로 뽑을 수 있도록 개발 환경 구축
좀 더 자세하고 내부에 맞는 Debugging
34. 3. ProtoPie Studio 와 외부 Device 연결
• 평면화면에서가 아닌 실제 Device에서 UX는 다름.
• 실제 Device 연결을 위한 방식
• HTTP protocol을 이용한 연결
• USB 연결
• Electron 내부에 Server를 구축하여 실험적인 작업이 가능
• Debugging의 경우 이러한 방식에 의해 부수적으로 생긴 결과물.
실제 Device를 활용한 Prototyping
36. 1. EncloseJS
• Windows / macOS / Linux를 지원한다.
• Node.js를 Binary화 함으로 Source를 상대적으로 보호할 수 있게 되었다.
• 빠르고 쉽게 명령어 한 줄로 가능.
• Document가 굉장히 부족하다.
• Old CPU 지원을 위한 Compile 옵션이 명기화 되어있지 않음.(메일로 알려줌
)
• 하지만, 개발자의 Feedback은 빠르고 지속적으로 업데이트를 해주고 있음.
Node.js 를 각 플랫폼에 맞춰 Build가 가능 하다
37. 2. 개발 방식
개발 시에는 Electron Node.js를 활용 한다
• 개발 시 실시간 build가 힘드므로, Eelectron의 node.js 를 이용하여 개발
• build 된 Binary의 경우 Spawn을 이용하여 I/O 통신을 한다.
• Dev와 Build의 환경이 다르므로, build 후 테스트 필수.
electron-app
dist/server
configProtoPie
Studio
main sourceDEV
REAL server loader
38. 3. 기본 Build 방식
• electron-builder 를 이용한 방식 소개
• Electron 초기 부터 지원하던 방식
• Build 옵션이 상대적으로 편함
• 사용법
• npm install 다운로드
• Script 설정 : npm run dist
• build 옵션 설정
41. 4. 기본 Deploy 방식
• 기본적인 Frame은 제공 되고 있으나 기능이 적어, 3rd party를 이용해 자동화를
구축.
• Auto update도 제공됨.
• Squirrel.Mac 방식을 활용 하고 있음.(Window도 유사한 방식 제공)
기본은 제공 되나, 3rd party를 활용
ProtoPie Deploy Server
Update Check
Download
Auto Install
& update
42. 5. 수정 Deploy 방식
• 구축을 하였으나, 상당수 지역에서 다운로드가 느림과 불편함 호소
• 원본 서버가 미국. 아시아 지역으로 옮겨봐도 크게 개선 되지 않음.
• 다운로드 진행 상황을 알 수가 없다.
• CDN을 구축 (중국 기준 다운로드 속도 60~120배 향상)
ProtoPie Deploy Server
Update Check
Download Auto Install
& update
CDN
File Request
Download Info.
44. Summary
• Web 기술을 가진 개발자를 위한 Desktop App 제작
• 상용 서비스가 아니라면, 자신이 선호하는 기술쪽으로 개발 가능
• Node / HTML5 / React / AngularJS
• 사용 서비스의 경우 소스 보호에 대한 대비가 필요
• 최대한 Logic을 Node로 옮기고, EncloseJS를 활용
• Server를 기타 언어/플랫폼으로 Binary로 만드는 방식도 있음
• 발표 Demo Download
• https://github.com/ScottyKim/NaverDeview2016-Electron-Demo
• Electron Korea 소개
• http://www.meetup.com/electron-kr/