[123] electron 김성훈
Download as PPTX, PDF43 likes7,985 views
[123] electron 김성훈
[123] electron 김성훈
- 1. 이름: 김성훈/Scotty Kim 소속: Studio XID ProtoPie Electron: Web developer를 위한 Desktop Application 제작
- 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
- 6. Package.js
- 7. index.js
- 8. index.html
- 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
- 17. 1. Event-based Asynchronous Pattern • 동시 다발적인 복잡한 계산이 필요한 경우가 있음 • Business Logic을 최대한 보호할 수 있음 BackEnd FrontEnd User Logic 처리 Event 처리
- 18. index.html
- 19. demo.js
- 20. index.js
- 22. 2. Command Pattern • Client 는 UI에 집중,입력값만 전달. • Undo/Redo 구현 Client UI Do Undo Redo Command Queue Execute Command
- 23. demo.js
- 24. index.js
- 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 생성 시 독립 된 처리가 가능할 수 있도록 정의 하여, 독립성 보장
- 28. demo.js
- 29. demo.js
- 31. 4. Debugging & 외부 디바이스 연결
- 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 옵션 설정
- 39. Package.js
- 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.
- 43. 6. Summary
- 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/
- 45. Q&A
- 46. Thank You