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 - 完成組件渲染的閉環