By 技術怪咖 歐陽森林
導讀：在互聯網時代，如何將一個好的idea快速的轉化爲產品，如何在原有產品中增加新的特性，是產品能夠快速的推向市場、快速佔領的關鍵。因此，作爲客戶端的架構選型，面臨哪幾方面的需求？資深前端工程師歐陽森林針對其專業領域的經驗，有着自己獨到的見解。
前言
自從互聯網江湖上出現了一部叫做“雲”的祕籍，大大小小的門派，紛紛對外宣稱自己掌握了“雲”的核心，各種“雲”應用層出不窮，Service的各種架構在一次次的華山論劍上大放異彩，彷彿你要是不知道最新的SaaS架構，不知道微服務，那你就落後了時代。可惜，好的服務不過是內功心法，如果你的招式太過單一，用戶體驗不好，就只能表演一下胸口碎大石、銀×××咽喉的工夫，行家當然明白你內功深厚一代宗師，可打賞的終究是看熱鬧的路人甲乙丙丁，用戶感官上的體驗直接決定了究竟是少林真傳大師，還是行走江湖賣藝先生。
桌面客戶端仍然是最重要的、複雜度最高的產品。變化紛繁，招式華麗纔是廣大路人們心中高手的形象，當然也只有程序的UI交互做的好，客戶也才願意買單。
在互聯網時代，如何將一個好的idea快速的轉化爲產品，如何在原有產品中增加新的特性，是產品能夠快速的推向市場、快速佔領的關鍵。因此，作爲客戶端的架構選型，也就面臨以下幾個方面的需求：
- 開發速度快，能夠快速迭代，快速試錯
- 客戶端能夠跨平臺，同時適應Windows和Mac平臺
- 用戶界面友好，滿足用戶對界面的苛求
- 能夠快速與第三方的C++應用、Web應用集成
- 客戶端安裝包大小適中，減少用戶的下載和安裝時間
- 支持XP系統(國內還有近10%的用戶是XP系統)
- 最大化利用公司現有的開發人員，減少因爲技術選型引起的大規模人員變動
來看看都應該選那些武功
客戶端的開發技術/框架，主要以下有幾種：
- 純Native開發, C++/C#/duilib+C++(Windows), Objective-c(Mac)
- Qt(Windows/Mac)
- NW.js/Electron(Windows/Mac)
- 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混合的應用非常方便。
| 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作爲桌面客戶端開發框架。
