CMS前端分离的发展历史

添加时间:2020-09-20 13:07:00

2012年加入京东,现任网站移动研发部渠道业务技术总监。多次领导京东商城主页、频道页面的技术改造和架构升级。他在高并发系统架构、前端系统架构和优化方面有丰富的经验。

对我们来说,CMS的核心目的是统一管理数据和模板,统一发布页面,从而减少之前的大量重复工作。

JD CMS于2014年提出。经过两年多的改进,现已发展成为集标准服务管理、标准构件服务、智能配送于一体的标准化导购运营体系。它具有以下特点:

建立一个快速、统一的发布和统一的体系结构;

后端不再负责页面呈现,只提供高性能、可重用的API;

主页、频道页面、垂直页面和活动页面的建立,以及单个产品页面和列表页面的可维护业务。

从基本功能和体系结构的角度,可以分为三个阶段

虚拟分类系统是一个独立的系统,用于维护促销品和促销词。它与特定的前端业务架构分离。哪条线连接到虚拟分类需要根据自己的业务逻辑开发、维护和部署自己的体系结构。说白了,虚拟分类系统提供了一些基础数据;然后,比如我想建立一个家电频道页面,我需要开发一个Web项目,然后调用虚拟分类系统获取数据,然后进行模板渲染处理。因此,虚拟分类系统在当时只是一个基本的数据维护平台,不能实现信息的共享、重用和集约化管理。会出现各种频道页面系统,导致管理混乱,性能差异,出现过多起事故。而且,每个系统都需要独立配置,工作量大,占用资源多,不能快速响应业务需求。

下图显示了当时不同业务系统的架构:

可以看出,nginx+Tomcat用于部分频道页面和活动页面,nginx+PHP-FPM用于部分频道和垂直站,与虚拟分类关系不大。一般来说,虚拟分类的数据由各个业务层获取,独立启动、部署和维护。应用层直接连接到mysql。MySQL无法抗拒,将添加一层Memcache。

升级架构,统一配置和发布流程;redis去Memcache,做大量性能压力测试,优化PHP FPM配置,单机TPS可以达到3000+;配置定时任务,保证redis数据的实时性能;

单点发布、一键预览,增强了购销维护数据的灵活性;

单机闭环、单机闭环服务设计是CMS整体架构的核心部分,需要显示的内容在本地获取、打包和验证;

由于个性化需求的增加,大量的渠道服务需要开发者逐一实现一套模板,这大大增加了开发者的工作强度。以前的模板重用方法已经不能满足业务的需要。同时,过于简单的数据模块需要手工绑定数据类型,这也增加了开发成本。在这个时候,我们必须改变它。

问题的实质是快速支持和响应越来越多的垂直页面变化;

前端与后端分离,页面呈现使前端实现,解放后端做大事;

减少了操作人员的工作量,系统简单易用,提高了导购产品的转化率;

其他系统的支持,实现CMS的集约化管理;

站点管理,统一架构,容灾,高性能,横向扩展;

通过对两个版本的CMS系统的开发,我们发现CMS只不过是管理数据和模板,而且需要良好的预览和一键发布支持。传统的数据管理是静态的数据类型,我们进行动态的数据类型设计;另外,我们做了模板管理中心,抽象了模板、层、组件、模块的概念,以达到更好的重用性。

统一体系结构

CMS系统:统一管理CMS相关数据,生成和发布页面;

数据工人管理中心:调用第三方服务进行数据验证(如库存补货不足),调用CMS系统生成并发布页面并发布到单点服务器;

单点服务器:相关页面的单机闭环实现,即CMS发布的页面存储在这些单点服务器上,每个机房部署一个;

定期更新worker页面:将单点服务器的内容同步到静态应用服务器集群,并保存历史版本。当出现问题时,可以切换回以前的版本;

静态应用服务器集群:静态备份实现将存储相关的静态页面文件。单点服务器挂起时,会降级到集群;

异步加载个性化服务:有些数据不能存储在静态页面中,比如价格/库存/推荐数据。在这种情况下,可以通过异步加载这些数据来实现个性化服务;

接入层nginx:接入层nginx负责路由请求和服务降级。

页面模板管理中心,模板,楼层,组件,模块设计,可重用;

预览、一键发布、单点管理;

H5版本直接构建,原生版本API支持;

所谓动态,就是指它可以灵活扩展,不需要联机或修改数据库字段。这样做的好处是可以快速响应电子商务网站日益灵活的推广需求。例如,促销语言:

目前常用的数据类型有文本链、小文本、商品池等。

操作界面:

动态数据类型数据结构:

Fields是一个JSON字符串,用于动态定义字段。

使用动态数据类型定义数据后,需要在模板中使用它。在CMS系统中,我们对页面、模板、楼层、组件和模块进行了划分。模块是某一数据类型的具体体现,即具有数据的数据类型。组件由模块和HTML代码段(根据模块数据呈现的一个小模板)组成;楼层由一系列组件组成,模板会引入多个楼层,当然还会引入一些JS、CSS等,***通过模板呈现出相应的页面。

Type是数据类型表,module是module表,source是数据表。根据上述逻辑,我们可以通过数据类型得到数据模块,同时得到模块对应的商品数据(商品池)。

有了这个组件,后端可以完全解放出来,页面呈现工作完全交给前端开发,实现了前端和后端的分离。

也就是说,CMS研发只负责平台和基础数据(动态服务)的维护,业务人员维护模块,前端人员独立完成组件开发、模板设计、开发和发布。

数据闭环,即数据的自我管理,即数据被维护在自己的系统中,独立于任何其他系统,并且相互独立。好处是别人的抖动与我无关。所以我们首先需要异构数据。

数据异构是数据闭环的***步。它获取依赖于系统的数据,并根据自己的业务需求进行存储。渠道业务需要异构数据,主要包括三部分:基本商品信息、第三方数据和大数据。

数据原子化处理,异构数据就是原子化的数据,所以我们可以对这些数据进行再处理和再处理,以应对未来不断变化的需求。我们有一个原子化的异构数据。虽然处理新的需求比较方便,但正是因为***批数据是原子化的,所以会非常分散。当前端读取时,mget的性能不是很好。因此,我们进行了数据聚合。

数据聚合是将多个原子数据聚合成一个大的JSON数据,这样前端显示只需要一个get。当然,我们需要考虑系统架构,比如我们使用的redis转换,这是一个单线程系统。我们需要部署更多的redis来支持更高的并发性,并且存储的值应该尽可能小。

数据验证:CMS在页面预览中有严格的数据验证逻辑,如数据格式、数据大小、敏感词等,保证页面生成无问题。

当版本降级时,静态页面将出现问题。除了页面本身的数据,隐藏JS和CSS的问题也会影响页面的显示。此时,版本将还原为前一天的正确版本;

异步服务,异步数据容灾主要是监控服务的状态和响应时间;降级访问具有隐藏功能和切换服务器的功能。

主要通过部署多个机房,监控80个端口,出现问题时可自动切断流量。

智能选择是服务于前台,为销售和运营人员提供运营支持,为每次访问提供合适、匹配的产品、品牌和促销活动的流程操作。根据用户行为推荐相关产品和活动。它可以分为群体特征和个体特征。将种群特征分为数据部分和规则部分。

数据部分与大数据平台是异构的。当然,这些数据是巨大的。我们选择前5000名的数据为异构数据。

规则部分是由景智背景创建的。审批通过后,触发MQ,通过es输出相应的数据,通道页面动态服务系统提供JSON格式的HTTP服务。前端服务异步传输相关规则参数进行调用。

智能选择实现了基于数据、定制化、个性化、自动化和半自动化的内容操作。它可以模拟人脑选择商品的逻辑,根据操作指标(Gmv、订单转化率、点击率、毛利等)选择匹配的内容。目前已应用于京东超市、产业频道、618主会场,比人工选择带来更好的改造效果,解放了购销经营者日常繁琐的操作工作,提高了整体效率。

如上所述,为了保持静态页面的数据一致性,单点服务器通过Rsync将静态文件同步到其他服务器。有时,会发现服务器负载不合理地满了。

数据必须是闭环的

其他人的界面抖动和异常返回数据影响前端显示。这对我们来说是不可容忍的,这就要求我们根据各种情况逐一检查。

目前,cmsapi通过CMS建设、建设和支持的pc和移动页面超过1000个,这对CMS具有重要意义。新的业务需求也随之增加。接下来,我们将从可视化编辑、数据统计分析、关键字管理、商品下架预警等方面开展相关优化工作。