互聯網江湖，桌面客戶端框架技術比武大會

By 技術怪咖 歐陽森林
導讀：在互聯網時代，如何將一個好的idea快速的轉化爲產品，如何在原有產品中增長新的特性，是產品可以快速的推向市場、快速佔領的關鍵。所以，做爲客戶端的架構選型，面臨哪幾方面的需求？資深前端工程師歐陽森林針對其專業領域的經驗，有着本身獨到的看法。

前言

自從互聯網江湖上出現了一部叫作「雲」的祕籍，大大小小的門派，紛紛對外宣稱本身掌握了「雲」的核心，各類「雲」應用層出不窮，Service的各類架構在一次次的華山論劍上大放異彩，彷彿你要是不知道最新的SaaS架構，不知道微服務，那你就落後了時代。惋惜，好的服務不過是內功心法，若是你的招式太過單一，用戶體驗很差，就只能表演一下胸口碎大石、銀槍刺咽喉的工夫，行家固然明白你內功深厚一代宗師，可打賞的終究是看熱鬧的路人甲乙丙丁，用戶感官上的體驗直接決定了到底是少林真傳大師，仍是行走江湖賣藝先生。

桌面客戶端仍然是最重要的、複雜度最高的產品。變化紛繁，招式華麗纔是廣大路人們心中高手的形象，固然也只有程序的UI交互作的好，客戶也才願意買單。

在互聯網時代，如何將一個好的idea快速的轉化爲產品，如何在原有產品中增長新的特性，是產品可以快速的推向市場、快速佔領的關鍵。所以，做爲客戶端的架構選型，也就面臨如下幾個方面的需求：

1. 開發速度快，可以快速迭代，快速試錯
2. 客戶端可以跨平臺，同時適應Windows和Mac平臺
3. 用戶界面友好，知足用戶對界面的苛求
4. 可以快速與第三方的C++應用、Web應用集成
5. 客戶端安裝包大小適中，減小用戶的下載和安裝時間
6. 支持XP系統(國內還有近10%的用戶是XP系統)
7. 最大化利用公司現有的開發人員，減小由於技術選型引發的大規模人員變更

來看看都應該選那些武功

客戶端的開發技術/框架，主要如下有幾種：

1. 純Native開發, C++/C#/duilib+C++(Windows), Objective-c(Mac)
2. Qt(Windows/Mac)
3. NW.js/Electron(Windows/Mac)
4. CEF(Windows/Mac)

下面分別就這幾種開發技術/框架，分析其適用的場景和優缺點：

Native開發

在桌面客戶端開發中，純Native開發是一直沿用至今，也是使用最多的技術。使用Native開發，可以實現最好的性能，能夠比較容易的與第三方的C++應用集成。

優勢：

• 客戶端性能比較好
• 安裝包比較小
• Windows比較容易兼容XP

缺點：

• 界面開發複雜，開發週期長，沒法實現快速迭代
• 跨平臺開發困難，須要針對Windows和Mac分別開發，人員投入大，後期維護困難
  純Native開發的優缺點，使得其適用於客戶端性能要求高、界面簡單、客戶端安裝包小、開發人員富足等場景。

Qt

Qt一直以來被許多用戶做爲跨平臺客戶端開發的首選，其功能強大、支持的操做系統豐富、與C++結合緊密，其在某些特定領域(如嵌入式領域、軍工、安防監控領域等)很是受歡迎。

優勢：

• 支持的操做系統豐富、跨平臺性好
• 性能比較好，接近純Native開發的性能
• 功能豐富、具備各類成熟類庫

缺點：

• Qt開發人員不足，市場上Qt的開發人員一直都不多
• 庫太大，致使安裝包也會過大
• Qt學習成本高，須要花費不少的時間和成本才能達到熟練開發的程度
• 界面開發效率不高，知足不了互聯網快發迭代的要求
• Qt使用GPL受權協議，須要商業受權協議才能作商業應用

從使用的狀況來看，Qt做爲跨平臺的桌面端開發框架，有其有力的方面，但缺點也制約了其快速發展和在客戶端開發的大規模使用。

NW.js/Electron

隨着PC機不斷提高的機器性能以及H5標準的發展，利用JS語言依靠Browser爲載體的B/S體系軟件，有着很強的交互表現力，使用Html/JS做爲UI的開發語言，能夠十分高效快速的完成各類複雜界面（尤爲是各類動畫效果）開發。

隨着Nodejs和Chromium的CEF愈來愈成熟，出現了將Nodejs與Webkit集成的開源框架，比較成熟的有NW.js(前身node-webkit)和Electron(前身atom-shell), 該類型的框架既能使用Html/JS來開發UI界面，又能集成C++庫來完成大計算量的任務，使得開發基於Web和Native混合的應用很是方便。

NW.js和Electron相比，各有優缺點，對好比下表：

Item	NW.js	Electron
Sponsor	Intel	Github
Project inception	2011	2014
Supported System	Windows/Mac/Linux	Windows/Mac/Linux
Minimum Windows Version	Windows XP	Windows 7
Apps build on it	WhatsApp for Desktop, Messenger for Desktop and more	Slack, Atom, Visual Studio Code, Skype and more

因爲集成了Node.js和Webkit，以及豐富的Node.js第三方庫，NW.js和Electron提供了徹底使用Javascript來開發客戶端的能力。只要熟悉前端Web開發，就能迅速開發出與傳統客戶端相媲美的客戶端軟件，開發速度和功能都能知足目前互聯網時代的要求，你們的前端開發人員儲備，海量的Web 框架和UI組件，使得它們成爲了目前最煊赫一時的客戶端開發框架。

Electron和NW.js相比較來講，Electron的發展更快、bug更少、貢獻者更多、社區更活躍。參考知乎上的某篇問答： [維護一個大型開源項目是怎樣的體驗？ - zcbenz 的回答]（https://www.zhihu.com/question/36292298/answer/102418523） ，根據NW和Electron的做者本身的回答，顯然Electron比NW.js更好。若是不考慮支持XP系統，Electron更適合做爲客戶端的框架。

優勢：

• 跨平臺性好，能夠同時支持Windows、Mac和Linux
• 開發速度快，可以快速構建產品推向市場
• 前端人員儲備豐富，招聘開發人員容易
• 框架開源，升級比較快

從開發桌面客戶端的便捷性、跨平臺性等來看，NW.js和Electron幾乎知足互聯網時代的客戶端架構需求，但它們也存在一些不足。

• Electron支持的最低Windows版本是Windows 7， 當開發的產品須要支持XP系統時，只能選用NW.js
• NW.js和Electron對透明窗口支持很差，NW.js支持Vista、Electron支持Windows 7以上的系統，而且必須在DWM(Desktop Window Manager)打開的時候才能實現透明窗口，NW.js和Electron的透明窗口沒法調整大小，Electron在Mac上，透明窗口的陰影顯示不出來
• 因爲集成了Webkit瀏覽器，客戶端安裝包過大
  不考慮實現透明窗口，Nw.js和Electron是目前桌面客戶端跨平臺方案中最廉價和最通用的方案，所以，在作客戶端框架選型時，能夠優先考慮NW.js和Electron。

CEF

Chromium Embedded Framework (CEF)是個基於Google Chromium項目的開源Web browser控件（俗稱谷歌親兒子），支持Windows, Linux, Mac平臺， 其包含C/C++程序接口，可以完美的與C++庫集成，完善的支持Html5 Web頁面開發，而且能夠經過修改編譯選項和源代碼後編譯的方式來實現剪裁CEF和提供原CEF沒有的功能，定製本身的窗口類型。

優勢：

• CEF能夠經過編譯和修改源代碼的方式來定製
• 能夠經過C++控制窗口類型，支持透明窗口
• 可以使用最新的CEF來兼容最新的Javascript標準和CSS，或者固定CEF的版原本支持Windows XP
• 底層與C++集成容易
• 可使用Javascript來開發UI，C++實現大計算量的任務

缺點：

• 與操做系統相關的功能，如讀取註冊表、寫文件等功能，須要C++實現，增長了一些C++開發的工做量
• 不通過裁剪的CEF，安裝包會過大
  對於要實現透明窗口和集成大量的C++模塊的應用，CEF是個不錯的選擇。

結論

在互聯網時代，選擇一個合適的客戶端框架，對於一個產品快速的推向市場，有着相當重要的做用。NW.js、Electron、CEF等Web browser模式的開發框架，可以完美複用現有的Web開發框架和技術，極大的提升開發速度，實現產品的快速迭代、最終實現產品的成功。

參考

咱們在2015年初作全時蜜蜂客戶端的架構選型時，曾考慮過NW、Electron和CEF三個框架，最終因爲蜜蜂客戶端要兼容XP、實現透明窗體和集成比較多的C++模塊而選擇了CEF。事實證實，使用CEF，咱們作到了每週發一個小版本、每月發一個大版本的快速迭代，不間斷且快速給客戶提供了好用的新功能。並且據筆者觀察，釘釘也在最近捨棄了NW換成了CEF做爲桌面客戶端開發框架。