上面三类跨平台技术,没有先进与否的区别,它们都有各自的应用场景和各自的瓶颈问题,在优酷App中也使用到了上面这三类跨平台技术:
- 基于“WebView”的跨平台框架,经常用于营销页面、活动页面,这种快用快消的场景之中;
- 基于“泛Web容器方案”的跨平台框架,阿里内部使用的是Rax,目前常被用于收银台页面、大作业页面,这类对动态性、性能有要求的场景之中;
- 基于“自绘引擎”的Flutter跨平台框架,目前常被用于一些通用二级页之中,这类场景对开发成本、性能有所要求,但对灵活性要求不高。
当了解了这三类跨平台技术以及它们在优酷中的应用场景后,再结合上一节提到的优酷碰到的研发效能瓶颈问题,可以知道这三类技术方案均无法较好的解决碰到的问题,而任何技术的演进都是不断在已有技术基础之上不断揉捏、组合、提取、精炼的,下面让我们看看GaiaX是采用何种技术形态来解决研发效能问题的。
IDE搭建+双端渲染

由于是为了解决客户端同学在App研发过程中碰到的研发效能问题,在技术形态上考虑了统一性、一致性、易用性、可拓展性、动态性之后,GaiaX决定采用自定义DSL来搭建UI,并使用Native原生UI组件进行渲染的技术形态。自定义的DSL被称作模板,其中包含三个子DSL:一个用来描述UI元素之间的层级和嵌套关系 - index.json;一个用于描述UI元素的样式和布局信息 - index.css;一个用于描述视图元素的数据绑定信息和动态扩展信息 - index.databining。

自定义DSL好处多多。模板可独立存在,这样可以通过网络对模板进行下发和更新,来达到动态更新模板的目的,从而解除常规开发中渲染产物对UI描述信息的耦合。样式的描述使用的是标准CSS规范,这样不仅业务方更容易接受和理解,也为将渲染产物拓展到H5、小程序上留下了可能性。模板可自由扩展能力边界,这也为后来增加JS逻辑留下了口子,也能让模板在一定情况下有更强的动态性。除了以上这些,为了减少开发人员的使用成本,也为了降低SDK的维护成本,GaiaX团队也提供了用于模板搭建的IDE,使用方通过拖拽、搭建就能构建出自己期望的UI模板。
至此,一个使用自研IDE搭建模板并使用Native原生UI组件渲染的技术形态就此产生,由于从搭建、到解析、再到渲染都掌握在自己手中,优酷App迭代过程中碰到的研发效能瓶颈问题都可以得以解决。
动态化能力

上文中我们详细说明了GaiaX的基本技术形态,但其中对动态化的能力却未进行详细说明,相信很多读者对这个部分都很感兴趣。在GaiaX中,将动态化的能力分成了三类,分别是模板的动态化、模板的弱逻辑动态性、模板的强逻辑动态性,每类动态化的能力都解决了不同场景的问题,并且可以被渐进使用,下面分别介绍一下: