2019 GDG DevFest Seoul - React Native와 Flutter를 고민하는 개발자분들께

이번에 2019 GDG DevFest Seoul 에서 "React Native와 Flutter를 고민하는 개발자분에게" 라는 발표로 주제한 이상훈입니다!

RN과 Flutter를 두고 어떤 플랫폼을 사용하셔야 할지 고민하시는 분들을 위해, 둘을 한번 비교해봤습니다.
기초이기 때문에, 아키텍쳐 부분 등 일부 내용은 간단하게만 언급하고 넘어갔습니다.

감사합니다!

Transcript

2. React Native와 Flutter를 고민하는 개발자분들에게 이상훈, loplat
 @sanghun.lee
3. 안녕하세요! 저는 로플랫이란 실내위치 인식 기술을 보유한 스타트업에서 Android / iOS 개발자로 일하고있는 21살 개발자 이상훈입니다. “
4. React Native와 Flutter를 쓰는 이유 같은 서비스를, Android, iOS 등 멀티 플랫폼에 지원하려고 할 때
5. React Native와 Flutter를 쓰는 이유 관리 측면에서는, 플랫폼 별로 각각의 코드를 작성할 경우 > 유지보수 측면에서도 각각 관리해줘야 하지만, 하이브리드 플랫폼을 사용할 경우 하나의 코드로 여러 플랫폼을 대응할 수 있음
6. React Native와 Flutter를 쓰는 이유 하이브리드 플랫폼 중 위 프레임워크를 쓰는 이유는, WebView (HTML) 가 아닌, Native Platform이기 때문
7. React Native와 Flutter를 쓰는 이유 속도적인 측면에서는, Native Platform 이기 때문에, Native 급 성능이 나옴
8. 그렇다면, React Native와 Flutter 중 어떤걸 사용해야 하나요?
9. React Native Facebook 에서 만든 Native 기반 Hybrid Framework 이고, React ۽ ѐߊ
10. React Component 를 Native Component 로 연결시켜주는 ‘Bridge’ 가 존재 React Native
11. Flutter 구글에서 만든 Native 기반 Hybrid Framework 이며, Dart 로 개발
12. Flutter React Native 에 있는 ‘Bridge’ 가 없으며, 자체 UI 렌더링 엔진으로 모든 뷰를 그림 (내부코드는 C/C++ 로 작성)
13. Key Points 1. Github Star 2. React Native 와 Flutter 비교 3. 성능적인 차이 4. ѐߊ੗о ѐߊೡ ٸ੄ ର੉
14. ✨ Github Star 10월 12일 오전 12시 47분 기준
15. Cross Platform Structure Performance Platform Code App Size
16. Cross Platform 대표적으로 모바일 (Android, iOS) 계의 크로스 플랫폼 (이하 하이브리드)
17. Cross Platform 하나의 코드로 동시에 Android, iOS 앱 개발 가능
18. Structure
19. Structure Skia (Google Chrome, Android UI Engine) 기반의 자체 UI 엔진이 모든 위젯을 직접 그림 React Component 를 Bridge 가 Native Component 로 연결
20. Skia (Google Chrome, Android UI Engine) 기반의 자체 UI 엔진이 모든 위젯을 직접 그림 React Component 를 Bridge 가 Native Component 로 연결 UI 면에서 Platform, SDK에 대한 종속성이 없음 UI 면에서 Platform, SDK에 대한 종속성이 있음 Structure
21. Structure (출처 : What’s Revolutionary about Flutter)
22. React Component 가 Bridge 로 Native Component 와 연결됨 일부 컴포넌트는 Android, iOS ппী݅ ઓ੤ೞӝ ٸޙী 플랫폼 별 각각 다르게 구현해야할 경우가 발생 Structure
23. 네이티브 컴포넌트를 직접 그림 (Flutter 내부에 UI 코드를 다 구현함…) 플랫폼, SDK 상관없이 UI 변경 없음 Structure
24. Material (안드로이드 스타일), Cupertino (iOS 스타일) 을 선택해서 해야하고, 각각의 스타일을 유지하기 위해서는 어쩔 수 없이 분기처리해야함 Structure
26. 이런식으로 모든 위젯을 직접 구현함 (Material, Cupertino 스타일의 위젯을 한땀한땀..)
27. Structure (출처 : What’s Revolutionary about Flutter)
28. Performance
29. Performance Native React Native Flutter
30. Performance Native React Native Flutter Galaxy S10+ 기준 (2분간 실행) / 1초에 2번씩 + 버튼 누름 / Android Studio Profiler 0 25 50 75 100 실행직후 30초 후 1분 후 2분 후 0 25 50 75 100 실행직후 30초 후 1분 후 2분 후 0 25 50 75 100 실행직후 30초 후 1분 후 2분 후
31. Performance Native React Native Flutter 0 25 50 75 100 실행직후 30초 후 1분 후 2분 후 0 25 50 75 100 실행직후 30초 후 1분 후 2분 후 0 25 50 75 100 실행직후 30초 후 1분 후 2분 후 Galaxy Note 5 기준 (2분간 실행) / 1초에 2번씩 + 버튼 누름 / Android Studio Profiler
32. Performance Pixel 에서 테스트 (출처 : Examining performance differences between Native, Flutter, and React Native mobile development.)
33. Performance C++ 엔진으로 직접 UI를 그림 React Component를 Bridge 가 Native Component 와 연결
34. Performance 네이티브보다 빠름 네이티브 급 빠름
35. Platform Specific Code
36. Platform Specific Code 예를 들어 - 배터리 잔량 가져오기 - 권한 요청하기 - 외부 앱 실행하기 등 이런 기능이 필요할 때,
37. Platform Specific Code Android, iOS 각각 네이티브 코드를 작성하여 React Native 나 Flutter 에서 호출해서 사용해야함
38. Platform Specific Code MethodChannel API NativeModule API
39. App Size
40. App Size
41. App Size Android Target, Release Build (RN latest v0.61.2 / Flutter latest v1.9.1+hotfix4) 빌드 도구 버전 등 크기 차이가 있을 수 있음 7.1 MB 4.5 MB
42. App Size iOS Target, Release Build (RN latest v0.61.2 / Flutter latest v1.9.1+hotfix4) / Xcode 11.1 빌드 도구 버전 등 크기 차이가 있을 수 있음 24 MB 52 MB
43. App Size JavaScript Core Dart + Flutter Engine (C/C++) Compiled Dart Module JS Bundle
44. Hot Reload Language Architecture 3rd-party Libraries EcoSystem Supported IDEs
45. Supported IDEs Visual Studio Code Android Studio (Flutter) IntelliJ Based IDEs 기타 IDE 많음
46. Hot Reload
47. Hot Reload 둘 다 지원
48. Language Dart Javascript
49. Language Javascript 는 익숙한데 Dart..?
50. Dart Language Google 에서 만든 언어 ‘인터프리터 언어’ 가 아닌, ‘컴파일 언어’ 로서, 머신코드로 변경되기 때문에 빠름
51. Language Dart Javascript
52. Language Dart Javascript UI를 HTML 태그 기반으로 설계 가능 (JSX) UI를 클래스 기반으로 들여쓰기 (Depth) 형태로 짬
53. Language UI 짤 때 다음과 같은 코드가 될 수 있음
54. @override Widget build(BuildContext context) { final bottomPadding = MediaQuery.of(context).padding.bottom; return new Scaffold( key: _scaffoldKey, backgroundColor: Colors.white, body: StoreConnector<ApplicationState, ForceTouchAction>( converter: (store) => store.state.forceTouchAction, builder: (context, action) { return new Stack( children: <Widget>[ Transform.scale( scale: 1.0 + (action.pressure == 0.0 ? 0 : action.pressure / 20), child: Stack(children: <Widget>[ NotificationListener<OverscrollIndicatorNotification>( child: PageView( controller: _pagerController, physics: NeverScrollableScrollPhysics(), children: <Widget>[MainMyMaatPage(), Container()], ), onNotification: (overscroll) { overscroll.disallowGlow(); }, ), Container( alignment: Alignment.bottomLeft, child: ClipRect( child: BackdropFilter( filter: ImageFilter.blur( sigmaX: Platform.isIOS ? 20 : 0, sigmaY: Platform.isIOS ? 20 : 0), child: Container( height: 64 + MediaQuery.of(context).padding.bottom, decoration: new BoxDecoration( color: Colors.black.withOpacity(0.2)), child: Container( child: Stack( alignment: Alignment.topLeft, children: <Widget>[ StoreConnector<ApplicationState, FoodReviewedLoadingState>( converter: (store) => store .state.foodReviewedLoadingState, builder: (context, loadingState) { if (loadingState != null && loadingState.isLoading) { return new SizedBox( child: LinearProgressIndicator( backgroundColor: Colors.transparent, valueColor:
55. Language 개인적으로, HTML 태그 베이스처럼 명확하거나 하지 않아 Flutter 에서 UI 를 그릴 때, 인지하기가 어려웠음
56. Architecture
57. Architecture 서비스를 만들때 UI 그리는 부분과 비즈니스 로직이 함께 섞이게 되면 좋지 않은 형태의 코드가 될 가능성 높음
58. Architecture UI 그리는 부분과 비즈니스 로직은 분리!
59. Architecture BLoC (Business Logic Component) Flux
60. Architecture : Redux View & Action & Dispatcher & Store(Middleware & Reducer) & View
61. Architecture : Redux 데이터가 아래처럼 한 방향으로만 흐르기 때문에 View & Action & Dispatcher & Store(Middleware & Reducer) & View 관리하기가 좋음 함수형 프로그래밍에 최적화 Store 에서 상태를 저장하여 UI 와 연결하여 사용
62. Architecture : BLoC
63. Architecture : BLoC 페이지당 BLoC 하나씩 Stream 형태로 구성되어 있으며, API 로부터 정보를 불러오거나, DB 에서 정보 불러오기 등 가져온 데이터를 UI로 출력할 때 용이한 패턴
64. Architecture Flutter 에서도 Redux 패턴을 사용할 순 있음. 아키텍쳐는 설계 나름이지만, Flutter 에서는 BLoC, React 에서는 Flux 패턴을 많이 활용한다고 함
65. 3rd-party Libraries
66. 3rd-party Libraries 개발을 하다보면 라이브러리를 활용해야할 때가 많음
67. 3rd-party Libraries Flutter Package Manager Node Package Manager
68. 3rd-party Libraries <
69. 3rd-party Libraries 구글 공식 라이브러리 (예를 들어 Firebase, Camera 등) 들이 아직 정식 버전이 아닌, pre 버전 (0 버전 때)이 많음
70. 3rd-party Libraries 구글 공식 라이브러리 (예를 들어 Firebase, Camera 등) 들이 아직 정식 버전이 아닌, pre 버전 (0 버전 때)이 많음
71. 3rd-party Libraries 플러그인이 많이 존재하지 않음 요즘에야 조금씩 추가되고 있는 상태 없어서 플러그인을 만들어야하는 경우가 은근 있음
72. 3rd-party Libraries 나온지 오래됐기 때문에, 라이브러리가 많음
73. 3rd-party Libraries 유명 라이브러리도 있고 관리도 나름 잘 되는 편
74. EcoSystem 나온지 얼마 안됨 은근히 나온지 됨 (근데 왜 정식버전이 아니고 아직도 0버전대인가..)
75. EcoSystem 문서가 은근 되어있지만, 아직 나온지 얼마 되지 않아 레퍼런스가 부족함 문서도 정리 잘되어있고, 레퍼런스가 많음
76. EcoSystem 예제가 부족함 튜토리얼이 하나 둘씩 추가되는 중으로 보임 예제가 많음
77. EcoSystem First-Party 라이브러리의 버전이 아직 0점대임 Third-Party 라이브러리도 얼마 없어서 (예를 들어, 다음 지도를 Flutter 에서 사용하기 위해) 직접 네이티브 플러그인을 만들어야함
78. EcoSystem StackOverflow 에 본인이 겪는 문제가 없는 경우도 많음
79. EcoSystem
80. EcoSystem
81. Result React Native Flutter Language Javascript Dart UI Bridge 가 시스템 컴포넌트와 연결 내부에 자체적인 위젯이 모두 구현되어 있음 Performance 네이티브 급 성능 네이티브보다 빠름 Hot Reload O O Size (Android) Hello World 기준 7MB Hello World 기준 5MB Size (iOS) Hello World 기준 24MB Hello World 기준 52MB Third-Party Libraries 많음 적음 Main Architecture Flux (ex. Redux) BLoC Platform Specific Code O O System SDK Dependency 많음 UI 쪽은 적지만, 네이티브 기능에는 많음
82. React Native와 Flutter를 고민하는 개발자분들에게 이상훈, loplat
 @sanghun.lee