[123] electron 김성훈

3,018 views

Published on

[123] electron 김성훈

Published in: Technology
1 Comment
33 Likes
Statistics
Notes
No Downloads
Views
Total views
3,018
On SlideShare
0
From Embeds
0
Number of Embeds
1,093
Actions
Shares
0
Downloads
86
Comments
1
Likes
33
Embeds 0
No embeds

No notes for slide

[123] electron 김성훈

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

×