ios app 개발 with react native + clojurescript

25
React Native 와 ClojureScript 와 와와와 iOS App 와와 2015.10.24 Clojure 와와와 와와 와와와

Upload: cheolhee

Post on 21-Jan-2017

874 views

Category:

Software


6 download

TRANSCRIPT

Page 1: iOS App 개발 with React Native + ClojureScript

React Native 와ClojureScript 를 조합한

iOS App 개발2015.10.24

Clojure 스터디 모임한철희

Page 2: iOS App 개발 with React Native + ClojureScript

자기소개• 스타트업의 Senior Programmer

• iOS 개발 총괄• Java, Swift, Objective-C

• 6502 Assembly, FORTH, Haskell, APL …

• finally, Clojure !!!

Page 3: iOS App 개발 with React Native + ClojureScript

진행 순서• iOS 에서 Clojure 를 ?

• React Native + ClojureScript + ?

• 예제 프로젝트 : React Native Duckie

• 결론 : 왜 Clojure 인가

Page 4: iOS App 개발 with React Native + ClojureScript

Q: 왜 iOS App 을 Clojure 로 ?A: 아직 newbie 라서요

Page 5: iOS App 개발 with React Native + ClojureScript

iOS App dev. with Clojure

1. Native App- RoboVM

2. Hybrid Web App - Cordova + ClojureScript

3. Hybrid Native App - React Native + ClojureScript

Page 6: iOS App 개발 with React Native + ClojureScript

RoboVM• JVM bytecode 를 ARM / x86 Native Code 로 변환• iOS / Android 앱 개발 툴 제공• lein-fruit 플러그인

하지만 ...

Page 7: iOS App 개발 with React Native + ClojureScript

What if ..

• 나는 지금 RoboVM 얘기를 신나게 하고 있었을 겁니다 .• ... 만약 Swift 가 없었다면 말이죠

Page 8: iOS App 개발 with React Native + ClojureScript

Hybrid App + ClojureScript

• 웹 기반이라면 ClojureScript 로 해결 가능• 검증된 하이브리드 앱 개발 방법론• 자료 풍부

하지만 ...

Page 9: iOS App 개발 with React Native + ClojureScript

개발은 시작도 안했는데 태클이• “ 모바일 웹은 느려”• “ 고객에게 최고의 사용자 경험을 제공함이 제 1 순위 고려 사항”• “ 당신이 책임질래 ?”

Page 10: iOS App 개발 with React Native + ClojureScript

React Native• Facebook 이 개발한 React(JS) 에서 파생된 오픈소스• JavaScript + JSX 로 개발• View 가 네이티브 방식으로 만들어진다 • “Learn Once , Write

Everywhere”

• Native App 개발 지식 필요

Page 11: iOS App 개발 with React Native + ClojureScript

React Native + ClojureScript

• React(JS) ClojureScript 인터페이스• Om• Reagent

• React Native 도 React(JS) 처럼 JavaScript기반이므로 Om / Reagent 둘 다 “사용”은 가능

Page 12: iOS App 개발 with React Native + ClojureScript

Early Adopters• React Native + ClojureScript 사례

- https://github.com/dmotz/natal : Om- https://github.com/chendesheng/ReagentNativeDemo

: Reagent - https://github.com/mfikes/reagent-react-native

: Reagent- http://cljsrn.org : 관련 정보 정리

Page 13: iOS App 개발 with React Native + ClojureScript

Reagent

• Om 보다 나중에 만들어졌다 ( JSX 도입 이후 )

• Om 보다 경량• Om 보다 간단 ( 상대적 )

• 아직 깔끔한 Bootstrap 은 없음

Page 14: iOS App 개발 with React Native + ClojureScript

결정 !• React Native + ClojureScript 사례

- https://github.com/dmotz/natal : Om- https://github.com/chendesheng/ReagentNati

veDemo Reagent

- https://github.com/mfikes/reagent-react-native : Reagent

- http://cljsrn.org : 관련 정보 정리

Page 15: iOS App 개발 with React Native + ClojureScript

example:React Native Duckie

Page 16: iOS App 개발 with React Native + ClojureScript

React Native Duckie

• Internet of Things

• BLE , Motion , Temperature Sensor

• 환경 변화에 반응➡ 탕온계 prototype 를 만들었습니다

Page 17: iOS App 개발 with React Native + ClojureScript

코드 리뷰

Page 18: iOS App 개발 with React Native + ClojureScript

개발 / 동작 환경• Xcode 7

• Atom

• Terminal

• iPhone 5S

• ReagentNativeDemo 를 개조• Trial & Errors

Page 19: iOS App 개발 with React Native + ClojureScript

React Native 프로젝트를 Reagent 로 바꾸기

• 뷰 컴포넌트 작성• 자바스크립트 변환• 네이티브 라이브러리 붙이기• React Native 플러그인 붙이기

Page 20: iOS App 개발 with React Native + ClojureScript

reagent 세팅• react-native init HelloWorld

• ReactNativeDemo 의 reagentnative 폴더를 복사• AppDelegate.m 수정 - 2 줄• lein cljsbuild auto

• Xcode 실행• core.cljs 편집

Page 21: iOS App 개발 with React Native + ClojureScript

프로젝트 파일• github 에 공개

https://github.com/cheolhee/ReactNativeDuckie

• 일부 코드는 변형 / 삭제됐음을 양해 바랍니다 .

Page 22: iOS App 개발 with React Native + ClojureScript

후기 : 왜 Clojure 인가

Page 23: iOS App 개발 with React Native + ClojureScript

왜 Clojure 인가• LISP : 검증된 고전 • 함수형 패러다임 • Java 자원 활용 가능 - 👍

• 문법이 심플 - 😮

• 스타트업의 개발자로서 , 재미짐

Page 24: iOS App 개발 with React Native + ClojureScript

Links

• https://facebook.github.io/react/

• http://facebook.github.io/react-native/

• https://github.com/clojure/clojurescript

• http://cljsrn.org

Page 25: iOS App 개발 with React Native + ClojureScript

감사합니다http://viz.co.kr