GDG Seoul Kotlin Study 5분 발표자료

1. KotlinJS Overview
-TwiceRound Project #001-
Kotlin Study 모임용

2. TwiceRound ( https://github.com/nurinamu/twiceround - branch “kotlin”)
- 기존의 유명한 Chrome Extension인 “Momentum”에서 영감을 받아서 시작한
“TWICE” 덕질 Project.
- 기능
- 새 탭을 열 때마다 Twice 이미지 보여주기
- landscape / portrait에 맞춰 보기
- 원본 보기, dislike, 미리보기
- 원스 공지 Crawling (TBD)
- 현재는 Client만 만들어진 상태로 Server 없이 Direct로 GCSE(Google Custom Search Engine)
사용
- 하지만 quota 이슈와 배포 이슈(API Key 설정)로 Appengine 서버 필요해짐.
- 현재 TwiceRound 개발 환경은 Jquery + Chrome API + GCSE + Webpack
- 결과물
- “TWICERound” Chrome Extension(KotlinJS) + API Server(Kotlin + Spring : Google Appengine)

3. KotlinJS
- Kotlin JS Compiler가 Kotlin -> Javascript 로 만들어줌.
- 내가 원하는 스타일, 패턴으로 코딩하고 싶은데 JS를 다시 공부하기 싫을때 아주 좋음. ㅋ
- IntelliJ 에서 Kotlin Javascript Project 생성 가능
- CLI로도 가능. 하지만 난 pass
- Kotlin 1.1 에서 공식 지원 발표
- ECMA5.1 지원 -> ECMA2016 목표.
- 장점
- javascript 문법 잘 몰라도 kotlin 문법만 알면 됨.
- 단점
- java library import 하면 안됨.
- compile 된 소스를 다시 minify+uglify 해야함.
- 옵션이 있음 좋겠어 : Webpack이 출동한다면!?

4. Webpack
- Web application bundling framework
- KotlinJS로 Compile되면 kotlin lib js와 raw compiled js가 나옴.
- js 하나로 만들고 싶다.
- minify, uglify하고 싶다.
- 그래서 Webpack!
- gulp/grunt로는 단순 concat이지만 webpack으로는 bundling되어 encapsulize할 수 있음.

5. KotlinJS + Webpack

6. KotlinJS + JQuery
- JQuery : Javascript 개발의 절친
- kotlin.js 에서 jquery.Jquery로 지원함. (1.1에서 Deprecated)
- Kotlin : jq(“#id”) -> Javscript : jquery(“#id”)
- 하지만 ajax 등 추가 기능은 지원되지 않음.
- ts2kt를 이용하여 TypeScript를 Kotlin으로 변환하여 사용 (권장)
- http://kotlinlang.org/docs/tutorials/javascript/working-with-javascript.html
- http://definitelytyped.org/

7. 대형 화재발생
??????

8. KotlinJS + JQuery
- IntelliJ의 Kotlin Plugin을 1.1 이상으로 업데이트 해야함.
- external wrapper를 선언해서 ts로 정의된 type을 사용 가능하게함.

9. KotlinJS
- Dynamic Type
- dynamic modifier를 사용하면 kotlin의 validation을 skip하여 처리됨.
- javascript는 type free, attribute free. kotlin은 type strict, attribute strict. 두 언어는 상극
하지만 이것은 Magic Keyword 임.
- external interface
- 1.1 부터 지원되기 시작하였으며, js compile된 이후 js 코드와 연결을 위한 interface 선언으로
보면됨.
- JNI의 native modifier와 비슷한 느낌.
- @JsName , @JsModule annotation
- js compile코드로 전환시 명시적으로 명명을 전환시킬 때 사용.

10. 코드봅시다

11. KotlinJS Limitations
- JSON 전달이 안됨.
- javascript는 argument로 json object를 anonymous 선언으로 전달이 가능하지만 kotlin에서는
불가능함. 해결을 위해서는 따로 data class 선언을 해야함.
- 현재 이 이슈는 Issue로 되어있지만 언제 기능이 만들어질지는 모르는 일. data class를
만드는 것이 kotlin 문법에 맞다는 의견들이 다수임. 편의성이냐 철학이냐 그것이
문제로다.
- Type free 처리를 하다보니 결국 NPE safety가 깨짐.
- Kotlin 에서 validation을 하지 않게됨. 결국 javascript로 컴파일 되는 것이기 때문에 NPE가
발생하는 것은 아니지만 Java의 NPE safety만큼 Javascript에서 undefined error 이슈가
해결되나 했지만 그것은 안됨.

12. 德業一致
NEXT -
“Chrome API를 Kotlin에서 사용하기"