首页 > 社交 > 科普中国

基于优酷业务特色的跨平台技术

常驻编辑 科普中国 2022-11-17 业务   技术   效能   组件   周期   场景   模板   需求   特色   能力   动态   平台
  • 以React Native为代表的“泛Web容器方案”跨平台框架。这种方案放弃了WebView渲染,采用原生自带的UI组件作为核心的渲染引擎,所以这种方案的性能比第一代方案要好很多。代表作就是:ReactNative、Weex。这种方案保持了JS作为开发语言,使用JSX进行UI页面的搭建。
  • 以Flutter为代表的使用“自绘引擎”的方式来进行UI渲染的跨平台框架。Flutter既不用WebView进行组件渲染,也不使用原生组件进行渲染,它完全搞了一套跨平台UI渲染框架,渲染引擎依靠跨平台的Skia图形库来实现,手机平台只需要提供一块画布即可。同时开发语言使用既支持JIT又支持AOT的Dart语言,既提升了执行效率,也为支持动态化提供可能。
  • 上面三类跨平台技术,没有先进与否的区别,它们都有各自的应用场景和各自的瓶颈问题,在优酷App中也使用到了上面这三类跨平台技术:OHp拜客生活常识网

    • 基于“WebView”的跨平台框架,经常用于营销页面、活动页面,这种快用快消的场景之中;
    • 基于“泛Web容器方案”的跨平台框架,阿里内部使用的是Rax,目前常被用于收银台页面、大作业页面,这类对动态性、性能有要求的场景之中;
    • 基于“自绘引擎”的Flutter跨平台框架,目前常被用于一些通用二级页之中,这类场景对开发成本、性能有所要求,但对灵活性要求不高。

    当了解了这三类跨平台技术以及它们在优酷中的应用场景后,再结合上一节提到的优酷碰到的研发效能瓶颈问题,可以知道这三类技术方案均无法较好的解决碰到的问题,而任何技术的演进都是不断在已有技术基础之上不断揉捏、组合、提取、精炼的,下面让我们看看GaiaX是采用何种技术形态来解决研发效能问题的。OHp拜客生活常识网

    IDE搭建+双端渲染

    OHp拜客生活常识网

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

    OHp拜客生活常识网

    自定义DSL好处多多。模板可独立存在,这样可以通过网络对模板进行下发和更新,来达到动态更新模板的目的,从而解除常规开发中渲染产物对UI描述信息的耦合。样式的描述使用的是标准CSS规范,这样不仅业务方更容易接受和理解,也为将渲染产物拓展到H5、小程序上留下了可能性。模板可自由扩展能力边界,这也为后来增加JS逻辑留下了口子,也能让模板在一定情况下有更强的动态性。除了以上这些,为了减少开发人员的使用成本,也为了降低SDK的维护成本,GaiaX团队也提供了用于模板搭建的IDE,使用方通过拖拽、搭建就能构建出自己期望的UI模板。OHp拜客生活常识网

    至此,一个使用自研IDE搭建模板并使用Native原生UI组件渲染的技术形态就此产生,由于从搭建、到解析、再到渲染都掌握在自己手中,优酷App迭代过程中碰到的研发效能瓶颈问题都可以得以解决。OHp拜客生活常识网

    动态化能力

    OHp拜客生活常识网

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

    相关阅读:

  • 王冰冰状态曝光,皮肤白皙,长相非常可爱业务能力很强
  • 中通快运怎么样(中通快递2020年业务量)
  • 银行业务有哪些(银行的基本业务活动有哪些)
  • 哪里招业务(教招)
  • 如何提高业务能力(如何提升业务和专业能力)
  • 什么是融资租赁(融资租赁业务的流程图)
  • ETN公链测试网即将上线,将成为WEB3.0应用基础设施
  • 中兴通讯2022年第一季度净利22.17亿同比增长1.6%
  • 网宿科技股份有限公司2021年年度报告摘要300017
  • 关于北京市政务服务中心恢复现场业务办理的公告
    • 网站地图 |
    • 声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。文章内容仅供参考,不做权威认证,如若验证其真实性,请咨询相关权威专业人士。