Electron 소개 및 릴리즈 정보

Tech Note 정보
카테고리: [ Miscellaneous ]
조회수: 3202

기다리던(?) Electron 1.0 이 2016년 5월 11일 릴리즈 되어   

간단히 소개하려고 보니..  벌써 1.2.7 버전이 릴리즈 되어 있네요 ^^;; 

버전에 더 올라가기 전에 Electron에 대하 소개합니다.

▒ What is Electron?

Electron은 HTML, CSS, Javascript를 이용한 cross-platform의 데스트탑 어플리케이션 개발 프레임워크(플랫폼) 정도로 정의할 수 있을것 같고, 

GitHub사에서 개발하고 있습니다.  




[ Electron 사이트 (http://electron.atom.io/) ]


 Electron은 다음과 같은 특징을 가지고 있습니다.
 

  • Electron은 원래 OSS로 개발하고 있던 텍스트 에디터(Atom)의 구축을 위해 개발된 OSS 프레임워크로 Node.js와 Chromium을 기발으로 실행환경과 API를 가짐

  • HTML5 기술을 사용하여 개발할 수 있고, Node.js 와 Chrominum에서 동작하기 때문에 Windwons나 Mac(OS X), Linux 등의 데스탑 어플리케이션을 쉽게 개발할 수 있음

  • 현재 Atom, Slack, Visual Studio Code, WordPress, Boost, Kiematic, Yeoman 등의 데스크탑 어플리케이션에서 사용되고 있으며, Google Play Music의 데스크탑 플레이어에서도 활용되고 있음.

  • Electron 릴리즈 버전은 '1.2.7', Electron로 개발된 어플리케이션에 대한 검증 및 디버그를 지원 하는 'Devtron'은 1.2.1, 테스트 프레임워크인 Spectron은 '3.2.6' 버전이 릴리즈 되어 있음 (2016년 7월 19일 기준)
     

- youtube 소개 동영상 : the hard parts made easy  (https://www.youtube.com/watch?v=8YP_nOCO-4Q&feature=youtu.be)

 

▒ Electron API Demo Application 

버전 1.0 릴리즈에 맞춰 Electorn API 데모 어플리케이션도 새로 제공되었고,  Electron API를 보기 편하고 학습하게 쉽게 바뀌었네요,


[ Electron API Demo Application ]

- Electon API Demos : https://github.com/electron/electron-api-demos

 

▒ Devtron

Chrome Developer Tools의 OSS 확장 기능으로 Electron 어플리케이션에 대한 검증 디버그, 트러블슈팅 등의 역할을 위해 개발되었습니다. 

  • Require graph, IPC monitor, Event inspector, App Linter 등으 기능 제공
    (자세한 설명은 아래 링크 참조 )

  • Devron 기능 : http://electron.atom.io/devtron/


[ Devtron ]

▒ Spectron

Electron 어플리케이션의 OSS 테스트 프레임워크
 

  • 다양한 시나리오와 환경에서 어플리케이션의 기능에 대한 동작확인 및 테스트를 빠르게 할 수 있도록 Electron API 전체를 지원하고 있음

  • 'ChromeDriver',. 'WebdriverIO' 를 기반으로 개발되었으며, 페이지 네비게이션, 탐색, 사용자 입력, JavaScript실행에 대한 API를 제공하고 있음
     


[ Spectron ]

 

▒ Electron 메카니즘

Electron은 Node.js와 Chromium으로 구성되어 있으며, 브라우저의 렌더링프로세스는 Chromium 이 담당하고, 내부에서 렌더링프로세스를 생성하거나 파일 입출력, 메인 프로세스는 Node.js가 담당한다.
 

  • 설정파일(package.json)에 메인이 되는 JavaScript 파일과 라이브러리 의존관계에 대한 정보 관리

  • 메인이 되는 JavaScript를 Main Process르고 부르며, 어플리케이션의 라이프사이클을 관리함

  • 메일 프로세스로부터 기동되는 프로세스는 Chromium을 이용한 웹피이지가 표시되며, 복수의 독립된 프로세스로 구동이 되며 Rederer Process 라고함

  • 프로세스간은 ipc모듈를 사용하여 프로세스 통신(IPC)을 함

[ Electron 메카니즘 ]

 

 Electron 을 사용하면, HTML+Javascript 기반으로 쉽게(?) Slack과 같은 어플리케이션을 만들수 있습니다.  

 오늘은 여기까지, 다음에는 Hello World & 간단한 어플리케이션을 개발하는 방법을 정리해볼꼐요. ; )