ClojureScript 와 React Native 를 이용하여, 사물인터넷 기기와 App의 프로토타입 개발한 결과를 시연합니다. React Native 를 채택까지의 과정을 전개합니다. 왜 Clojure로 개발하는가? 대한 이야기. 소스 저장소 https://github.com/cheolhee/ReactNativeDuckie

1. React Native 와
ClojureScript 를 조합한
iOS App 개발
2015.10.24
Clojure 스터디 모임
한철희

2. 자기소개
• 스타트업의 Senior Programmer
• iOS 개발 총괄
• Java, Swift, Objective-C
• 6502 Assembly, FORTH, Haskell, APL …
• finally, Clojure !!!

3. 진행 순서
• iOS에서 Clojure를?
• React Native + ClojureScript + ?
• 예제 프로젝트 : React Native Duckie
• 결론 : 왜 Clojure인가

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

5. iOS App dev. with Clojure
1. Native App
- RoboVM
2. Hybrid Web App
- Cordova + ClojureScript
3. Hybrid Native App
- React Native + ClojureScript

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

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

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

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

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

11. React Native + ClojureScript
• React(JS) ClojureScript 인터페이스
• Om
• Reagent
• React Native도 React(JS) 처럼 JavaScript기반이므
로 Om / Reagent 둘 다 “사용”은 가능

12. Early Adopters
• React Native + ClojureScript 사례
- https://github.com/dmotz/natal : Om
- https://github.com/chendesheng/ReagentNativeD
emo : Reagent
- https://github.com/mfikes/reagent-react-native :
Reagent
- http://cljsrn.org : 관련 정보 정리

13. Reagent
• Om보다 나중에 만들어졌다 ( JSX 도입 이후 )
• Om보다 경량
• Om보다 간단(상대적)
• 아직 깔끔한 Bootstrap 은 없음

14. 결정 !
• 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 : 관련 정보 정리

15. example:
React Native Duckie

16. React Native Duckie
• Internet of Things
• BLE , Motion , Temperature Sensor
• 환경 변화에 반응
➡탕온계 prototype 를 만들었습니다

17. 코드 리뷰

18. 개발/동작 환경
• Xcode 7
• Atom
• Terminal
• iPhone 5S
• ReagentNativeDemo 를 개조
• Trial & Errors

19. React Native프로젝트를
Reagent로 바꾸기
• 뷰 컴포넌트 작성
• 자바스크립트 변환
• 네이티브 라이브러리 붙이기
• React Native 플러그인 붙이기

20. reagent 세팅
• react-native init HelloWorld
• ReactNativeDemo 의 reagentnative 폴더를 복사
• AppDelegate.m 수정 - 2줄
• lein cljsbuild auto
• Xcode 실행
• core.cljs 편집

21. 프로젝트 파일
• github에 공개
https://github.com/cheolhee/ReactNativeDuckie
• 일부 코드는 변형/삭제됐음을 양해 바랍니다.

22. 후기: 왜 Clojure인가

23. 왜 Clojure인가
• LISP : 검증된 고전
• 함수형 패러다임
• Java 자원 활용 가능 - 👍
• 문법이 심플 - 😮
• 스타트업의 개발자로서, 재미짐

24. Links
• https://facebook.github.io/react/
• http://facebook.github.io/react-native/
• https://github.com/clojure/clojurescript
• http://cljsrn.org

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