Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Dora Lee
October 20, 2019

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

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

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

감사합니다!

Dora Lee

October 20, 2019
Tweet

More Decks by Dora Lee

Other Decks in Technology

Transcript

  1. React Native와 Flutter를
    고민하는 개발자분들에게
    이상훈, loplat

    @sanghun.lee

    View full-size slide

  2. 안녕하세요!
    저는 로플랫이란
    실내위치 인식 기술을 보유한 스타트업에서
    Android / iOS 개발자로 일하고있는
    21살 개발자 이상훈입니다.

    View full-size slide

  3. React Native와 Flutter를 쓰는 이유
    같은 서비스를, Android, iOS 등 멀티 플랫폼에 지원하려고 할 때

    View full-size slide

  4. React Native와 Flutter를 쓰는 이유
    관리 측면에서는,
    플랫폼 별로 각각의 코드를 작성할 경우 > 유지보수 측면에서도 각각 관리해줘야 하지만,
    하이브리드 플랫폼을 사용할 경우 하나의 코드로 여러 플랫폼을 대응할 수 있음

    View full-size slide

  5. React Native와 Flutter를 쓰는 이유
    하이브리드 플랫폼 중 위 프레임워크를 쓰는 이유는,
    WebView (HTML) 가 아닌, Native Platform이기 때문

    View full-size slide

  6. React Native와 Flutter를 쓰는 이유
    속도적인 측면에서는,
    Native Platform 이기 때문에, Native 급 성능이 나옴

    View full-size slide

  7. 그렇다면,
    React Native와 Flutter 중
    어떤걸 사용해야 하나요?

    View full-size slide

  8. React Native
    Facebook 에서 만든 Native 기반
    Hybrid Framework 이고, React ۽ ѐߊ

    View full-size slide

  9. React Component 를 Native Component 로 연결시켜주는 ‘Bridge’ 가 존재
    React Native

    View full-size slide

  10. Flutter
    구글에서 만든 Native 기반
    Hybrid Framework 이며, Dart 로 개발

    View full-size slide

  11. Flutter
    React Native 에 있는 ‘Bridge’ 가 없으며,
    자체 UI 렌더링 엔진으로 모든 뷰를 그림 (내부코드는 C/C++ 로 작성)

    View full-size slide

  12. Key Points
    1. Github Star
    2. React Native 와 Flutter 비교
    3. 성능적인 차이
    4. ѐߊ੗о ѐߊೡ ٸ੄ ର੉

    View full-size slide

  13. ✨ Github Star
    10월 12일 오전 12시 47분 기준

    View full-size slide

  14. Cross Platform
    Structure
    Performance
    Platform Code
    App Size

    View full-size slide

  15. Cross Platform
    대표적으로 모바일 (Android, iOS) 계의
    크로스 플랫폼 (이하 하이브리드)

    View full-size slide

  16. Cross Platform
    하나의 코드로 동시에 Android, iOS 앱 개발 가능

    View full-size slide

  17. Structure
    Skia (Google Chrome, Android UI Engine) 기반의
    자체 UI 엔진이 모든 위젯을 직접 그림
    React Component 를 Bridge 가 Native Component 로 연결

    View full-size slide

  18. Skia (Google Chrome, Android UI Engine) 기반의
    자체 UI 엔진이 모든 위젯을 직접 그림
    React Component 를 Bridge 가 Native Component 로 연결
    UI 면에서 Platform, SDK에 대한 종속성이 없음
    UI 면에서 Platform, SDK에 대한 종속성이 있음
    Structure

    View full-size slide

  19. Structure (출처 : What’s Revolutionary about Flutter)

    View full-size slide

  20. React Component 가 Bridge 로 Native Component 와 연결됨
    일부 컴포넌트는 Android, iOS ппী݅ ઓ੤ೞӝ ٸޙী
    플랫폼 별 각각 다르게 구현해야할 경우가 발생
    Structure

    View full-size slide

  21. 네이티브 컴포넌트를 직접 그림
    (Flutter 내부에 UI 코드를 다 구현함…)
    플랫폼, SDK 상관없이 UI 변경 없음
    Structure

    View full-size slide

  22. Material (안드로이드 스타일), Cupertino (iOS 스타일)
    을 선택해서 해야하고, 각각의 스타일을 유지하기 위해서는
    어쩔 수 없이 분기처리해야함
    Structure

    View full-size slide

  23. 이런식으로 모든 위젯을 직접 구현함
    (Material, Cupertino 스타일의 위젯을 한땀한땀..)

    View full-size slide

  24. Structure (출처 : What’s Revolutionary about Flutter)

    View full-size slide

  25. Performance
    Native
    React Native
    Flutter

    View full-size slide

  26. 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분 후

    View full-size slide

  27. 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

    View full-size slide

  28. Performance Pixel 에서 테스트
    (출처 : Examining performance differences between Native, Flutter,
    and React Native mobile development.)

    View full-size slide

  29. Performance
    C++ 엔진으로 직접 UI를 그림
    React Component를 Bridge 가 Native Component 와 연결

    View full-size slide

  30. Performance
    네이티브보다 빠름
    네이티브 급 빠름

    View full-size slide

  31. Platform Specific Code

    View full-size slide

  32. Platform Specific Code
    예를 들어
    - 배터리 잔량 가져오기
    - 권한 요청하기
    - 외부 앱 실행하기 등
    이런 기능이 필요할 때,

    View full-size slide

  33. Platform Specific Code
    Android, iOS 각각 네이티브 코드를 작성하여 React
    Native 나 Flutter 에서 호출해서 사용해야함

    View full-size slide

  34. Platform Specific Code
    MethodChannel
    API
    NativeModule
    API

    View full-size slide

  35. App Size Android Target, Release Build (RN latest v0.61.2 / Flutter latest v1.9.1+hotfix4)
    빌드 도구 버전 등 크기 차이가 있을 수 있음
    7.1 MB
    4.5 MB

    View full-size slide

  36. App Size iOS Target, Release Build (RN latest v0.61.2 / Flutter latest v1.9.1+hotfix4) / Xcode 11.1
    빌드 도구 버전 등 크기 차이가 있을 수 있음
    24 MB
    52 MB

    View full-size slide

  37. App Size
    JavaScript Core
    Dart + Flutter
    Engine (C/C++)
    Compiled Dart Module
    JS Bundle

    View full-size slide

  38. Hot Reload
    Language
    Architecture
    3rd-party Libraries
    EcoSystem
    Supported IDEs

    View full-size slide

  39. Supported IDEs
    Visual Studio Code
    Android Studio (Flutter)
    IntelliJ Based IDEs
    기타 IDE 많음

    View full-size slide

  40. Hot Reload
    둘 다 지원

    View full-size slide

  41. Language
    Dart Javascript

    View full-size slide

  42. Language
    Javascript 는 익숙한데 Dart..?

    View full-size slide

  43. Dart Language
    Google 에서 만든 언어
    ‘인터프리터 언어’ 가 아닌, ‘컴파일 언어’ 로서, 머신코드로 변경되기 때문에 빠름

    View full-size slide

  44. Language
    Dart Javascript

    View full-size slide

  45. Language
    Dart Javascript
    UI를 HTML 태그 기반으로
    설계 가능 (JSX)
    UI를 클래스 기반으로
    들여쓰기 (Depth) 형태로 짬

    View full-size slide

  46. Language
    UI 짤 때 다음과 같은 코드가 될 수 있음

    View full-size slide

  47. @override
    Widget build(BuildContext context) {
    final bottomPadding = MediaQuery.of(context).padding.bottom;
    return new Scaffold(
    key: _scaffoldKey,
    backgroundColor: Colors.white,
    body: StoreConnector(
    converter: (store) => store.state.forceTouchAction,
    builder: (context, action) {
    return new Stack(
    children: [
    Transform.scale(
    scale: 1.0 +
    (action.pressure == 0.0 ? 0 : action.pressure / 20),
    child: Stack(children: [
    NotificationListener(
    child: PageView(
    controller: _pagerController,
    physics: NeverScrollableScrollPhysics(),
    children: [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: [
    StoreConnectorFoodReviewedLoadingState>(
    converter: (store) => store
    .state.foodReviewedLoadingState,
    builder: (context, loadingState) {
    if (loadingState != null &&
    loadingState.isLoading) {
    return new SizedBox(
    child:
    LinearProgressIndicator(
    backgroundColor:
    Colors.transparent,
    valueColor:

    View full-size slide

  48. Language
    개인적으로, HTML 태그 베이스처럼 명확하거나 하지 않아
    Flutter 에서 UI 를 그릴 때, 인지하기가 어려웠음

    View full-size slide

  49. Architecture

    View full-size slide

  50. Architecture
    서비스를 만들때 UI 그리는 부분과 비즈니스 로직이 함께 섞이게 되면
    좋지 않은 형태의 코드가 될 가능성 높음

    View full-size slide

  51. Architecture
    UI 그리는 부분과 비즈니스 로직은 분리!

    View full-size slide

  52. Architecture
    BLoC
    (Business Logic Component)
    Flux

    View full-size slide

  53. Architecture : Redux
    View & Action & Dispatcher & Store(Middleware & Reducer) & View

    View full-size slide

  54. Architecture : Redux
    데이터가 아래처럼 한 방향으로만 흐르기 때문에
    View & Action & Dispatcher & Store(Middleware & Reducer) & View
    관리하기가 좋음
    함수형 프로그래밍에 최적화
    Store 에서 상태를 저장하여 UI 와 연결하여 사용

    View full-size slide

  55. Architecture : BLoC

    View full-size slide

  56. Architecture : BLoC
    페이지당 BLoC 하나씩
    Stream 형태로 구성되어 있으며,
    API 로부터 정보를 불러오거나, DB 에서 정보 불러오기 등
    가져온 데이터를 UI로 출력할 때 용이한 패턴

    View full-size slide

  57. Architecture
    Flutter 에서도 Redux 패턴을 사용할 순 있음.
    아키텍쳐는 설계 나름이지만,
    Flutter 에서는 BLoC,
    React 에서는 Flux 패턴을 많이 활용한다고 함

    View full-size slide

  58. 3rd-party Libraries

    View full-size slide

  59. 3rd-party Libraries
    개발을 하다보면 라이브러리를 활용해야할 때가 많음

    View full-size slide

  60. 3rd-party Libraries
    Flutter
    Package Manager
    Node Package
    Manager

    View full-size slide

  61. 3rd-party Libraries
    <

    View full-size slide

  62. 3rd-party Libraries
    구글 공식 라이브러리
    (예를 들어 Firebase, Camera 등) 들이
    아직 정식 버전이 아닌, pre 버전 (0 버전 때)이 많음

    View full-size slide

  63. 3rd-party Libraries
    구글 공식 라이브러리
    (예를 들어 Firebase, Camera 등) 들이
    아직 정식 버전이 아닌, pre 버전 (0 버전 때)이 많음

    View full-size slide

  64. 3rd-party Libraries
    플러그인이 많이 존재하지 않음
    요즘에야 조금씩 추가되고 있는 상태
    없어서 플러그인을 만들어야하는 경우가 은근 있음

    View full-size slide

  65. 3rd-party Libraries
    나온지 오래됐기 때문에,
    라이브러리가 많음

    View full-size slide

  66. 3rd-party Libraries
    유명 라이브러리도 있고
    관리도 나름 잘 되는 편

    View full-size slide

  67. EcoSystem
    나온지 얼마 안됨 은근히 나온지 됨
    (근데 왜 정식버전이 아니고 아직도 0버전대인가..)

    View full-size slide

  68. EcoSystem
    문서가 은근 되어있지만,
    아직 나온지 얼마 되지 않아
    레퍼런스가 부족함
    문서도 정리 잘되어있고,
    레퍼런스가 많음

    View full-size slide

  69. EcoSystem
    예제가 부족함
    튜토리얼이 하나 둘씩
    추가되는 중으로 보임
    예제가 많음

    View full-size slide

  70. EcoSystem
    First-Party 라이브러리의 버전이 아직 0점대임
    Third-Party 라이브러리도 얼마 없어서
    (예를 들어, 다음 지도를 Flutter 에서 사용하기 위해)
    직접 네이티브 플러그인을 만들어야함

    View full-size slide

  71. EcoSystem
    StackOverflow 에 본인이 겪는 문제가
    없는 경우도 많음

    View full-size slide

  72. 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 쪽은 적지만, 네이티브 기능에는 많음

    View full-size slide

  73. React Native와 Flutter를
    고민하는 개발자분들에게
    이상훈, loplat

    @sanghun.lee

    View full-size slide