互联网江湖，桌面客户端框架技术比武大会

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做为桌面客户端开发框架。