阿里云控制台前端框架-阿里云服务器端搭建

2016年12月23日，在云栖计算之旅第三期——云栖社区举办的前端专场沙龙中，阿里云技术专家为观众讲解了阿里云控制台的开发思路。 分享中，他重点介绍了Fusion、One Console和Next这三个解决方案，并对主机未来的发展进行了展望。

以下内容根据直播分享和幻灯片整理。

某大型项目技术选型

CDNext是阿里内部的一个大项目。 之所以称为大工程，是因为多方都有诉求：产品工程师需要增加批量操作，细化监控图表阿里云控制台前端框架，促进激活； UX工程师需要掌握用户使用情况，确认主要需求等； UE设计师需要创新的交互，流畅的用户操作，漂亮的界面； 开发人员需要优雅的代码，使用最先进的技术，以及强大的可维护性。 其实再小的项目，经过小修后，时间长了也会慢慢变成大项目，注解也不清晰。 因此，重构一个项目可能是一个不错的选择。

在重构项目时，需要考虑技术选择。 毋庸置疑，在选择库/框架时，需要考虑学习曲线、API 稳定性、平台兼容性、性能和文档健全性等成本。但从科技发展和改革委员会的角度来看，社区繁荣和团体活动是更高优先级的考虑因素。 这是因为如果库/框架更受欢迎，就意味着有更多现成的可重用代码，这更容易找到问题的解决方案。 可能更容易招人。

通过对React、Vue、Angular三种解决方案的简单考察，得到上图中NPM-Stat的数据：React依然坚守霸主地位。 因此，CDNext 项目组的前端开发人员决定将 React 作为一项技术来使用。

技术选型确定后，还存在其他问题：第一，团队中有数十台其他团队移交的主机； 二是前端架构多种多样，裸架构、Vue、Angular等； 另外，耦合业务逻辑迁移时，业务代码/逻辑可能会落到框架层面，再次使用时需要重写； 最后，无法重复使用的原始组件也是一个令人头疼的问题。

解决方案

任何技术产品都必须经历生、老、病、死的各个过程。 在组内进行研究后，找到了一系列可用的解决方案，例如Fusion、One Console、Next等，下面我们一一详细说明。

解决方案的融合

Fusion是阿里集团内部共享的React组件库。 它最大的亮点在于它提供了设计人员和前端开发人员之间的无阻塞协作。 设计师和前端开发人员可以在同一个界面上并行工作； 此外，它还兼容集成的 Sketch Well。

它提供以下四个功能：

（1）一键修改组件外观，设计师动动手指即可轻松修改所有组件的视觉样式，无需换图改手抽筋；

(2) 快速导出Sketch模板。 Fusion 支持快速导出 Sketch 组件库。 设计人员不再需要一遍又一遍地编写设计文档，避免了重复劳动；

(3) 轻松管理多套组件，一个设计人员可以轻松管理多套业务组件；

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

以上功能都解决了组件层面的问题。 上面提到的控制台中的几十个组件可以一一列举。 目前大部分组件都定义在Fusion库中，可以直接替换。

解决方案一控制台

以前大多数控制台由多个团队维护，理想情况下所有控制台都由同一个团队维护。 在这种情况下，需要继承所有控制台的代码，并兼容每个控制台的后端框架。 如果需要同时操作所有控制台怎么办？

更好的方法是抽象应用程序并合并所有后端。 One Console就是这样一种方案，通过共享一个应用大大减少了后端开发； 同时，它可以解决所有应用程序的共性问题。

One Console的架构图如上所示。 从去掉中间橙色部分来看，每个console都是独立的，console的client直接调用API。 由于不同控制台之间存在一些类似的任务，比如风控、账号、位置、国际化等，所以可以将不同的应用程序迁移到一个控制台； 解放并专注于前端设计和开发。

目前One Console还没有对数据的内容进行聚合，只是简单地将数据分成一个请求发送给前端。

下一步的解决方案

接下来是一个特殊的体验优化项目。 相应的，成立了一个专门的体验优化团队，包括前端专家、设计专家、交互专家、开发专家等。这个项目的目的是把阿里云的体验最大化，让它感觉像一个整体；

需要做的是管理产品生命周期的整个体验，管理所有用户的体验，管理产品所有接触点的体验。

管理整个产品生命周期体验

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

管理所有用户的体验

阿里云用户分为三类：企业用户、个人用户、中小型团队用户。 对于企业用户，我们应该专注于服务企业解决方案； 对于中小型团队用户，我们应该专注于快速和易于使用的控制台升级和互相帮助/自我解决问题的能力； 对于个人用户，要着力降低购买和使用门槛。

跨产品接触点管理体验

体验优化专项团队还需要管理产品所有触点的体验，包括认知、理解、购买/激活、使用、成本、售后节点，了解产品在每个触点的细节。

客户体验管理套件

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

上面说的CDNext其实就是一个基础包加一部分扩展包。

接下来是签约的体验优化方案。 产品工程师列出需求后，后续所有工作将由开发工程师完成，产品工程师不参与后续设计。 Next系列解决方案已于半年前推出阿里云控制台前端框架，企业控制台、UDFext等产品均采用了该解决方案。

外表

通过结合使用 Fusion、One Console 和 Next，可以将所有控制台变成一个控制台。 但它并不是真正的控制台，因为所有三个解决方案都只是放在一起的后端部分。 目前，阿里云正在开发一种新的解决方案，试图将控制台前端集成到一个应用中； 未来可以通过构建方法生成浏览器端控制台，实现热部署/升级，产品框架快速上传下载，设计升级更方便。

另一方面，不管是 React 还是 Vue 还是 Angular，每一种产品总有一天会被淘汰。 在技​​术迁移过程中，组件是最大的障碍。 更换框架后，不仅之前积累的组件需要重写，前端代码也需要重写。 未来，我们希望能够复用前端代码，通过组件和底层框架的解耦，自由拥抱前端世界的最新技术。