2016 w3c conference #7 : electron, 웹 기술로 담아내는 데스크톱 애플리케이션

52
우리는 코드 없이도 쉽게 이야기 할 수 있다 W3C HTML5 Conference 2016 161207

Upload: -

Post on 08-Jan-2017

35 views

Category:

Technology


7 download

TRANSCRIPT

우리는 코드 없이도 쉽게 이야기 할 수 있다W3C HTML5 Conference 2016

161207

이웅재 프로토파이 / 소프트웨어 엔지니어

일렉트론,

웹 기술로 담아내는 데스크톱 애플리케이션

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

목차

자기 소개 및 ProtoPie 소개 (3분)

Electron 이해하기 (15분)

Electron 실무 활용 이슈 및 프로덕션 (10분)

Typescript 를 활용한 대규모 애플리케이션 개발 (2분)

우리는 코드 없이도 쉽게 이야기 할 수 있다

자기 소개

(現) 스튜디오 씨드 소프트웨어 엔지니어

(前) 브이터치 소프트웨어 엔지니어링 랩 팀장

(前) 두세번의 스타트업 대표

8년차 풀스택(?) 엔지니어

Electron + Typescript 로 데스크톱 애플리케이션 개발 중

11살 어린 아내와 살고 있음 (트레이드 마크로 밀고 있음)

우리는 코드 없이도 쉽게 이야기 할 수 있다

ProtoPie 소개

- 인터렉션 프로토타이핑 저작 도구

- 2016.12.05 - 2.3.0 버전 출시

- MacOS 용 저작 툴인 ProtoPie Studio 와

저작된 결과물을 볼수 있는 모바일 앱인 ProtoPie Player 로

구성되어 있습니다.

우리는 코드 없이도 쉽게 이야기 할 수 있다

ProtoPie 동영상

우리는 코드 없이도 쉽게 이야기 할 수 있다

웹 기술이란 ?

웹 애플리케이션을 개발할때 사용하는 여러가지 기술

HTML, CSS, Javascript…

브라우저

DOM

Canvas

SPA

React, Angular, Angular2, TypeScript…

우리는 코드 없이도 쉽게 이야기 할 수 있다

Electron 이해하기

- 웹기술을 이용하여 데스크톱 애플리케이션을 쉽게 만들 수 있다 !

- Atom 에디터를 만들기 위해 GitHub 에서 만든 프레임워크

- Do you know node-webkit ?

- Slack, Atom Editor, VS Code …

- 소스 관리하는 서비스를 하는 깃헙에서 만들고 관리한다면?

- 2016년 1.0 공개 후 현재 1.4.10

- electron-prebuilt (2016년 말 사라질 예정) => electron

우리는 코드 없이도 쉽게 이야기 할 수 있다

Electron vs nwjs (node-webkit)

우리는 코드 없이도 쉽게 이야기 할 수 있다

ES6 지원

우리는 코드 없이도 쉽게 이야기 할 수 있다

electron-prebuilt (X) => electron (O)

우리는 코드 없이도 쉽게 이야기 할 수 있다

일단 빠르게 그냥 해보는 겁니다.

라…라이브??…

우리는 코드 없이도 쉽게 이야기 할 수 있다

Quick Start

우리는 코드 없이도 쉽게 이야기 할 수 있다

Quick Start 주요 파일

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

Hello W3C

우리는 코드 없이도 쉽게 이야기 할 수 있다

Electron 프레임워크 구조

new BrowserWindow(이놈)

메인 프로세스

랜더러프로세스

랜더러프로세스new BrowserWindow(저놈)

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

Inter-Process-Communication

ipcMain - IpcRenderer

remote

우리는 코드 없이도 쉽게 이야기 할 수 있다

Native UI

tray, menu 등 OS Native UI

메인 프로세스에서만 사용 가능

우리는 코드 없이도 쉽게 이야기 할 수 있다

Electron 실무 활용 이슈

1. 용량 이슈 - 빈 어플리케이션 용량이 macOS 용 기준은로 111MB

2. 보안 이슈

3. 뷰 관리의 이슈 - React, Angular

4. 네이티브 모듈 사용

우리는 코드 없이도 쉽게 이야기 할 수 있다

Electron 실무 활용 이슈

1. 용량 이슈 - 빈 어플리케이션 용량이 macOS 용 기준은로 111MB

2. 보안 이슈

3. 뷰 관리의 이슈 - React, Angular

4. 네이티브 모듈 사용

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

Electron 실무 활용 이슈

1. 용량 이슈 - 빈 어플리케이션 용량이 macOS 용 기준은로 111MB

2. 보안 이슈

3. 뷰 관리의 이슈 - React?, Angular?

4. 네이티브 모듈 사용

우리는 코드 없이도 쉽게 이야기 할 수 있다

Electron 실무 활용 이슈

1. 용량 이슈 - 빈 어플리케이션 용량이 macOS 용 기준은로 111MB

2. 보안 이슈

3. 뷰 관리의 이슈 - React?, Angular?

4. 네이티브 모듈 사용

우리는 코드 없이도 쉽게 이야기 할 수 있다

Chrome Devtools

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

Devtron

1. 모니터링

2. 이벤트 체크

3. IPC 모니터링

4. Lint

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

Electron 프로덕션

1. 빌드 및 패키징

2. 인스톨러 적용

3. 저동 업데이트 처리

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

electron-packager

Package and distribute your Electron app with OS-specific bundles (.app, .exe etc)

via JS or CLI

우리는 코드 없이도 쉽게 이야기 할 수 있다

electron-builder

A complete solution

to package and build a ready for distribution Electron app

with “auto update” support out of the box

우리는 코드 없이도 쉽게 이야기 할 수 있다

우리는 코드 없이도 쉽게 이야기 할 수 있다

electron-release-server

우리는 코드 없이도 쉽게 이야기 할 수 있다

Typescript

왜 갑자기…

타입스크립트 ?? …

우리는 코드 없이도 쉽게 이야기 할 수 있다

메타 프로그래밍

컴파일러에게 프로그램 코드를 생성하도록 하는 방식

이러한 기법은 컴파일 시점에 많은 것을 결정하도록 하여,

런타임 시점의 오류를 사전에 확인할 수 있다.

우리는 코드 없이도 쉽게 이야기 할 수 있다

처음부터는 아닙니다.

처음엔 ES6 를 사용했습니다.

작업하는 파일이 수십개가 아니고 수백개

협업이 늘어나고

자바스크립트의 디버깅 이슈도 있다.

기존의 자바스크립에

strict 규칙을 사용하고 객체 지향적인 사고를 추가하며 설계

리팩토링에 용의

웹스톰과 함께 쓴다면 당신은 최고

감사합니다W3C HTML5 Conference 2016

161207

Q & A

우리는 코드 없이도 쉽게 이야기 할 수 있다