微信号:SanDunIT

介绍:移动改变生活,技术影响未来;我的三墩,我的IT.

第三代业务支撑系统——界面互联网化之“功能控件化、业务微组件”实践之路

2016-01-25 16:02 李伟 傅成彦
↑ 点击上方蓝色文字关注我们


作者介绍

李  伟:资深产品经理。多年电信IT支撑系统设计开发经验,担任过多个大型项目的项目经理和产品经理,现主要从事敏捷产品经理工作。

傅成彦:H5前端开发工程师、架构师,有丰富的前端设计、开发经验,乐于尝试新生的前端技术。目前负责支撑业务支撑域各系统的前端架构工作。



“市场需求响应速度慢!”

    因为我们的前端开发越来越厚重,开发效率低,代码复用低,开发与维护成本越来越高;

    我们渠道间支撑能力分散,业务流程和规则存在差异大,没有标准化的业务能力封装;

    我们传统面向功能的接口方式无法支撑我们任意渠道接入和扩展,互联网接入更是遥不可及……



背景


    当下中国移动正在推进第三代业务支撑系统的互联网化转型工作,其中界面互联网是转型重点工作之一,我们其实早在13-14年就完成渠道个人业务的界面互联网化,15年完成政企业务的界面互联网化,全面的手机APP化,实现了全渠道界面操作简化以及后端服务的优化,用户体验得到大幅提升。但在此过程中也发现:

    前端的业务框架、技术框架响应速度还是慢,无法响应业务快速变化:

  • 因为我们的前端开发越来越厚重,开发效率低,代码复用低,开发与维护成本越来越高;

  • 我们渠道间支撑能力分散,业务流程和规则存在差异大,没有标准化的业务能力封装;

  • 我们传统能力开放是面向功能的接口方式开放,无法支撑我们任意渠道接入和扩展,互联网接入门槛高。

    为了使我们的技术架构更完善、业务响应更快、开发效率更高,我们探索出“功能控件化”与“业务微组件”等一系列的方式,对前端技术框架和业务模式进行变革。 


目标与实践关键点


1
系统架构升级

统一前端技术框架,引入响应式框架支撑,加强前端控件化开发能力,提高前端开发效率。

实践关键点:功能“控件化”

    项目团队自主研发Pageframe-WebUI的纯前端技术框架替代之前的基于JSP的Webframe笨重框架。梳理全渠道的界面功能,并控件化,有效的改变了之前系统前端架构重复布置/配置、重复开发、维护的现象。并且随着控件化的深入应用,优势进一步凸显:

  • Pageframe-WebUI是一套新一代的前端标准。统一的前端规范和控件集(已完成桌面端和移动端30套控件,以及UI和UE规范),所有的项目都可以接入使用;

  • 界面功能控件化降低了整体的代码开发、维护成本。项目初期,前后端开发资源投入为1比1,随着功能控件持续深入应用,资源投入有望回到0.3比1;

  • Pageframe-WebUI不仅满足浙江移动对内的渠道互联网转型,同时具备在业界共享的能力(只需引入Pageframe-WebUI提供的js和css文件)。


2
一体化支撑
整合业务流程,实现支撑能力的全集聚合,以配置化方式满足渠道差异管控要求,实现全渠道一体化支撑。
实践关键点:业务“微组件”

    以独立业务为单位横向扩展,提供RESTful 方式接入标准,在前后端分离架构的基础上增加基于页面的“微组件”桥接层,极大减少前端portal接入后端业务逻辑层的复杂度,并扩展了传统业务能力的种类。业务微组件具有以下突出优势:

  • 全渠道接入:对业务流程的各环节页面和服务进行微组件封装,实现渠道流程灵活配置与接入,具备从单渠道支撑向全渠道支撑扩充的能力;

  • 全渠道统一:通过微组件的编排和配置,化解渠道差异,实现渠道间业务开发和运维的共享,并达到用户体验的一致性;

  • 全民的营销:RESTful的接入方式是开放的,是互联网化的,它极大扩展了渠道接入范围,使人人营销成为可能;如:微信接入微组件。

功能“控件化”与业务“微组件”二维矩阵示意图:


    功能“控件化”与业务“微组件”的紧密结合的接入方式,有效的改变了原有的前端开发与业务支撑模式。纵向看,对各渠道界面功能的公共部分及个性化部分进行梳理和控件化,界面互联化深度得以加强;横向看,全面梳理分散在各个渠道的业务流程,采用界面级业务微组件对业务进行封装,实现全渠道内业务的流程统一、运营统一和营销统一,业务广度得以扩展。

以“家庭裸宽预受理”业务微组件为例,业务办理操作界面如下图:


关键技术


1
控件化之桌面版jquery easyUI plus

    特点:拥有基础的控件库;支持页面静态定义和JS动态加载,如:class="webui-panel"和$('#div').panel();支持HTML5(通过data-options属性);支持控制和样式的灵活扩展;社区活跃度和支持度高,版本完善。


2
控件化之移动版HTML5、CSS3

    特点:应用CSS3的rem和@media实现页面响应式。rem(font size of the root element)是指相对根元素的字体大小单位,集合了绝对大小和相对大小的优点。@meidia是指根据不同分辨率的终端设备使用对应的样式。

    页面展示时根据终端分辨率计算出缩放比例,通过rem实现页面元素尺寸的响应式,并通过@media实现布局的响应式。



3
控件化之js模块化Sea.js

    特点:支持JavaScript模块化开发,提高JavaScript代码的独立性,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,使代码编写更加规范、后期维护更加简便。


4
微组件之接入安全控制

    特点:不同于传统的登录方式,微组件支持了一种灵活的单点登录方式Access token。可以在不支持cookie的环境下进行调用,避免了由于终端设备、调用方式不同导致的差异性与安全性问题。

    以“移动版CRM”接入组件为例,使用Access token进行单点登录:

  1. 用户从“移动版CRM”登录,首先通过4A管理平台获取到Access token并保存;

  2. “移动版CRM”调用微组件时,将Accesstoken发送给微组件;

  3. 微组件获取到请求后解析Access token并调用4A管理平台接口对token进行认证;

  4. Access token通过认证后,成功进入微组件办理业务。


5
微组件之跨域问题

    解决:微组件使用一种前端页面DOM与DOM之间的交互方式解决跨域问题。这种交互方式不直接调用、获取对方JS和元素,而是向页面DOM发出调用请求。被调用页面DOM捕获到请求后,执行相应的方法。在该方法中加入了互相之间Access token的验证比对,也避免了绕过跨域调用后可能会带来的安全问题。

    以在移动版CRM接入亲情网为例:通过APP的返回按键可以控制微组件页面内的后退和前进(见下图)。



价值

    渠道互联网化之实现页面能力开放的“功能控件化、业务微组件”工作的一阶段已完成搭建系统框架,业务微组件库,并完成创新场景试点、已有营销案业务能力封装等,应用价值明显:

  • 节约成本:降低前端开发和维护成本,重回前后端开发的0.3:1时代;

  • 性能提升:新框架相对传统jsp页面成倍缩短了响应和加载速度;

  • JS资产化:使得无管控的js代码与后端代码一样作为资产管理变成可能;

  • 削弱渠道壁垒:通过业务组件的编排和配置化解渠道差异,实现渠道间业务共享、体验一致。

  • 助力对外开放: 页面级,RESTful方式的业务组件为移动业务能力开放提供了基础。


WHAT'S NEXT?

    伴随前端技术框架的统一与业务微组件的成功试点,三墩IT人的互联网创新和转型已初具成效,并具备一定的业界共享能力。但是,界面互联网化只是互联网转型的表像,我们的实践之路还很长,有很多工作要做,正在做,希望后续能与大家更多的探讨与分享。



这篇算是一个引子,后续的内容卖点关子:

  • 都说移动业务办理速度慢,提交订单后还能聊个天,我们用什么办法从根本上解决呢?

  • 移动业务规则复杂是出了名的,规则多,验证慢是常态,从那个角度解决它?

  • 我们的产品专业人员都要培训3个月,怎么才能让e民懂它,用它?

  • 业务部门营销策划一个活动,我们如何支撑快速上线?

  • 业务部门给广大用户发福利,抢红包,我们怎么分分钟动态支撑,这个必须有!




微信ID:SanDunIT
长按左侧二维码关注



 
三墩IT人 更多文章 运用流技术助力实时精准营销 跨数据中心大型双活X86虚拟化资源池研究 “晓”说运营商核心能力掌控之路 “晓”说运营商去O(上) 三墩IT人优秀代表三少同学获评年度杰出员工
猜您喜欢 什么是工程师文化? 互联网的兄弟姐妹们,回湖北创业(帮转) R语言入门第四讲:用cbind\/rbind结合向量 【干货】安晖:智慧城市与大数据 Apache Spark 1.5重要的修改和Bug修复