得物商家客服桌面端Electron技术实践

1.业务背景

随着公司业务的快速发展，商家客服也纳入了我们的服务范围，商家客服工作台的定位是通过工具和数据服务商家，一站式解决用户购买咨询诉求。通过工具和运营策略协助商家提升服务品质，让品牌商家有动力运营好潜在的客户，从而达到提升用户服务的目标。桌面应用的转化在未来是客服产品的方向。

• 已有web端聊天系统的前提下，商家客服为什么要迁移桌面应用？

首先我们收到部分商家客服反馈：

• 用户是上帝，我们是很重视用户的反馈的，所以首先我们想的是如何在web端解决这些问题，下面我们逐一分析下以上问题我们能不能在网页端解决呢？

针对客服A同学问题：大多数客服职场的台式机是不会安装音频设备，如果人家没音频，没外音，我们能强迫他买个播放器吗，那肯定是不能的，如果是自营客服还有点处理方案，真需要，公司可以统一采购，但是ToC的显然不能强制做什么事情，所以此问题无解。

针对客服B同学问题：这句话怎么理解呢，是这样的，在一屏既有web浏览器，又有其他应用如飞书之类的PC应用叠着放，web notification通知由于是浏览器级别的，提醒不到最上层，浏览器的提醒确实有点弱（看不到提醒会影响到客服的首响，首响会影响客服的绩效，咱公司对于用户的服务效率是比较严格的），所以此问题无解。

针对客服C同学问题：em。。。好的，您说的对，web网页给商家客服的感觉就是我们平台有点赶不上形势。。。

基于上面的一些场景，想必大家已经对为何做桌面应用有个初步的了解，下面以一张图来看下web应用跟桌面应用的区别。

2.技术选型

• 为什么会选择Electron而不是其他应用开发框架？

2.1 Electron架构简介

Electron的构成主要是上面的3个大模块，每个模块各司其职，让Electron有了桌面应用的能力。

• Chromium：可以为Electron提供UI渲染能力，再加上Chromium本身就是跨平台的，所以也不用考虑代码的兼容性。只要有Chromium，就能用JavaScript，HTML，CSS这些前端开发工程师所熟知的三剑客来开发页面。

• Node.js：Chromium并不具备原生GUI操作的能力，所以Node.js正好补足了这个能力，能够调用操作系统的底层 API，比如path、fs、crypto 这些模块，甚至能集成C++。

• Native APIs：Native API让Electron有了跨平台和桌面端的原生能力，比如说它有统一的原生界面，窗口、托盘这些。

2.2 Electron与其他框架的区别

下面是Electron与Native、QT、NW应用的对比图：


• Native(C++/C#/Objective-C)不管从原生体验、包的体积、性能方面来说都是最佳的选择，但是开发门槛高，迭代速度慢。

• QT是基于C++的跨平台开发框架，跨平台应用十分广泛(Mac、Windows、ios、Android、Linux、嵌入式)，众所周知的WPS就是用QT开发的。性能很好，甚至于可以媲美原生的体验，但是整体门槛还是比较高的。

• Web技术的代表Electron 和 NW.js ，相比之前选择Electron，Electron有非常活跃的社区，有102k star，有Atom、vscode这样的大型应用都是基于Electron开发的，性能相比于natvie是肯定要差一些，但综合来看，Electron是作为开发桌面应用的目前首选。

• 值得一提的是Flutter desktop，从渲染原理看flutter是skia自绘性能优于Electron，但问题还是稳定性和生态。Electron由于是nodejs+chromium，前端的生态可以直接用，所以Flutter desktop就不纳入考虑范围的，但值得关注。

除了以上这些，最主要的一点：Electron能快速交付，业务层复用web系统的代码，只需要关注主进程就好了，并且也能满足业务需要的系统级别的一些功能。