2016 w3c conference #7 : electron, 웹 기술로 담아내는 데스크톱 애플리케이션
TRANSCRIPT
우리는 코드 없이도 쉽게 이야기 할 수 있다
목차
자기 소개 및 ProtoPie 소개 (3분)
Electron 이해하기 (15분)
Electron 실무 활용 이슈 및 프로덕션 (10분)
Typescript 를 활용한 대규모 애플리케이션 개발 (2분)
우리는 코드 없이도 쉽게 이야기 할 수 있다
자기 소개
(現) 스튜디오 씨드 소프트웨어 엔지니어
(前) 브이터치 소프트웨어 엔지니어링 랩 팀장
(前) 두세번의 스타트업 대표
8년차 풀스택(?) 엔지니어
Electron + Typescript 로 데스크톱 애플리케이션 개발 중
11살 어린 아내와 살고 있음 (트레이드 마크로 밀고 있음)
우리는 코드 없이도 쉽게 이야기 할 수 있다
ProtoPie 소개
- 인터렉션 프로토타이핑 저작 도구
- 2016.12.05 - 2.3.0 버전 출시
- MacOS 용 저작 툴인 ProtoPie Studio 와
저작된 결과물을 볼수 있는 모바일 앱인 ProtoPie Player 로
구성되어 있습니다.
우리는 코드 없이도 쉽게 이야기 할 수 있다
웹 기술이란 ?
웹 애플리케이션을 개발할때 사용하는 여러가지 기술
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 프레임워크 구조
new BrowserWindow(이놈)
메인 프로세스
랜더러프로세스
랜더러프로세스new BrowserWindow(저놈)
우리는 코드 없이도 쉽게 이야기 할 수 있다
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. 네이티브 모듈 사용
우리는 코드 없이도 쉽게 이야기 할 수 있다
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
우리는 코드 없이도 쉽게 이야기 할 수 있다
메타 프로그래밍
컴파일러에게 프로그램 코드를 생성하도록 하는 방식
이러한 기법은 컴파일 시점에 많은 것을 결정하도록 하여,
런타임 시점의 오류를 사전에 확인할 수 있다.
우리는 코드 없이도 쉽게 이야기 할 수 있다
처음부터는 아닙니다.
처음엔 ES6 를 사용했습니다.
작업하는 파일이 수십개가 아니고 수백개
협업이 늘어나고
자바스크립트의 디버깅 이슈도 있다.
기존의 자바스크립에
strict 규칙을 사용하고 객체 지향적인 사고를 추가하며 설계
리팩토링에 용의
웹스톰과 함께 쓴다면 당신은 최고