跨平臺開發技術年終盤點

一直以來，效率都是互聯網企業的生命線。而「經過技術升級實現三我的幹五我的的活，賺四我的的工資」是企業和我的一直渴望達到的共贏局面。

隨着行業競爭加重，爲進一步提高開發效率，跨平臺開發逐漸的成爲了互聯網行業的剛需。

這樣的大趨勢下，一些頭部互聯網公司基於自身技術背景和當時技術條件，推出了不一樣類型的跨平臺解決方案。

根據技術類型概括爲如下幾類：

JS+Web View渲染

課表明：PhoneGap(Adobe)

這種技術 UI 渲染徹底交給 Web View，經過 Bridge 給 Web View 增長了拍攝器、GPS、通訊錄等功能。

優勢：完整的 web 體驗，前端同窗開發效率高。
缺點：性能跟原生有巨大差別。

JS+ 原生 UI 渲染

課表明：React Native(FaceBook)，Weex(阿里)
GItHub 地址：
https://github.com/facebook/r...

開發技術仍然使用 JS 等 Web 元素，但 UI 渲染、動畫、網絡等都經過原生實現。JS 到原生的調用經過 JS 橋接器實現。

優勢：
1.體驗跟原生保持一致，Web 開發上手門檻稍低。
2.必定程度提高了性能。

缺點：
1.Android、iOS 原生開發者學習成本高。
2.礙於 JS 虛擬機和 JS 橋接器跟原生性能差距仍然較大。

基於圖形引擎渲染（拋棄原生UI）

課表明：flutter(谷歌)
GitHub 地址：
https://github.com/flutter/fl...

著名的 Cocos2d-x 也在這個陣營，該框架已經不依賴 web 技術，也不依賴原生提供的 UI 框架。經過圖形引擎本身實現渲染。

優勢：
1.擺脫系統 UI 約束，容易實現不一樣平臺代碼一致性。
2.設計方案有創新性。

缺點：
1.從 Dart 學習成本到 UI 佈局的複雜度，都在明顯拉低開發效率。
2.不支持熱更新。

基於原生 UI 渲染（差別部分圖形引擎抹平）

課表明：MLN(陌陌)
GitHub 地址：
https://github.com/momotech/MLN

MLN 剛在 GitHub 開源，名字聽起來還很陌生。開發語言使用在遊戲領域大火的 Lua（開發了你熟悉的魔獸爭霸、憤怒小鳥），具備速度快、易上手的特色。頁面佈局使用客戶端開發熟悉的 FrameLayout、LinearLayout。

優勢：
1.客戶端開發上手極快。
2.性能好，貼近原生效果。

缺點：
新推出主要應用於陌陌，缺乏第三方驗證。

跨平臺技術該如何選擇？

而這些跨平臺框架的誕生，都有着本身的技術背景。只有選對了場景才能發揮出他們真正的威力。

1.作短時間運營活動頁面

這種頁面更像快消品，活動事後兩三天就下線。運營、產品同窗更看重展現效果和如期上線。這時候 PhoneGap 類的 web 技術就是很務實的選擇。這類技術由於門檻低不少公司都有本身的技術框架。

2.以 Web 程序員爲主的團隊

建議有實力的團隊選擇 React Native、Weex 類框架。這類產品能夠很大程度複用 web 程序員的開發經驗，可是也須要有較強技術實力的客戶端開發的支持。好比性能優化，定製化開發。

3.以客戶端程序員爲主的團隊

1）這裏排除了 React Native 和 Weex。JS、VUE 這些 web 技術一般須要客戶端程序員花一週左右時間上手，另外寫代碼思惟方式的轉變，一段時間內也會繼續拖慢開發效率。

JS 虛擬機和 JS 橋接器對性能的嚴重消耗也讓這類技術性能上跟原生差距較大。

2） Flutter 也沒能扛起高性能、高效率這杆大旗。並且不支持熱更新讓不少注重迭代效率的互聯網企業沒法接受。

且不說 Dart 語言學習成本和 UI 佈局的複雜性，網上搜索和我本身的性能評測中 Flutter 也一直沒能兌現它宣稱的高性能。

3）相比之下，MLN 對客戶端開發者極其友好。Lua 簡潔的類 C 語法，基本不會對客戶端開發者形成任何障礙。

線性佈局、frame 佈局，讓客戶端開發者以爲使用 MLN 只是給本來熟悉的UI框架換了個命名規則。原來的開發經驗能夠直接遷移過來。

infoView = LinearLayout(LinearType.VERTICAL)
infoView:setGravity(Gravity.CENTER_VERTICAL)
contentView:addView(infoView)

熱重載功能方便實用，隨時看到代碼執行效果對提升 UI 開發效率幫助很大。經過官方 demo 作的性能測試，MLN 也是全部框架中性能最接近原生的。

MLN 從一線互聯網公司、一線開發人員的真實需求出發，務實的解決了一系列開發中的性能、效率問題。值得向你們推薦。

性能對比

到了性能對比這個相互傷害的環節了：

以上數據能夠看到，MLN 跟其餘主流產品相比有顯著的性能優點。一方面得益於 Lua 虛擬機的高性能。另外 MLN 的懶加載、基於 mmap 的緩存等設計也起到了明顯效果。

在安卓低端手機 oppo A3 上調用 1000 次 Lua 橋接器耗時 60 多毫秒，而 1000 次 JS 橋接器一般要 1400 毫秒左右。Lua 的高性能給了 MLN 更多的設計空間。

同時值得稱讚的是，MLN 的懶加載模式很是實用。不少功能可能 UI 展現部分只有幾 K 代碼量，而背後的控制狀態切換、用戶信息 merge、數據獲取等複雜業務邏輯卻有幾10、幾百 K 代碼。代碼結構處理很差很容易拖慢頁面展現速度。

MLN 懶加載功能，在單獨的 Loop 循環裏優先處理讓用戶看到的內容。能夠作到無論業務邏輯多複雜，頁面都能飛快展現。

另外，MLN 的 KV 存儲模塊 MLNKV 也單獨開源了（https://github.com/momotech/M...）。MLNKV 經過 mmap、雙緩存策略、記錄偏移量的value存儲等技術實現了高性能和低內存佔用並存。從多項性能指標統計來看，MLNKV算得上業內最高效的KV存儲模塊。

技術選型+精心設計造就了MLN的高性能。

MLN將來技術規劃

MLN 剛剛開源，在工具鏈支持和功能豐富程度上跟一些老牌跨平臺框架相比仍有缺失。可是從 GitHub 上 MLN 的規劃設計看，不少功能正在開發中。從不少計劃裏能夠看出廠商很有誠意。

1.繼續保持性能領先

1）支持無侵入性異步 measure (in progress)
2）列表控件加入無侵入性智能預加載(backlog)
3）近期加入聲明式 UI 給開發者更多選擇(in progress)

以上這些完成後 MLN 性能可能會超過大多數原生應用。

2.功能豐富才能真正提升開發效率

提供豐富的類庫支持才能真正幫助業務開發提升開發效率，不然跨平臺框架極可能淪爲少數極客的玩具。MLN 計劃官方支持：

網絡、svga 動畫、分享、圖片異步加載等業務開發經常使用類庫的橋接，之後會逐步加入更多功能。

工具鏈支持（如下功能會集成在插件中）：

1）模擬器(in progress)
2）代碼測試覆蓋率（in progress）
3）性能檢測（backlog）
4）升級斷點調試（in progress）

3.支持到位的技術纔有生命力

MLN 正在把陌陌內部社區遷移到 GitHub，對內外部的 issue 等提供一致的支持。

總結

以上是對跨平臺開發技術的年底盤點。放大到行業層面來看，一是國內的互聯網行業競爭激烈，企業須要不斷創新、快速試錯，敏捷應對市場的變化和需求；另外一方面，端的融合已經成爲一個愈來愈明顯的趨勢，統一的開發模式和開發體驗已是大前端發展的明確方向。

正由於我國的特殊市場環境，也給了咱們一個技術發展彎道超車的機會。而可否把握住這個機會，離不開每一位開發者的參與、每一家技術廠商的投入付出。

SegmentFault 做爲國內新一代的技術社區，但願能夠和國內的開發者、技術廠商一塊兒，共同營造一個屬於中國開發者最好的時代。

---

點擊連接，搶先體驗 MLN ：https://github.com/momotech/MLN