Android와 Flutter 앱 개발의 큰 차이점 5가지

Android와 Flutter 앱 개발의 큰 차이점 5가지

• 1.
  Android / Flutter앱 개발의 
 큰 5가지 남반석2019.12.8 차이점
• 2.
  가장 큰 5가지 1.같은 코드로 iOS 릴리즈 가능하다. 2. Hot Reload 지원 => 개발 시간을 획기적으로 단축. 3. Dart 언어를 사용 (Javascript, Java를 섞어버린) 4. 안드로이드 스튜디오 외에 VS Code로 개발 가능하다. (가볍고 쾌적하 다.) 5. Android는 OS가 그리는 반면, Flutter는 Skia엔진이 그린다. 차이점
• 3.
  여러분의 현재 반응
• 4.
  오늘 주제는 가장큰 차이점
• 5.
  오늘 주제는 개발의큰 차이점
• 6.
  1. 첫번째차이점
• 7.
  크래시가 나지 않는다. •단Native쪽과 연동 과정에서는 크래시가 발생하기도 한다. •기본 UI Framework에서는 크래시로 앱이 죽지 않는다 1. 크래시가 나지 않는다면 어떤 일이 벌어질까요?
• 8.
  1. 크래시가 나지않는다. •기본 UI Framework에서는 크래시로 앱이 죽지 않는다 •Widget 안에
 빨갛고 노란
 stacktrace 로그가 보인다.
• 9.
  1. 크래시가 나지않는다. •기본 UI Framework에서는 크래시로 앱이 죽지 않는다 •Rotating Error Pizza
 
 From - Facebook Group
 “Let's Flutter with Dart”
• 10.
  1. 크래시가 나지않는다. •발생한 Exception은 IDE 로그로 확인 가능하다.
• 11.
  1. 크래시가 나지않는다. •다양한 플러그인을 사용할때 
 Android 채널, iOS 채널을 통해 코드가 실행되면 
 Native 코드로 (Java, Kotlin, Swift) 실행이 되고, 크래시 발생 가능.
 
 간혹 Low Level에서 크래시가 발생하기도 한다.
• 12.
  1. 크래시가 나지않는다. •Fatal signal 11 (C, .so파일 관련 에러)가 발생하면
 분석, 해결이 굉장히 어렵다. •푸시 플러그인 버그: 
 https://github.com/FirebaseExtended/flutterfire/issues/125
• 13.
  1. 크래시가 나지않는다. 실제 Product에서도 
 크래시가 안나나요?
• 14.
  1. 크래시가 나지않는다. - Android 1건 (화웨이 기기)
 DAU 250
 MAU 1.5K 최근 30일 크래시 - IOS 0건
 DAU 2.1K
 MAU 12K
 (11월에 Flutter 전환,
 0.04%는 원인불명;;)
• 15.
  1. 크래시가 나지않는다. 그러면 코드 오류는 
 잡을 수 없나요?
• 16.
  1. 크래시가 나지않는다. Firebase에서 Crashes 필터 -> Non-Fatal로 바꾸면, 
 위젯이나, 로직 등에서 발생한 에러의 File & Line을 볼 수 있다.
• 17.
  1. 크래시가 나지않는다. •장점: 사용자가 앱 사용하다가, 특정 Screen(Page)에 문제가 있어도
 백버튼을 누르고, 계속 이용이 가능하다. •“크래시가 나지 않을때”의 장단점. •단점: 
 - 금융앱 처럼 보안 절차를 철저히 해야하는 앱에서 Assert를 미리
 설계하지 않으면, 크래시가 나지 않은채로 의도하지 않은 동작 가능하다.
 
 - 앱화면에 빨간 에러코드는, 유저들에게 불안이나 잘못되었다는 느낌을
 줄 수 있고, 앱을 지울 우려가 있다. => 빠르게 파악 => Hotfix가 필요하다
 

• 18.
  2. 획기적인 화면사이의 정보 통신
• 19.
  2. 획기적인 화면사이의 정보 통신 - Android에서는… Activity - OnActivityForResult - ListenerDialog - ViewModel, ListenerFragment - EventBusEtc
• 20.
  2. 획기적인 화면사이의 정보 통신 Activity - OnActivityForResult - ListenerDialog - ViewModel, ListenerFragment 단점: 화면을 시작하고, 받는 위치가 다르다. (헤맬 수 있다.) 단점: ViewModel은 본래 View를 위한 모델 관리 용도인데,
 이벤트 전달을 위해 사용/비대해질 우려.
 Listener와 참조가 끊겼을때 전달되지 않음 (onRestoreInstanceState) 단점: Listener 호출 후 dismiss를 매번 수동으로 해줘야한다. (따로 호출)
• 21.
  2. 획기적인 화면사이의 정보 통신 그렇다면 Flutter에서는 어떻게 하나요?
• 22.
  2. 획기적인 화면사이의 정보 통신 함수
• 23.
  2. 획기적인 화면사이의 정보 통신 Screen A Screen B Open data param Returning data
• 24.
  2. 획기적인 화면사이의 정보 통신 Screen A Screen B Screen A Open data 
 param Returning
 data
• 25.
  2. 획기적인 화면사이의 정보 통신 Screen A Screen B Screen A
• 26.
  2. 획기적인 화면사이의 정보 통신 await에서 화면이 열리고, 해당 Screen이 닫힐때까지 코드가 Block된다.
 화면이 끝나고 정보를 받게되면 아래에 if (result != null) 코드가 수행된다.
• 27.
  2. 획기적인 화면사이의 정보 통신 Screen B에서 데이터를 돌려줄때 Push 함수의 Return type 🍀 Android의 Intent, Bundle에 싣기위해 Serializable, Parcelable 구현
 Flutter에서는 필요없음. 그냥 객체 그대로 싣고 보낸다. 메모리 주소도 동일
 

• 28.
  2. 획기적인 화면사이의 정보 통신 •Provider 사용 •Listener를 사용 가능함 (비추천) 그 외의 방법
• 29.
  3. Thread 스트레스에서해방
• 30.
  3. Thread 스트레스에서해방 Android에서는… Bitmap처리, Network처리 등을 위해 •AsyncTask (Deprecated) •Thread, Excutors •Rx (Schedulers.xx() series) •Coroutine - suspend function
• 31.
  3. Thread 스트레스에서해방 suspend function은 
 coroutine scope 안에서 또는
 suspend function 안에서 호출 가능 •Coroutine
• 32.
  3. Thread 스트레스에서해방 •Flutter Future sync, async 함수는
 서로 원하는 형태로
 제약없이 호출 가능.
• 33.
  3. Thread 스트레스에서해방 •Event Loop이 흐름을 콘트롤, Javascript의 방식
• 34.
  3. Thread 스트레스에서해방 •Async, Await 방식은 단일스레드 방식으로 동작한다는 의미.
 (그러나 통신이나 이미지뷰 처리가 UI를 느리게 하지 않음)
 •Parallel 하게 여러 작업을 동시에 수행하려면 
 Isolate를 사용하면 된다.
 
 https://medium.com/flutter-community/flutter-dart-async-concurrency- demystify-1cc739aaae57
 http://jpryan.me/dartbyexample/examples/isolates/
• 35.
  4. 만들고 쓰기쉬운 커스텀뷰 (Widget)
• 36.
  Android 에서는… 1. Java,Kotlin으로 커스텀뷰 코드 작성 2. attrs.xml 안에 속성 추가 3. Java, Kotlin에서 코드로 attrs 파라미터 추출 4. 코드로 뷰 동적 생성할때를 위해 생성자, 또는 setter생성 4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)
• 37.
  Write attrs.xml
 
 Extract fromattrs 4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)
• 38.
  왜 이렇게 해야하죠? =>레이아웃을 xml로 그리기 때문 4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)
• 39.
  왜 xml로 해야하죠? =>화면 레이아웃 작성할때마다
 빌드를 하면 개발이 늦다. (미리보기가 필요) 4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)
• 40.
  본래 View는 Java객체 XML로 인해서 불필요한 과정이 생겼다. 4. 만들고 쓰기 쉬운 커스텀뷰 (Widget) => Android Compose 개발중
 https://developer.android.com/jetpack/compose/tutorial
• 41.
  그럼 Flutter에서는? 4. 만들고쓰기 쉬운 커스텀뷰 (Widget)
• 42.
  4. 만들고 쓰기쉬운 커스텀뷰 (Widget) 필요한 필드 & 생성자 정의
• 43.
  각 필드에 원하는변수들을 배치. (Primitive, Enum, Object, Function, Widget)
 MVVM 처럼 data가 binding되고, 
 setState 함수를 통해 값이 바뀌면 알아서 갱신(Build)이 된다.
 
 개별 변수 Observing은 아니지만, 오히려 심플하다.
 각 Observable을 관측하는 Observer만 갱신하는 것은 성능상 이점이 있지만,
 개발자, 코더 입장에서는 개별적인 변화와/ Observing 여부에 신경쓰고 setValue가 제대로 
 호출되었는지 확인하는 불편함이 있는데, 
 Flutter에서는 그런 불편함이 사라진다. 4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)
• 44.
  Hot Reload Value
 Logic 
 Layout Animation 모든변경을 1초만에 확인 가능하다. 4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)
• 45.
  5. 쉽고 직관적인Animation 처리
• 46.
  Android 에서는… 5. 쉽고직관적인 Animation 처리 => 단일 뷰 Animation은 쉽지만, 주변 레이아웃이 같이 변한다면
 좀 골치가 아파진다. 1. Animation을 수행할 View를 찾는다. 2. View의 transitionX, alpha, scale의 타겟값을 세팅 3. Duration 세팅 4. Interpolation 세팅 5. start() 함수 수행
• 47.
  그래서 Android 에서는… 1.Constraint Set 변경 - AutoTransition
 
 
 
 2. Android Studio 4.0 Motion Editor 개발중 => 똑같은 Xml을 여러벌을 준비하거나,
 코드로 Constraint를 동적으로 변환한다. 5. 쉽고 직관적인 Animation 처리
• 48.
  Flutter에서는? 5. 쉽고 직관적인Animation 처리
• 49.
  Animation WidgetsImplicit 5. 쉽고직관적인 Animation 처리
• 50.
  Implicit ? Implicit Intent:목적 Targeting만 하면 알아서 동작 5. 쉽고 직관적인 Animation 처리
• 51.
  5. 쉽고 직관적인Animation 처리 visibleFraction이 60%일때 chartSize = 150이 set
 자동적으로 차트막대가 커지는 애니메이션이 시작된다.
• 52.
  Implicit animated widgets- 다양한 기본 위젯들 탑재 https://www.youtube.com/watch?v=IVTjpW3W33s 5. 쉽고 직관적인 Animation 처리
• 53.
  물론 Explicit animation도지원한다. (Animation Controller) Let’s subscribe
 Youtube Flutter Channel 그러나 웬만하면 Implicit Animations로 구현 가능하다. 5. 쉽고 직관적인 Animation 처리
• 54.
  UI 개발 Framework끝판왕 Android / Flutter 앱 개발의 큰 차이점 5가지를 통한 
 Flutter 총평:
• 55.
  감사합니다.
 
 더 궁금한것이 있다면
 =>[email protected]
• 56.
  자료 및 이미지출처: •https://github.com/flutter/flutter/issues/17112 •https://www.jagranjosh.com/articles/relations-and-functions-iit- jee-important-questions-and-preparation-tips-1455106528-1
 •https://medium.com/flutter-community/flutter-threading- 5c3a7b0c065f
 •https://www.youtube.com/watch?v=IVTjpW3W33s •https://medium.com/flutter-community/flutter-dart-async-concurrency- demystify-1cc739aaae57
 •http://jpryan.me/dartbyexample/examples/isolates/