KotlinJS Overview-TwiceRound Project #001-

Kotlin Study 모임용

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)

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이 출동한다면 !?

Webpack- Web application bundling framework- KotlinJS로 Compile되면 kotlin lib js와 raw compiled js가 나옴.

- js 하나로 만들고 싶다.- minify, uglify하고 싶다.- 그래서 Webpack!

- gulp/grunt로는 단순 concat이지만 webpack으로는 bundling되어 encapsulize할 수 있음.

KotlinJS + Webpack

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/

대형 화재발생 ??????

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

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코드로 전환시 명시적으로 명명을 전환시킬 때 사용.

코드봅시다

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 이슈가 해결되나 했지만 그것은 안됨.

德業一致NEXT -

“Chrome API를 Kotlin에서 사용하기"