420.移动端流程渲染引擎
手机点一下等半天？聊聊移动端流程渲染的“痛与爽”
我发誓，我不是故意要在开会的时候摔手机的。
即便如此, 然那呈圆形之物持续转动达整整十秒之久, 表单却依旧未曾开启。于旁侧位置的领导朝着我投来一瞥, 其眼神模样, 仿若在表述“你是否具备相应能力呀”。
那一刻我真想把这破流程引擎怼到产品经理脸上。
——你懂那种感觉吗？
本来在PC端轻点一下就能瞬间开启, 而手机上是完全相同的流程, 却偏偏卡顿得如同播放PPT一般。我尝试过切换到4G网络, 切换到Wi-Fi网络, 清除缓存, 重启手机, 甚至朝着手机吹气, 然而都没有起到作用。
后来我才知道，问题不在网速。在渲染。
移动端流程渲染引擎到底是个啥
别被这词唬住。
简单来讲, 就是将审批流程之中, 那些由“表单”、“控件”以及“逻辑”在手机上绘制出来的事物。
画画呈现出良好的状态时候, 你进行点击操作, 表单会瞬间打开。当画画处于不佳的状况时，那便是你手机屏幕上出现的那个正在转动的圈圈。
我以前觉得这玩意儿不就是个前端展示吗？有什么好吹的？
许久之后, 经历了诸多被坑骗的情况, 这才终于明白, 那渲染引擎对于移动端的流程体验而言, 是至关重要的关键所在, 犹如命门一般。
为什么大多数移动端流程渲染都像屎一样
真话伤人，但得说。
很多厂商的移动端渲染，就是个“伪渲染”。
什么意思？
它其实就是将PC 端那一堆完整的流程代码, 原封不动地搬到手机上。你觉得它算优化了吗? 并没有。其情形就如同把大象给塞进浴缸里头, 随后告知你“瞧, 进去了”。
结果呢？
字段多了，页面崩
控件复杂了，卡成PPT
下拉框联动，直接死给你看
我所见识到的最为离谱的情况浮现了, 那就是其中一个审批单之内嵌套了三个子表, 还要添加十几个用以上传附件的框。当使用手机将其打开之时, 居然直接呈现出白屏的状态。
那个同事在群里艾特我：“兄弟，你们这系统是来整我的吧？”
我无言以对。
好的移动端渲染，应该像呼吸一样自然
你感觉不到它的存在，才是最好的存在。
如同你此刻进行打字操作时, 不会去思索“我的手指究竟是怎样与键盘作交互行为的”, 是不是这样呢?
移动端流程渲染也是一样。
好的引擎，应该做到三件事：
其一, 进行拆解, 并非将PC端繁杂的逻辑毫无保留地扔至手机上, 而是依据移动端的使用习惯, 对表单予以再度拆解；该折叠的实施折叠, 该分页的实施分页。
第二点, 是预判, 你要能够想到用户接下来会去做些什么, 要提前进行渲染, 比如说在填完“部门”之后, 系统会做出预判, 认为接下来你会去选择“人员”, 于是就先悄悄把人员控件给加载好, 等到你点到那一步的时候, 能够瞬间打开。
第三点, 是要做出让步, 面对复杂的逻辑以及大批量的数据, 在移动端的时候要懂得给予一定“空间”, 首先要让用户能够先看到核心信息, 而剩余的部分则在后台逐步计算, 这种方式被称之为“渐进式渲染”, 绝不能让用户长时间等待你。
这三个字做到位了，流程体验就上来了。
一个真实案例：从“骂娘”到“真香”
我们之前有个客户，集团性企业，几千人。
移动端的流程审批，以前用的是某大厂的产品。你猜怎么着？
直至每日清晨九时起至十时止, 于流程审批之高峰时段, 移动端大体陷入瘫痪状态。开启一项待办事项, 平均需历经5至8秒之等待时长。
后来他们换了泛微e启营的移动端流程渲染引擎。
第一天换完后, 那个CIO给我发了一条语音, 其语气之中带着惊喜, 说道: “哎, 今天上午进行审批时, 我点一次开一个, 我还以为手机坏掉了呢。”。
他当然是开玩笑。但那种“突然变好”的感觉，我懂。
人就是这样，被烂东西虐久了，遇到好东西反而觉得不真实。
渲染引擎背后的“脏活累活”
你以为渲染引擎就是写写前端代码？
太天真了。
真正的好引擎，干的都是脏活累活。
比如说, 存在组件级别的懒加载情况。表单之中有 100 个字段, 然而你仅仅展示用户当下需要看见的 5 个。其余的那些, 要等到用户滑动到相应位置的时候再进行加载。听起来好像挺简单的, 但是想要做到“丝滑”, 那就必须得把内存管理、渲染队列、优先级调度这些底层逻辑精心地打磨到无比极致的程度。
进一步来讲, 存在这样一种情况, 也就是离线渲染, 当出现信号欠佳的状况时该如何去应对呢? 具备良好性能的引擎能够将表单结构预先进行缓存处理, 等待网络恢复原状之后再开展提交操作, 并非每一个厂商都心甘情愿去进行此项工作, 原因在于此项工作的操作过程太过繁琐。
更是存在着手势优化这一情况, 涉及手指点击时的误差范围大小, 以及滑动所存在的惯性表现, 还有长按之后的回调之类, 当这些细微之处都精心打磨妥善时, 用户并不会称赞你；倘若打磨得不够完善, 用户就会感觉别扭, 可又讲不清楚究竟是何处存有不足。
以下是引擎至关重要的价值体现: 唯有那种用户难以用言语确切表述所感受到的出色, 这样的出色才算是真正意义上名副其实的出色啊。
别把移动端当PC的“阉割版”
这是最大的认知陷阱。
诸多的人持有这样的看法, 那便是移动端等同于“PC端功能有所缩减”, 而渲染的意思是将PC的页面予以缩小。
错了。
移动端不是阉割，是重构。
你们试着去想象, 有那么一个从事销售工作的人, 处于客户所在指定地点, 拿出手机去对一份合同展开审批操作。那么他当时所处的场景究竟会是怎样的呢?
手机屏幕6寸
可能信号不好
可能旁边站着客户
他只有30秒处理这个流程
此时此刻、这般情景里, 你要是还向他呈现PC端的那一套, 即“菜单树”以及“工具栏”还有“多标签页”, 那他必定会陷入崩溃的状态。
好的移动端渲染, 应当是, 他心里所想的, 就予以呈现。他所不需要的, 不进行展示。他接下来打算做的, 预先作准备。
这才是“引擎”该干的事——不是展示，是驱动。
最后说点人话
我见过太多被移动端流程逼疯的人。
在深夜时分仍旧处于等待审批状态的财务人员, 那个蹲在客户大门洞口位置刷着手机的年轻小伙子, 在出差行进路途之上遭受催促流程情况的企业老总……
技术是冰冷的，但体验是有温度的。
恰当的移动端流程渲染引擎, 并非致使你心生“, 好厉害”之感, 倒是会使你觉得, “, 这事儿就这么过去了? 挺顺畅的。”。
就像你出门不会想起空气的存在。
但一旦空气稀薄了，你第一个骂娘。
移动端流程渲染，就是那个“空气”。
别让它稀薄了。
需注意: 如果你同样正遭受着移动端流程的困扰, 欢迎前来找我进行交流探讨。我并非是那能拯救一切的救世主, 然而我却是见识过真正好用的引擎究竟是何种模样的。
本文是由泛微 e 启营事业群共同构建而成的, 要是出现了雷同的情况, 那么就需要联系泛微 e 启营的创始人海总来进行处理。
最新评论