在導入 Flutter 之前，你應該知道什麼？ - Weizhong Yang(Zonble)
===

> 請從這裡開始
## Flutter Production
[KKbox Kids](https://www.kkbox.com/service/kkboxkids/)

## 什麼是 Flutter

* 把瀏覽器的元件打散後重組,逼近Native速度
* 精簡過的 Web
* 跳過HTML parse的步驟直接組合出DOM結構
* Flutter: AOT編譯，直接組好 Widget tree，用Dart語言操作Widget，Widget同時包含元件與樣式，沒有另外拆分CSS
* Dart 類似於 web，但是是**真正的**OO語言
* 在iOS上有一個 FlutterViewController、在 Android 上有一個 Flutter Activity，當中包含 Dart VM 與 Skia Render
* 沒有用到UIKit或Android UI Conponents，而是用自己的引擎在Canvas上繪製元件
* 不同平台上可繪製相同 UI

## Flutter 如何加速開發？

* Flutter 可以在不同平台使用同一套 UI設計與 UI codebase，省下討論時間，直接進入產品開發
* reduce discuss time, some codebase with both of platform

## 與 HTML 跨平台框架比較
* Flutter 效能明顯優於 pure Web

## 與 NativeScript/RN 比較
* 執行編譯過的 Dart 程式，無需在 runtime 解析

## 怎麼樣的 App 適合 Flutter
* **原為網站，想改造成 Mobile App 的最適合**
* 電商、售票、交友、報表 ...
* 遊戲還是建議使用遊戲引擎(EX:Unity)
* 如果要做更接近硬體原生功能如影像處理類別（拍照、錄影等）仍建議使用 Native App

## 導入之前
* 確定有人手
* 從小專案開始，再導入大專案

## 最後，還是要做iOS/Android App
* 除了Flutter 之外
* cocoa pod / Gradle 套件管理
* Android Manifest / Proguard

## KKBOX Kids 的組合
* UI 使用 Flutter 製作
* 呼叫原生 WebView 實作 OAuth 登入
* 開發原生的音樂播放器
* 自己寫了FB App Events 的 plugin

## Flutter 團隊組成
* 目前人力市場還比較沒有所謂的 Flutter Engineer
*
* 建議先學會 iOS/Android 其中一種，再來學 Flutter
* 在團隊中，還是要有資深 Android/iOS 工程師
* Flutter 還無法真正取代原生的 iOS / Android lib

## 怎樣學 Flutter
* 安裝 IDE, SDK
* 學習 Dart
* 先動手寫一個 Flutter App 上手
* 熟悉 Flutter Widget
* 練習寫 Flutter plugin
* 練習寫 Dart package
* 熟悉 Flutter Pattern 和更新機制

## 安裝IDE與SDK

* IDE
* Android Studio and/or XCode
* IntelliJ IDEA
* Visual Studio Code
* Flutter SDKx
* Dart SDK

## 學習 Dart 語言

* [Learn X in Y minutes](https://learnxinyminutes.com/docs/dart/)
* [DartPad]( https://dartpad.dev/https://dartpad.dev/)

## Flutter Widgets
:book: [Widget catalog](https://flutter.dev/docs/development/ui/widgets)

## Flutter 的 Pattern
* 開發前先忘了MVC
* Flutter的每一層都是ViewModel
* 所有的物件(Widget)都在一棵樹裡
* 呼叫API的動作也是用一個Widget(FutureBuilder)完成

## Pattern?
* pattern 是物件之間的關係
* Flutter中的Widget只有三種關係
* 在當前Widget的上方
* 在當前Widget的下方
* 跟當前Widget在不同棵樹上

## 網上尋找節點
* of
* 往上尋找最接近且符合某個形態的節點

## 狀態管理
* Bloc
* Provider

## CI/CD
[BitRise](https://www.bitrise.io/) 對Flutter支援非常好

## KKbox OpenAPI SDK for Dart
https://pub.dev/packages/kkbox_openapi

## Slide
https://www.slideshare.net/zonble/flutter-191993884

###### tags: `DevFest2019`