阿里云是如何做控制台的？图文解读这家公有云领跑者发展思路

更多深度文章，请关注云计算频道：https://yq.aliyun.com/cloud

一个大项目的技术选型

CDNext是阿里内部的一个大项目，之所以称其为大项目，是因为多方都对其都有诉求：产品工程师需要新增批量操作、细化监控图表、促进开通等；UX工程师需要掌握用户使用情况、确认主需求等；UE设计师需要创新交互、用户操作流畅、界面美观大方；开发人员需要代码优雅、使用最先进的技术、可维护性强。实际上，即便是一个较小的项目，经过小修小补，时间一长也会慢慢变成了一个大项目，并且注释不明确。因此，重构一个项目或许是个不错的选择。

重构一个项目时，需要考虑技术选型。毋庸置疑，在选择一个库/框架时，需要考虑成本，例如学习曲线、API稳定性、平台兼容性、性能表现以及文档健全程度等等。但从技术发改委的视角出发，社区繁荣、集团活跃度才是更高优先级的考虑因素。这是因为如果这个库/框架比较火，则意味着更多现成可复用的代码，更方便找到问题解决方案，同时也意味着这次技术选型生命更强，可能活的更加持久，也可能更容易招人。

通过对React、Vue、Angular三种方案简单的调研，得到了上图NPM-Stat的数据：React依旧捍卫着霸主的地位。因此CDNext项目组前端开发人员就决定使用React这一技术。

技术选型确定后，还面临着其他问题：首先，团队中有几十个从其他团队移交的控制台；其次存在多种前端架构，裸写的架构、Vue、Angular等；另外，耦合的业务逻辑在进行迁移时业务代码/逻辑可能会掉到框架层面，再次使用时需要重写；最后，不可复用的原有组件也是让人头疼的部分。

解决方案

任何一个技术产品都必须经历生老病死的各个过程，经过在集团内部进行调研，发现了一系列可用的解决方案，如Fusion、One Console、Next等，下面来一一具体解读。

解决方案之Fusion

Fusion是阿里集团内部共享的React组件库，它最大的亮点在于为设计师与前端之间提供了无阻塞式协作，设计师可以和前端开发者并行地去做同一界面；另外，它也与Sketch进行了良好的整合。

它提供了以下四项功能：

（1）一键修改组件外观，设计师只需动一动手指，就能轻松修改所有组件的视觉样式，再也不用改图改到手抽筋；

（2）快速导出Sketch模板，Fusion支持快速导出Sketch组件库，设计师们再也不用一遍一遍反复写设计文档了，避免了重复劳动；

（3）轻松管理多套组件，设计师一人便可以轻松管理多套业务组件；

（4）自动生成前端SCSS代码，设计师完成组件设计后，前端工程师可以直接使用平台生成的代码，无需投入开发资源。

以上功能都是解决组件层面的问题。上文所说的几十个控制台内的组件是可以枚举的，目前Fusion库中定义了绝大多数组件，直接替换即可。

解决方案之One Console

之前多数控制台是由多个团队维护的，理想的情况是所有的控制台都由同一团队维护。这种情况下，需要将所有控制台的代码继承下去，并能兼容各个控制台的后端框架。如果需要对所有的控制台同时进行操作该怎么进行呢？

比较好的做法是抽象出一个应用，合并所有的后端。One Console就是这类解决方案，它通过共享一个应用，大幅减免后端开发；同时能够解决所有应用的共同问题。

One Console的架构图如上所示。去掉中间橙色部分来看，每个控制台都是独立的，控制台的客户端直接调用API。由于不同控制台之间存在一些相似的工作，如风控、账号、Location、国际化等，因此可以将不同应用迁移到One Console上；所有应用迁移完之后，“全干”工程师可以从后端解放出来，专注于前端的设计开发。

目前，One Console尚未把数据的内容进行聚合，只是按简单的分块，把多个请求合并到一个请求中，发送给前端。

解决方案之Next

Next是一个体验优化专项项目，与之对应的成立了体验优化专项小组，包括前端专家、设计专家、交互专家、开发专家等。该项目的是把阿里云的体验做到极致，感觉像一个整体；

所需要的做的工作是管理产品生命周期全程体验、管理全部用户的体验、管理产品全部触达点的体验。

管理产品生命周期全程体验

管理产品生命周期全程体验是从一个优化项目开始，挖掘用户问题；在设计阶段，体验设计规划，并引入用户的角色参与设计；在上线前，引入用户参与测试；上线中，再进行A/B test等测试；上线后，注意收集用户反馈。

管理全部用户的体验

阿里云的用户共分为三类：企业用户、个人用户和中小型团队用户。对于企业用户应侧重服务企业解决方案；面对中小型团队用户，应侧重快速易用的控制台提升和互助/自行解决问题的能力；对于个人用户，应着眼于降低购买和使用门槛。

管理产品全部触达点的体验

体验优化专项小组还需要管理产品全部触达点的体验，包括知晓、了解、购买/开通、使用、费用、售后各个节点，了解产品在每一个触达的详细情况。

客户体验管理套件

对于专项优化，阿里云推出了三种优化套餐：基本包、扩展包和全能包。三种类型包在用户分析、反馈监控、数据分析、体验规范和体验检测等方面的异同如上图所示，不再一一赘述。

上文所提到的CDNext其实是一个基本包加部分扩展包中的内容。

Next是承包制的体验优化方案，产品工程师罗列完需求之后，之后所有的工作都由开发工程师完成，产品工程师不参与后续的设计。Next系列解决方案在半年前就已上线，企业控制台、UDFext等产品都采用了这种方案。

展望

通过Fusion、One Console、Next三种解决方案的配合使用，可以将所有的控制台变成一个控制台。但这不是真正意义上的控制台，因为这三种方案仅是将后端部分合在一起。目前，阿里云在开发一个新的解决方案，尝试将控制台的前端合在一个应用中；在未来，可以通过搭建的方法生成控制台浏览器端，进而实现热部署/热升级、产品快速上下架，更便捷的设计升级。

从另一方面来看，无论React还是Vue或Angular，每个产品都有被淘汰的那一天。在技术迁移过程中，组件是最大的障碍，更换框架后不仅需要重写此前积累的组件，还需要重写前端代码。在未来，我们希望能够复用前端代码，通过解耦组件与底层框架，自由拥抱前端界最新技术。