证券,信息聚合前端框架设计与搭建(二)

证券,信息聚合前端框架设计与搭建(二)

技术选型

现有的React可能比较符合需求,但react的diff&patch是O(n^3)级别的算法,这里可能会限制我们单页Component数量

UI界面的话,可以任意选用各个大厂的UI,例如ant.design(PC)ele.me(手机H5)

另外可以自然的引入React Native

但不应该绑死在React技术栈上,防止其授权失效直接导致业务下线

实现路径

早期验证业务阶段可以自行封装Component,系统内部采用封装后的Component来进行代码的编写(Wrap)

等开发中常见的工具类,常见的Class均稳定后,替换Component的内部实现,可以考虑重新通过开源的virtual dom库来实现

设立低时延展示组件

完全避开react的渲染逻辑

手动Bind数据,手动确认渲染时刻并将其渲染时机封装在Component下,避免当高频数据到来时CPU全部分配至JS引擎来处理差分数据合并而Render线程被阻塞

逐步封装Table,List等组件

证券,信息聚合前端框架设计与搭建

证券,信息聚合前端框架设计与搭建

主旨

工程上

  • 减少前端文件的大小
  • 方便更新版本
  • 最好是单页面应用,减少sso成本
  • 代码混淆

通信性能要求

对于高频信息,应以websocket为主,主要需要解决的问题是从服务器到达客户端的延时抖动,以及TCP的延时断线问题

对于中频信息,应以定时任务刷新即可满足

若是采用差分数据方法,可以减少网络IO消耗

高频信息(ms级别)

  • L2交易数据
  • L1行情更新

中频信息(分钟级别)

  • IM
  • 公司公告

渲染性能要求

优先级高的,高频信息,应尽可能快的渲染(60FPS)(16.67ms)内合并vDom事件然后渲染

中频信息按需渲染

应给调用者refresh接口,方便业务可以直接触发更新界面事件