注册 / 登录

创新前端开发架构——编排式开发和基于属性的前端类库

分会场:  测试实践/测试工具链建设/大前端&移动端

 

案例来源 :

案例讲师

段金辰

爱奇艺产品技术中心 客户端技术部门

当前在爱奇艺任职研究员。
拥有超过10年的全职软件研发经验,此前曾分别在(按时间倒序)阿里巴巴任职技术专家、微软任职SDE、伊斯曼柯达任职UX Development Lead 等,专长于库、云端、前端(含混合移动端)、企业端(On-premises)、桌面端、后端等的架构和开发,以及分布式、信息安全、数据流等。

扫描二维码分享案例

 

案例简述

 

前端开发日益丰富、日益复杂,框架越来越多,但是本质是什么?
业务发展变化迅速,页面变来变去,前端人员人员忙不过来,但却职业提升缓慢?
为了解决前端开发的痛点,作者发展出了基于编排的前端开发方法,通过这套架构和方法论,创新性的将前端开发分成表格编排和渲染引擎两部分,可以极大的降低一般性前端页面的开发门槛。业务开发者只需要写一个表格,剩下的工作交给渲染引擎完成。
同时,作者在编排式开发的实践中,建立了一套基于属性操作的React前端类库,通过封装属性简化了代码操作,彻底替代各种绑定。
按此方法论,前后端人员的分工将会发生改变。前端人员不参加一般性页面开发,专注引擎维护;后端人员通过编排直接生产页面,而前端开发效率大幅提升。(示例通过AntD实现)

 

案例目标

 

爱奇艺 PC 端软件拥有大规模的使用量,在互联网等业务高速发展的背景下,快速迭代和及时响应给软件的更新和升级体验带来了一定压力,考虑到传统软件本身的自维护性和自分发性,我们需要有一套完善的方案,来能保证软件的日常运营更新、功能迭代更新、Bug 修复的快速进行,以及升级体验的快速平滑过渡,同时保证稳定和高效的性能。

 

成功(或教训)要点

 

通过采用 Web Native 技术,保证了功能的研发和发布的高效;通过部署前端资源包,保证了升级体验的无感和流畅;通过实现界面层和逻辑层的高度配置化,保证了运营的灵活和低成本;通过不断优化架构和运算机制,保证了系统的运行稳定和高效。

 

案例ROI分析

 

从每2个月发布一个覆盖全网的新版本,加速为每2到3周为一个频率周期;每次全网覆盖升级过程,从1个月降低至2天以内;用不到10人规模的团队和1年的时间,重新打造了一个花费数年完成的软件部分;软件中大部分页面/窗口的运营更新,大多数时候不再需要研发团队参与,而且更为灵活高效;软件发布前内测 Bug 率也降低至历史最低。

 

案例启示

 

偏向内容提供型的传统PC端软件,可以考虑通过 Web Native 技术来实现更为敏捷的开发模式;同时,尽可能实现软件的全面配置化控制,以减少运营维护成本,以及提高各组件复用性,并以此来提升各模块的应用场景和可被测试验证程度,从而提升稳定性。

 

案例在团队中的意义

 

已知的首个PC端 Web Native 架构,能快速响应需求,并针对大量的数据内容、展示形态、业务逻辑进行优化,包括性能、可扩展性和自适应性。 注:爱奇艺PC端软件当前拥有超大规模使用量,以及视频领域桌面端最大市场占有率。

 

领取大会PPT

我要参会

大会全套演讲PPT

立即领取

大会即将开幕,点击抢票!

我要参会