이름 : 김성훈 /Scotty Kim소속 : Studio XID

ProtoPie

Electron:Web developer 를 위한 Desktop Application 제작

1. Electron 101

1. Electron

• 2013 년 시작 (Atom shell)• Github 에서 공개

• Atom 에디터를 만들다 보니 Framework 가 생각보다 좋아서 프로젝트 분리 & 공개 .

• 상대적으로 활발한 커뮤니티 활동이 이루어지고 있고 , 빠른 개발이 특징 .• 2016 년 1.0 공개 ( 현재 1.4.x)

• 버전 업데이트가 빠른편• Node / Chromium 의 버전에 서브버전이 올라감

Desktop GUI Application 을 만들기 위한 Framework

2. Electron Framework 구조

main process renderer process

BrowserWindowBrowserWindow정보 획득

BrowserWindowMethod 호출

BrowserWindow 를 가져온다

실제 실행을 위한 구간

3. Hello World

index.js index.htmlpackage.js

* Based on https://github.com/sindresorhus/electron-boilerplate/tree/master/boilerplate

Package.js

index.js

index.html

Demo

( 배포용 - 영상보기 )

https://youtu.be/k57GHIwFuHY

4. 뭘로 공부하나요 ?

• 기본적으로는 Document 만 보면서도 충분히 개발이 가능 .• 검색팁 : Gxxgle Query 에 github ( 예 : github electron xxxx )• Slack 과 Microsoft 가 개발한 것 참고

• Slack 은 macOS 의 경우 Beta 부터• Github Electron 팀과 위 두개 회사가 굉장히 돈독한 관계를 가지고 있음• 주로 Meetup 을 두 회사의 사무실에서 개최• 서로 많은 의견을 주고 받고 있음 .• Document 에 언급 되지 않은 방식을 두 회사에서 사용할 때가 있음

보강 되어가는 Document site

2. Electron ✕ ProtoPie

ProtoPie

( 배포용 - 영상보기 )

https://youtu.be/4BmSKkLb-5c

1. Electron 을 사용하게 된 계기• 개발자들이 Web Service 특화• 초기 개발은 Cloud(SaaS) 로 개발• 시장 Target 은 북미 / 중국

• Feedback (1) : 실행이 안되요 - 지역적 packet loss, 보안에 따른 접속 문제 발생 .

• Feedback (2) : Confidential 문제• Offline Tool 로 전환이 필요

• 빠르게 우리 기술로 할 수 있는 방법은 ?• NW.js vs Electron

대다수 ProtoPie 개발진이 Web based

2. Electron 도입과 검토• 빠른 개발이 가능

• Chromium - 최신 기술 모두 도입이 가능• 브라우저에 따른 브랜드 & 버전에 대한 고려가 필요 없음

• 개방형 개발 플랫폼• 타사 Source 검토가 용이• 단점 : 역으로 자사 Source 도 개방이 됨

• Desktop App 이 가져야 할 기능• 많은 부분에서 Electron 에서 기능 제공 하나 , Undo / Rede 등은 직접 구축 해야

함 .• 디자이너 프로그램의 가져야할 숙명 : 이미지 용량 처리

3. 당면과제와 해결 방안• Source 보호는 어떻게 할 것인가 ?

• Asar 라는 압축 툴을 제공하나 , 압축 해제도 제공함 .• Service 가 아니라 Tool 을 판매해야 하는 업에는 치명적 .• Business Logic 을 최대한 Backend 로 옮기자 .• 그 후 , Backend 를 Binary 로 build 하자 .

• 무거운 Resource 처리는 어떻게 할 것인가 ?• Chrome 이 메모리는 많이 먹지만 , 그래픽 처리가 훌륭하다 .• 이미지 최적화 Logic 추가

• 다양한 Object 처리가 필요하다 .• 초기 Model 이 변경 될 가능성이 높아 Refactoring 이 자주 일어날 수 있음• Typescript 도입을 통한 Strict 한 check

3. 중요 Design Patterns

1. Event-based Asynchronous Pattern• 동시 다발적인 복잡한 계산이 필요한 경우가 있음• Business Logic 을 최대한 보호할 수 있음

BackEnd FrontEnd User

Logic 처리Event 처리

index.html

demo.js

index.js

( 배포용 - 영상보기 )

https://youtu.be/ffOYrX66rc8

2. Command Pattern• Client 는 UI 에 집중 , 입력값만 전달 .• Undo/Redo 구현

Client UI Do

Undo

RedoCommand

Queue

ExecuteCommand

demo.js

index.js

( 배포용 - 영상보기 )

https://youtu.be/sJGv_cuo6W4

3-1. Front-End Framework

• AngularJS or React• 자체 Model 을 가지고 있어 Binding 을 위한 작업이 필요• Logic 이 Client 에 의존 될 가능성이 있음• 전체적인 Pattern 에 맞게 하기 위해 Framework 에 손을 대야 할 수 있음

• 결론• ES6/7 의 기능으로 진행 : 브라우저에 최적화가 필요 없고 , 최신 기술을 활용

가능 .• Typescript 도입 : Strict 한 Rule 적용과 Refactoring 에 유리

Framework 의 선택

3-2. Front-End Framework

DOM 을 활용한 Architecture• 다양한 객체가 생성과 소멸을 반복적으로 한다 .• 모든 상황에 대응하는 Controller 가 상당히 커지거나 , Side Effect 가 우려됨• DOM 이 스스로 자신을 정의 하고 이벤트를 가지고 있을 방법이 없을까 ?

DOM Element

OriginalData

EventControll

er

CustomMethod

DOM 생성 시 독립 된처리가 가능할 수 있도록정의 하여 , 독립성 보장

demo.js

demo.js

( 배포용 - 영상보기 )

https://youtu.be/OtUbRcPcbPg

4. Debugging& 외부 디바이스 연결

1. Chrome Debugger & Devtron

• Chrome Debugger• 사용 방법은 일반적 Chrome 개발과 같음• Build 시에 활성화 되지 않도록 주의가 필요할 수 있음 .

• Devtron• Electron 에서 좀 더 자세한 Debugging 을 원할 때 사용• 호출 되는 Library 상태 확인 .• App 에서 활성화 된 Event 확인 .• IPC 모니터링 : 개인적으로 활용• Lint Checker

일반적인 Debugging

2. ProtoPie 에서 활용하는 방법• 한눈에 Raw 데이터를 보고 싶다

• 파일에서 열리는 데이터는 가공이 되어서 , Client 로 전달 됨 .

• 솔루션 : http server 를 활용 한다 .• 실시간으로 나한테 맞는 log 를 찍어보고 싶다 .(server dependency)

• 제공 되는 Tool 을 활용하기엔 한 눈에 들어오지 않을 수 있음• 솔루션 : Shell 에서 log 를 실시간으로 뽑을 수 있도록 개발 환경 구축

좀 더 자세하고 내부에 맞는 Debugging

3. ProtoPie Studio 와 외부 Device 연결• 평면화면에서가 아닌 실제 Device 에서 UX 는 다름 .

• 실제 Device 연결을 위한 방식• HTTP protocol 을 이용한 연결• USB 연결

• Electron 내부에 Server 를 구축하여 실험적인 작업이 가능• Debugging 의 경우 이러한 방식에 의해 부수적으로 생긴 결과물 .

실제 Device 를 활용한 Prototyping

5. Build & Deploy

1. EncloseJS

• Windows / macOS / Linux 를 지원한다 .

• Node.js 를 Binary 화 함으로 Source 를 상대적으로 보호할 수 있게 되었다 .

• 빠르고 쉽게 명령어 한 줄로 가능 .

• Document 가 굉장히 부족하다 .

• Old CPU 지원을 위한 Compile 옵션이 명기화 되어있지 않음 .( 메일로 알려줌 )

• 하지만 , 개발자의 Feedback 은 빠르고 지속적으로 업데이트를 해주고 있음 .

Node.js 를 각 플랫폼에 맞춰 Build 가 가능 하다

2. 개발 방식개발 시에는 Electron Node.js 를 활용 한다• 개발 시 실시간 build 가 힘드므로 , Eelectron 의 node.js 를 이용하여 개발• build 된 Binary 의 경우 Spawn 을 이용하여 I/O 통신을 한다 .• Dev 와 Build 의 환경이 다르므로 , build 후 테스트 필수 .

electron-app

dist/server

configProtoPieStudio

main sourceDEV

REAL server loader

3. 기본 Build 방식• electron-builder 를 이용한 방식 소개• Electron 초기 부터 지원하던 방식• Build 옵션이 상대적으로 편함• 사용법

• npm install 다운로드• Script 설정 : npm run dist

• build 옵션 설정

Package.js

( 배포용 - 영상보기 )

https://youtu.be/U8AdL8NQ67Q

4. 기본 Deploy 방식• 기본적인 Frame 은 제공 되고 있으나 기능이 적어 , 3rd party 를 이용해 자동화를 구

축 .• Auto update 도 제공됨 .

• Squirrel.Mac 방식을 활용 하고 있음 .(Window 도 유사한 방식 제공 )

기본은 제공 되나 , 3rd party 를 활용

ProtoPie Deploy ServerUpdate Check

DownloadAuto Install& update

5. 수정 Deploy 방식• 구축을 하였으나 , 상당수 지역에서 다운로드가 느림과 불편함 호소

• 원본 서버가 미국 . 아시아 지역으로 옮겨봐도 크게 개선 되지 않음 .• 다운로드 진행 상황을 알 수가 없다 .

• CDN 을 구축 ( 중국 기준 다운로드 속도 60~120 배 향상 )

ProtoPie Deploy ServerUpdate Check

Download Auto Install& update

CDN

File RequestDownload Info.

6. Summary

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/

Q&A

Thank You