阿里云控制台发展思路-阿里云开发者社区

开发者社区> 开发与运维> 正文

阿里云控制台发展思路

简介: 在云栖社区举办的云栖计算之旅第3期——前端专场沙龙中, 阿里云技术专家一位给听众讲解了阿里云控制台的发展思路。分享中,他重点介绍了Fusion、One Console、Next三种解决方案,并对控制台的未来发展进行了展望。

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


以下内容根据现场分享和幻灯片整理而成。


一个大项目的技术选型

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

a1e9b03ddef4e1c742581bbede1378a489f77952 

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

 

9a67afa91930ae3c84326c1623207b1b542160ec 

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

 3c1102247606bdf0d33d86bd510a2a809cb1723a

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

 

解决方案

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

解决方案之Fusion

8ceaa2f20cbaf5bb22fe7193442779e2a092d199 

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

它提供了以下四项功能:

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

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

(3)轻松管理多套组件,设计师一人便可以轻松管理多套业务组件;

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

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

解决方案之One Console

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

846d7ef147b0e327129649177e4be68c6541a51f 

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

511fdc762c7c3ca8319fa8f90d9dbad0cecac754 

 

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

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

解决方案之Next

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

 

c767b621ce29d3c325e049e619cb345b74ad711c 

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

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

ff49366d5ddd5209bc07f2140f5c3d4ed383f78f 

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

管理全部用户的体验

38df27e28274975c486baf5bba4057acadb997e0 

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

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

bbbeb15d9cfbf82c0bde39f30d715802da0e720a 

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

客户体验管理套件

cb2419d97d4e54903bd7c06c1acf7003e52d67cd 

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

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

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

 

展望

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章