Flutter對比

Flutter

• 問題：移動系統與終端設備的碎片化, 在不同平台上開發和維護同一個產品, 存在開發和適配的問題。
• 小步快跑, 交付節奏
• 框架原理和底層設計思想,渲染機制與事件處理方式,組件化解耦思路,工程化整體方法,與原生 Android/iOS 開發並沒有本質區別.
• RN
  • 熟悉Android 和 IOS開發知識
    
• Flutter
  

02 Dart

• 解決JS在語言本質上無法改進的缺陷
  • 借鑒 C 語言的基本語法
  • 借鑒 Java 語言的數據類型和內存管理機制；
  • 借鑒 Scheme 語言，將函數提升到“第一等公民”(first class）的地位；
  • 借鑒 Self 語言，使用基於原型（prototype）的繼承機制。
  • 具有函數式與面向對象的特征
  • 手機與桌面應用為JS的宿主容器，比如React，RN，Vue，Electron,NW
  • Nodejs全棧
• dart
  • 15年前，chrome內置Dart VM, 運行 Dart 代碼;
  • 專注大前端與跨平台生態的語言, 集百家之長
  • JIT和AOT
    • 即時編譯(JIT - Just in time)
      • 在開發周期中，動態下發和執行代碼，開發效率高，但運行速度和執行性能受JIT的影響；
      • 縮短產品的開發周期,例如，熱重載
    • 預編譯(AOT - Ahead of time)
      • 生成二進制，運行速度快，執行性能好；但每次執行前需要提前編譯，開發測試效率低；
  • 內存分配與垃圾回收
    • 內存分配策略, 創建對象時只需要在堆上移動指針,內存增長始終是線性的，省去了查找可用內存的過程。
    • 並發是通過 Isolate 實現的, 線程但不共享內存，獨立運行的 worker。實現無鎖的快速分配。
    • 垃圾回收, 采用了多生代算法
      
  • 單線程模型
    • 並發執行線程, 以搶占式的方式切換線程, 即每個線程都會被分配一個固定的時間片來執行，超過了時間片后線程上下文將被搶占后切換。存在資源共享，數據不同的問題；使用鎖來保護共享資源, 鎖本身又可能會帶來性能損耗，甚至出現死鎖等更嚴重的問題。
    • Dart 中並沒有線程，只有 Isolate（隔離區）,Isolates 之間不會共享內存，就像幾個運行在不同進程中的 worker，通過事件循環（Event Looper）在事件隊列（Event Queue）上傳遞消息通信。
    • 無需單獨的聲明式布局語言
      • 在 Flutter 中，界面布局直接通過 Dart 編碼來定義。
  • dart未來
    • 引擎 + 開發者接口 + 庫 + 框架 + 應用程序 => 生態
    • 第三方庫少，質量一般
    • 產品
      • Flutter 和 Fuchsia
    • 一套徹底的跨平台方案
  • Dart 憑借 Flutter 與 Fuchsia 的生態主攻前端和移動端，
  • 服務端，借助docker與go

03

跨平台開發方案的誕生背景、原理和發展歷史

• 開發，維護，成本，時間, 適配

• 跨平台

  • 多快好省

• 跨平台，三個時代：

  • Web 容器時代：基於 Web 相關技術通過瀏覽器組件來實現界面及功能, Cordova(PhoneGap)、Ionic 和微信小程序.
    • WebView + Bridge => Hybird
      原生應用內嵌瀏覽器控件 WebView（iOS 為 UIWebView 或 WKWebView，Android 為 WebView）,JS Bridge（橋）,根據與H5的交互協議，提供原生系統能力
    • H5加載、解析和渲染,比原生開發增加N個數量級；存在一邊加載，一邊解析，一邊渲染
      

• 泛 Web 容器時代：采用類 Web 標准進行開發，但在運行時把繪制和渲染交由原生系統接管的技術，代表框架有 React Native、Weex 和快應用，廣義的還包括天貓的 Virtual View 等。
  - 大量 Web 標准的 Web 容器過於笨重, 導致性能和體驗達不到原生水准;
  - Web 容器進行功能裁剪，在僅保留必要的 Web 標准和渲染能力;
  - 優化了 Web 容器時代的加載、解析和渲染, 把影響它們獨立運行的 Web 標准進行了裁剪,放棄了瀏覽器控件渲染, 采用原生自帶的 UI 組件實現代替了核心的渲染引擎,僅保持必要的基本控件渲染能力
  

  • 原生控件承載界面渲染, 但隨着系統版本變化和API的變化而變化 => follow native

• 自繪引擎時代：自帶渲染引擎，客戶端僅提供一塊畫布即可獲得從業務邏輯到功能呈現的多端高度一致的渲染體驗。Flutter
  - skia渲染引擎
  - 槳dart構建的抽象視圖結構加工為GPU數據，通過OpenGL提供給GPU宣染, 一致性體驗
  - dart(JIT-just in time,即時編譯 + AOT-Ahead of time, 預編譯) -> 開發和執行效率
  

• 跨平台開發方案

  • 思考角度
    

04

歷史背景和運行機制，並以界面渲染過程為例

• 歷史背景
  • 跨平台開發
    • 原生
      • 多語言 => 低效率 + 高成本
    • 跨平台
      • 高效+低成本+體驗一般
      • RN
        • 接近原生，只有5%的瀏覽器能力
      • 依托瀏覽器控件的web
• Flutter
  • SDK
  • 語言 - dart
  • native渲染引擎+上層開發語言
  • 視圖渲染(高保真)
  • 代碼執行和渲染性能(高體驗)
    RN與Flutter
  • RN - 通過js虛擬機擴展調用系統組件
  • Flutter - 完成組件渲染的閉環