모바일 크로스플랫폼 비교 - 월간슬라이드 4월
Download as PPTX, PDF3 likes2,288 views
reactnative, flutter, ionic, nativescript
모바일 크로스플랫폼 비교 - 월간슬라이드 4월
- 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. 모바일 플랫폼 조사
- 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
- 15. 사용한 서비스 -RN
- 16. Flutter
- 17. Nativescript
- 18. Ionic
- 21. 문서화 웹 - react-native, flutter, nativescript, ionic 전반적으로 문서화는 잘되어있음 책 - react-native: 2 - ionic: 3 - flutter, nativescript: 0
- 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
- 66. 앱 설치
- 67. 앱 설치 - PWA는 스토어에 있는 앱과와 무관
- 68. PWA - push
- 69. PWA - app shell
- 70. 감사합니다.
Editor's Notes
- #6: https://github.com/Juude/Awesome-Cross-Platform-Apps
- #8: https://aws-amplify.github.io/
- #10: https://github.com/Juude/Awesome-Cross-Platform-Apps
- #14: https://facebook.github.io/react-native/ https://medium.com/react-native-development/a-brief-history-of-react-native-aae11f4ca39
- #15: https://en.wikipedia.org/wiki/NativeScript#cite_note-3
- #16: https://instabug.com/blog/top-react-native-mobile-apps/ https://medium.com/we-make-radish-fiction/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-react-native-%EC%9D%BC%EB%85%84-a0556f2755aa https://softwareengineeringdaily.com/2018/09/24/show-summary-react-native-at-airbnb/ <- 에어비앤비 리액트네이티브 걷어낸이유 https://twitter.com/reactnative/status/832648387220484097
- #17: https://flutter.dev/showcase
- #18: https://www.nativescript.org/showcases
- #19: https://csform.com/top-10-apps-built-with-ionic-framework/
- #27: https://medium.com/@dan_kim/%EB%B2%88%EC%97%AD-flutter%EB%8A%94-%EC%99%9C-%ED%98%81%EB%AA%85%EC%A0%81%EC%9D%B8%EA%B0%80-967c1dfcc5a9 <- flutter 장점을 설명하는 글
- #39: https://github.com/facebook/watchman/issues/514 $ git clone https://github.com/facebook/watchman.git $ cd watchman $ git checkout v4.9.0 $ sudo apt-get install -y autoconf automake build-essential python-dev python3-dev libtool m4 pkg-config libssl-dev libcrypto++-dev $ ./autogen.sh $ ./configure $ make $ sudo make install $ echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches && \ echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_queued_events && \ echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_instances && \ watchman shutdown-server
- #40: https://github.com/Microsoft/vscode-react-native/issues/631
- #43: https://stackoverflow.com/questions/40898934/unable-to-connect-with-remote-debugger