前端技術框架選型，跨端框架盤點

一年前咱們打算作一個跨端產品，但願一套代碼，同時發佈Android/IOS/Windows/Mac/Web五端，以減小開發成本及測試成本和維護成本，基於此，對市面上一些技術棧進行對比研究。

首先肯定幾個選型的標準：

• 最好具備跨平臺能力，可以一套代碼支持多端發佈
• 性能較高，各端均有很好的流暢度
• 兼容性較好，各端不會有較大差別，從而致使各端陷阱
• 開發效率越高越好
• 比較成熟，有完善工具鏈，社區

目前比較符合條件有如下5種方式：

原生開發

• 使用語言：Kotlin/Java/Swift/OC
• 優點：
  • 官方原生支持，功能強大健全，性能和體驗是最好的
  • 組件豐富，社區強大
• 劣勢：
  • Android和IOS須要分別開發，開發人力、測試人力翻倍，bug數量翻倍
  • 容易出現ios和Android表現不一致的狀況
• 社區：官方社區，比較活躍

總結：不能多端開發，開發，測試，維護成本都偏高，直接淘汰

React

• 使用語言：js/原生擴展
• 優點：
  • 能夠基於js開發，方便複用前端開發人員及部分web代碼
  • web兼容性和性能都較好，開發人員比較好找
  • react做爲響應式框架，代碼結構清晰，開發效率較高
  • 可使用ReactNative實現跨平臺
• 劣勢：
  • 使用js做爲語言，性能不及原生，js和原生通訊交互，進一步損失性能
  • 因爲UI表現使用原生模擬web/css，有必定的侷限性和兼容性，從而在實現真正跨平臺時，會常常碰到兼容性及功能侷限性
• 社區：Facebook維護，社區較爲活躍

總結：React是企業用的最多，各方面都比較成熟的方案，是能夠備選的方案，但性能和兼容性上未能到達極致體驗，須要積累避坑經驗

Weex

• 使用語言：js/vue/原生擴展
• 優點：
  • 同react，能夠結合vue框架書寫
  • 對於熟悉vue的同窗能較快入門
• 劣勢：
  • 同react，最初由阿里巴巴開發，後來轉交給Apache基金會
  • 測試bug較多，後續缺少維護動力
• 社區：Apache基金會

總結：相比ReactNative，Weex穩定度和社區較差，淘汰

UniApp

• 使用語言：js+vue+微信小程序組件
• 優點：
  • 使用js+vue，能讓前端無需學習，就能快速開發
  • 一套代碼，能同時支持APP/H5/小程序，是較爲全面的跨平臺框架
  • 兼任小程序，能同時發佈到多個小程序平臺
• 劣勢：
  • 使用js+小程序多進程架構，在ui和邏輯通訊過程當中，性能大打折扣，對實現複雜界面及極致效果時會有點力不從心
  • App實現部分不開源（最新部分開源），遇到問題只能等官方解決
  • 兼容性較差，大部分時間不是在開發，而是在優化性能及調試各端兼容性問題
• 社區：DCloud

總結：UniApp一開始是我比較看好的技術，結合小程序+vue技術棧，頗有潛力，但測試一段時間發現幾個問題：1.部分開源（不開源部分就無法優化），2.性能有瓶頸，對於想作極致體驗的App，有一個明顯的天花板，3.多端兼容性較差，常常在web端正常，在移動端就莫名其妙的不正確，會浪費不少時間在調試兼容性上，最終放棄

Flutter

• 使用語言：dart/第三方擴展
• 優點：
  • google出品，目前能夠同時跨Android/IOS/Web/Windows/Mac
  • desktop版本在開發中（計劃2020年發佈），同時也是google下一代操做系統Fuchsia的官方UI方案
  • flutter框架性能優異，兼容性小，相似react的組件化響應式開發框架，開發效率較高
  • 官方提供移動端大量第三方組件，能極快的提升UI組裝效率，關鍵還開源，哪裏很差改哪裏，開發不怕遇到天花板
  • 工具鏈強大，熱更新秒看結果，極大的提升開發效率
  • dart強類型語言，相對js在代碼提示，代碼重構上有較大方便性，在開發過程當中就能避免不少bug產生
• 劣勢：
  • UI組織方式比較另類（代碼嵌套方式，習慣了就好）
  • 不支持小程序，web實現不是最優方案，在內存和性能上會比傳統開發有較多消耗
  • 插件還需完善，第三方插件很難作到跨全部平臺（大部分能夠跨移動端）
• 社區：google pub.dev第三方社區，比較活躍

總結：Flutter做爲一個新興的技術棧，有着巨大的潛力，以google的技術背景支持下，工具鏈，社區都比較完善，Flutter打破了React依賴原生的缺點，直接本身接管渲染層，在各端有較好的兼容性，同時使用dart語言，相比js有較好的開發體驗，組織代碼更容易，再加上熱更新，開發效率直接翻倍

最終咱們選擇Flutter做爲技術棧，如今回顧一下，依然以爲Flutter是最好的跨平臺框架，使用的時候真是各類爽，不管開發效率，性能，跨平臺上，都有很是不錯表現，隨着Flutter的日趨完善，我相信還會愈來愈好。