前后端整合的EPG系统

前后端整合的EPG系统

焦磊  ,卢金禹 ,华博 ,解文龙

河北广电无线传媒股份有限公司  河北省  石家庄市  050011

一、摘要

随着web技术的发展，根据使用技术以及出现的时间的不同，前后端整合的方式可以从早期到现在依次分为前后端混合、前后端分离-CSR（客户端渲染）、前后端分离-SSR（服务器渲染）三种。由于IPTV的业务特点，在EPG系统开发设计上，目前主要处于SSR。但是基于CSR主要的问题在于首页载入较慢，页面内容需要主动上报，影片推荐呈现速度受机顶盒硬件影响等问题。为了解决这些问题，我们基于SSR方法，提出一种前后端整合的EPG系统。

关键词：EPG、服务器渲染、前后端整合、IPTV

二、背景

目前EPG系统主要以单页面为主，页面彼此独立，这种系统设计方便了故障定位，但是也不利于系统工程维护以及代码优化升级。近年来由于React[1]、VueJs等组件化的前端框架的出现，发展出CSR技术。以河北EPG系统为例，开发上也进行了技术迭代，对原有EPG进行了组件化升级，提高了新页面的开发效率和质量。机顶盒访问EPG[2]的流程如图1所示：1、Request：机顶盒通过内置浏览器发出页面请求。2、服务器通过对应的Controller处理用户请求。3、将机顶盒所需要的HTML和JS返回机顶盒。4、浏览器通过Ajax对Server发出数据请求，获取影片详情、观看记录等数据。5、同步骤2。6、Controller向Model查询用户所需要的数据。7、回传数据。

图1机顶盒访问EPG流程图

由于前端框架必须等待所需要的资源都加载完后才能够开始进行页面初始化渲染、页面中的主要内容皆是通过代码动态产生，导致如果EPG内容过多就会造成加载缓慢的情况。

后面发展出的SSR技术，让客户端在载入网页时，一开始就能够直接取得整张渲染好的页面。加载流程如图所示。虽然该开发方式能够降低接口请求、首页载入速度慢的问题，但在IPTV业务领域，可行性以及采用了SSR模式带来的其他问题，主要在现网服务器架构上改动过大，增加了系统运维复杂度。

图2 SSR技术流程图

为了解决SSR开发方式衍生出的问题，本文提出一个基于网页模板的前后端整合框架，将EPG的前端网页模板自动转换成后端的网页模板，并产生说明文件。只需要根据说明文件编写后端数据业务逻辑，录入对应数据即可完成原页面的封装升级。发挥了SSR的优势的同时，在不改动服务器原有系统架构的前提下降低EPG系统开发与维护的复杂度。

三、系统架构

本文设计一个前后端整合的EPG系统，系统架构图如图3所示，将前端开发人员使用React[3]、Vue等开发的前端代码通过前端框架适配器与前后端整合框架衔接，根据语法配置和注入配置，以及API文档生成器分析出的API说明文件，后端工程师依据说明文件完成注入配置后，文件合成器合成出正确的前后端混合的EPG网页。

图3 前后端整合架构示意图

本系统最核心的部分就是前后端整合框架，主要完成了：

1、制定前端框架适配器标准，让几个主流前端框架的网页模板转换为可用于网页模板生成和API文档生成的资料结构。

2、根据前端适配器得到的资料转换成后端网页模板，达成自动将前端框架内的网页模板转为后端网页模板的功能。

3、指定后端语法模板标准，只要通过配置文件，就能转换出不同的后端页面模板。

4、使用API Doc的格式标准，自动提取前端框架内符合API Doc格式的内容，并通过API Doc软件，生成后端网页模板的API文件。

3.1 抽象语法生成器

在本研究中，抽象语法生成器作为前端框架模板转换成后端网页模板的中介标准，将前端框架内的网页模板转换为抽象语法树后，再通过网页模板生成器使用抽象语法树产生后端网页模板。针对EPG页面，我们设计了三种抽象语法树的节点。1、元素节点（Element Node）：用于记录HTML或者XML的标签名称、属性、网页模板的相关逻辑判断式，以及父子节点。2、表达式节点（Expression Node）：用于记录HTML、XML标签的起始标签与结束标签中，包含程序表达式的字串。3、文字节点（Text Node）：用于记录HTML、XML的起始标签与结束标签中的纯文字。

为了使后端网页模板生成器适配不同的后端语言，我们设计了后端语言网页模板相关的配置文件，用以将前端框架网页模板转换为不同的后端网页模板，并且能够兼容强类型语言与弱类型语言。如图4所示如下：

图4 后端网页模板配置文件

3.2 API文档生成器

通过后端网页文件生成器完成了前端框架的转换后，额外还需要分析页面所需要的数据，这时候就需要通过API文档生成器，通过由前端工程师，在前端页面中以注释撰写相关的说明，API文档生成器会自动产生链接后端模板所需要的API说明文件，让后端工程师能够通过该文件准确地进行后端接口的开发。降低以往前后端整合时高昂的沟通成本。下图为一个前端详情页的接口描述。

图5 前端详情页的接口描述

里面约定了详情页需要用到的参数，如电影名称、电影数据对象等。在生成后端代码的时候API文档生成器会根据这些注释自动生成一些通用场景的代码，如获取影片名称、影片数据等，还允许后端开发补充一特定的API和后端代码。图6所示是经过转换后的详情页部分代码。

图6 转换后的详情页代码

四、结论

本文提供了一种基于网页模板的前后整合框架，基于现有主流的前端框架与后端语言之上，设计了一套抽象语法树以及后端网页模板生成流程，改善了以为前后端混合开发所造成的前后端高耦合、职责混杂不清的问题，并且在保持前后分离开发的同时，对IPTV现有服务环境没有造成改动，避免了采用SSR方法带来的运维成本提高等问题。

[1]S.Aggarwal, “Modern web-development using reactjs” International Journal of Recent Research Aspects,vol.5,no. 1,pp. 2349-7688,3 2018

[2]IPTV业务中的EPG展示管理系统的设计与实现. 卢金禹.石家庄铁道大学,2019

[3]Web前端开发技术与优化研究. 胡锋;吴多智.电子技术与软件工程,2020