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