上云利器，K8S应用编排设计器之快到极致

Posted 2021-01-07

前言
在前面的文章中，我们已经提到，华为云有一个上云利器：应用编排设计器。作为华为云应用编排服务与用户沟通的桥梁，设计器坚持用户体验至上的理念，以图形化方式，在鼠标点击之间，助力企业快速上云。优质的交互体验，单手即可操作，让您边喝咖啡边上云。那么设计器的快，到底体现在哪些方面？下面我们就来聊一聊，设计器如何把快做到极致。
快速响应
俗话说，外在决定了是否要了解内在，用户对产品的印象，很大程度上取决于用户看到的第一眼界面。因此，一个能够快速呈现，干净简洁的界面是我们首先要考虑的。设计器充分考虑到浏览器渲染页面的机制，依照“做的越少，响应越快”的原则，在技术层面上做了如下优化：
a) 代码优化，按照CSS在前，JS在后的顺序加载页面，保证页面的快速呈现，防止JS加载时阻塞页面。
b) 代码充分的合并和压缩，尽可能的减少数据传输量
c) 减少HTTP请求数量，首页仅需加载静态文件。
d) 90%的用户操作均在前端进行，不会涉及后台交互
e) 启用缓存
快速引导
对于新用户来说，能够快速上手很重要。只有真正的使用了产品，才能对产品有更好的了解，才能获取更优质的体验。依照“所见即所得”的原则，我们要保证用户能够快速的获取需要的信息，并引导用户的操作。为此，设计器在交互上做了如下优化：
a) 首次加载，弹出引导页面，引导用户快速了解设计器各个功能组件
b) 资源列表归类分组展示，常用资源优先展示，帮助用户快速找到需要的资源
c) 拖拽智能辅助，可以包含的资源高亮显示
d) 连线智能辅助，可以建立关系的资源高亮显示

快速布局
设计器作为一个图形化的编辑器，为用户打造一个可视化的应用模型，是我们的一大亮点。用户通过鼠标的点击和拖拽，即可完成对应用模型的搭建。当然设计器做的不止这些，我们要做的是，帮助用户快速的搭建自己的应用。为此，设计器在图形化操作上做了一系列的优化：
a) 边框自动伸缩：智能判断布局空间，自动伸缩边框大小，省去用户反复调整边框的操作
b) 资源复制：快速克隆一组资源，效率成倍提升
c) 一键美颜：布局太乱，不美观怎么办？试下一键美颜功能，一键式布局。
d) 撤销/重做：操作错了怎么办？撤销/重做功能帮你快速恢复，解决后顾之忧。

快速编辑
作为应用编排服务的设计器，对模板的编辑能力必不可少。传统的手写模板，不仅耗时耗力，而且对编写者的门槛要求比较高。编写者要充分了解各种资源的属性信息和关联关系，还要具备一定的YAML和JSON的语法能力。这很大程度上加大了产品的使用难度，使得大部分用户只能望而却步。设计器抓住这一痛点，为模板的编辑功能添加了很多使用技巧和优化：
a) 属性智能提示：对于选中的资源，属性栏中实时显示该资源包含的属性信息，包括取值说明，使用建议等等。
b) 必选属性自动添加：对于资源的必选属性，设计器会尽可能的附带默认值，减轻用户编写负担
c) 可选属性一键添加：对于资源的可选属性，可根据需要一键添加
d) 关联关系自动补全：资源之间的关联关系跟随应用模型设计自动联动
e) 函数智能辅助：常用函数进行提示，并支持一键添加
f) 一键生成/更新inputs：模板输入参数，一键式生成
g) 实时代码提示：作为一个优质的编辑器，代码提示功能必不可少
h) 语法实时校验和提示：实时校验，语法有问题实时提示，专治语法不熟悉，手误等疑难杂症。

结束语
在应用编排设计器中，还有很多优化的细节，这里就不一一细说了。设计器致力于不断提升用户体验，持续的进行细节优化，努力为客户打造上云利器，帮助更多企业快速上云。