Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

KotlinJS Overview - TwiceRound #001

177 views

Published on

GDG Seoul Kotlin Study 5분 발표자료

Published in: Internet
  • Login to see the comments

KotlinJS Overview - TwiceRound #001

  1. 1. KotlinJS Overview -TwiceRound Project #001- Kotlin Study 모임용
  2. 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. 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. 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. 5. KotlinJS + Webpack
  6. 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. 7. 대형 화재발생 ??????
  8. 8. KotlinJS + JQuery - IntelliJ의 Kotlin Plugin을 1.1 이상으로 업데이트 해야함. - external wrapper를 선언해서 ts로 정의된 type을 사용 가능하게함.
  9. 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. 10. 코드봅시다
  11. 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. 12. 德業一致 NEXT - “Chrome API를 Kotlin에서 사용하기"

×