reactnative, flutter, ionic, nativescript

1. 모바일 크로스 플랫폼 비교
월간슬라이드 4월
부종민

2. 배경
기존의 서비스 리뉴얼 및 신규 서비스 개발용 크로스 플랫폼 필요성 대두
웹개발자, 안드로이드 개발자 비율 (4:1 또는 3:2 )
android에 특화된(ex: bluetooth, gyro sensor) 기능은 기존의 안드로이드 개발자가 진행.
view layer는 자바스크립트에 익숙한 웹개발자가 진행해도 되지 않을까하는 의견.
- 웹 프론트는 vuejs로 결정. 크로스플랫폼도 vuejs로 진행하면 하나만 알면 web에
서 app으로 허들이 적어 개발 생상성이 높아질 것이다에 기대감.
신규 서비스에서 ios도 개발이 필요하고 디바이스 특화 기능의 연동이 필요 없는 경우(일
반적인 service들 대부분 커버가능)

3. 이슈
- 기술 습득에 용이한가.
- android/ios 최소 지원 버전
- 사양이 낮은 디바이스의 경우 webview 기반의 프레임워크를 고민하지 않아야함.
- 신규 서비스의 경우?
- webview로 개발하면 web으로 개발하고 일반 브라우저로 접근할수도 있고 app으로 설치하고 접근이 가능하면서 두벌을 개발하
지 않아도 되는 장점이 있다.
- webview에서 android sdk를 사용한다면 굳이 web browser로 접근해야하나? 네이티브를 지원하는 크로스 플랫폼 도구가 나
은 선택지일 수 있다.
- javascript, vuejs로 개발환경를 통일한다? vs cross-platform 도구가 제공하는 개발 기술을 추가로 하느냐
- vue로 통일이냐 다른 기술을 추가로 쌓는것이냐.
- 크로스플랫폼에서 제공하는 theme는 어떤지. UI의 미려함. 디자인 수정의 용이함.
- 크로스플랫폼 도구의 향후 발전 가능성(개발 진행, 커뮤니티의 성숙도,)
- 개발 도구의 편리함(설치, preview, live-reloading, 번들링, 릴리즈, codepush)

4. 모바일 플랫폼 조사

5. Awesome-Cross-Platform-Apps

7. native cross-platform framework

8. hybrid cross-platform framework

9. 선택

10. native cross-platform framework
hybrid cross-platform framework

11. Native cross-platform VS Hybrid cross-platform
네이티브
api
네이티브
뷰
해석
엔진
api
view webviewjs
네이티브
api
html css
bridge

12. google Trends

13. 소개 - 1
ReactNative
Facebook.
2015.11
v0.58
Flutter
Google
2017.5
v1.2

14. 소개 - 2
Nativescript
Progress
2015.3
v.5.2.2
Ionic
Ionic
2013
v3.9.2

15. 사용한 서비스 -RN

16. Flutter

17. Nativescript

18. Ionic

19. RN(react-native) vs FLUTTER

20. NativeScript vs Ionic

21. 문서화
웹
- react-native, flutter, nativescript, ionic 전반적으로 문서화는 잘되어있음
책
- react-native: 2
- ionic: 3
- flutter, nativescript: 0

22. awesome
awesome-reactnative
awesome-flutter
awesome-nativescript
awesome-ionic

23. 참고) vue-native
react-native api 의 wrapper
vuejs의 문법으로
react-native도 vue-native를 썼을때 동일 문제가 발생될 수 있음.
(wrap된 툴을 쓰면 항상 문서화및 api 발전이 오리지널보다 느리기 때문에 불필요한 시간
을 줄이기 위해 react-native로 샘플을 작성함.)

24. 위의 대상중 nativescript-vue를 제외함.
기존의 angular를 기반으로 만들어진 툴로 신규 프로젝트로 vue를 지원
신규 프로젝트이다보니 현시점에서 프로덕션에 기능이 미비한 부분(ex: router)도 있고 문
서화도 미비하다고 생각함.
release build후 에러에 대해서 github에 issue는 있지만 해결 방법에 대해 정리되어있지
않아서 build 과정에 시간 낭비를 함.
기존의 angular를 사용하면 되지만 vue를 못붙이면 nativescript를 선정할 이유에서 탈락.
-> react-native도 vue-native를 썼을때 동일 문제가 발생될 수 있음.
(wrap된 툴을 쓰면 항상 문서화및 api 발전이 오리지널보다 느리기 때문에 불필요한 시간
을 줄이기 위해 react-native로 샘플을 작성함.)

25. RN
- pros
- facebook
- 크로스플랫폼 관련 1
위
- 커뮤니티 성숙도
- hot reload
- code push
- Cons
- javascript, react
- 학습난이도.
- 디버깅이 어렵다.
- flutter에 비해 tool
이 부족하다(ide,
doctor...)
- version 0.5x
- 주로 개발 환경은 맥
위주라 생각(기존에
Flutter
- pros
- google
- version 1 이상
- hot reload
- 개발 환경: dart,
android studio,
doctor
- code push(제공 예정)
- 개인적으로 학습 난이도
는 리액트보다 쉽게 접
근.
- 성능
- Cons
- js에 비해 빈약한 dart
library
- RN 대비 적은 개발자풀
- 아직은 reactnative에
Ionic
- pros
- 웹개발자는 학습곡선이
적다.
- Const
- 네이티브 클로스 플랫
폼 대비 느린 성능
- angularjs
- vuejs는 이제 시작하는
단계(문서화나 api 빈
약)

26. native, webview, rn, flutter 내부 비교 (참고)

27. 플랫폼별 설치후 Hello world 비교

28. 기본 아이콘 안드로이드

29. RN Flutter Ionic

30. 개인 경험상 학습시간

31. RN

32. RN

33. Flutter

34. Ionic

35. 아이템이 10000개인 리스트 작성후 느낀점
RN
- 기술에 관심이 있어 미리 학습을 미리 선행하였음.
- 개발환경 구축에 시간을 씀.
- android studio 대비 vscode의 손에 익지 않음과 duck type으로 인한 자동완성의
부족함.(typescript도 내가 사용할때는 생각보다는 잘 안됨.)
- 디버깅이 쉽지 않음.(터미널로 로깅을 확인함.)
- 개발 문서가 눈에 잘 안들어옴.
- apk 번들링때 발생한 오류로 꽤나 시간을 낭비
- 리스트 출력시 lazy loading이 적용되어있어서 빠르게 로딩. 실제로는 보이는 영역만
그리고 나머지는 안그림(나름 성능을 위해 최적화하였지만 성능 테스트 입장에서는 애
매한 요소였음)

36. RN 관련 스크린샷

39. react-native

40. react-native : 자동완성 측면에서 아쉬움.

43. 가끔 디버깅

49. FLUTTER

50. 아이템이 10000개인 리스트 작성후 느낀점
flutter
- 기술에 관심이 있어 학습을 선행하였음.
- 리액티브 개발이라고 표현하였는데 RN과 비슷한 상태관리라던지 많이 차용한 느낌을
받음
- 개발환경 구축에 flutter doctor를 이용하여 쉽게 해결
- android studio 손에 익음.
- dart의 정적 타입으로 인한 자동완성 지원
- 디버깅이 rn 대비 쉬움. (break point 설정. logcat 로그 확인등 기존 자바 개발
경험을 이어감)
- 따라하기 형태의 문서화는 초반 학습에 많은 도움을 준다고 생각함.
- RN에비해 navigator가 쉬움.
- 상대적으로 RN에 비해 부족한 부분을 채워서 만든 툴이라 느끼는 부분이 navigator와 doctor부분.

51. FLUTTER 관련 스크린 샷

60. 아이템이 10000개인 리스트 작성후 느낀점
ionic
- 개발환경 구성이 간단함. 특별히 문제 없었음.
- 단순히 웹뷰라 개발이 익숙하고 쉬웠음, 하지만 angularjs 기반이라 익숙지 않음.
- vscode로 개발. android studio 대비 불편.
- 에뮬레이터 안띄워도 browser로 개발 가능(webpack-dev-server로 핫리로딩 편함)
- 내부적으로 webpack으로 번들링한걸 cordova로 apk 번들링하면서 2중 번들링. 아
무래도 에뮬레이터로 작업할때는 좀 버벅대는 느낌을 받음.
- rn, flutter 대비 많이 느림. 10000개 리스트 그리는데 30초 이상이 걸림.

61. FLUTTER

62. apk 비교

63. 좀 더 보면 좋을 주제 - PWA

64. PWA

65. PWA
OFFLINE 샘플
- https://www.trivago.in/

66. 앱 설치

67. 앱 설치 - PWA는 스토어에 있는 앱과와 무관

68. PWA - push

69. PWA - app shell

70. 감사합니다.