写点什么

云智前端技术如何赋能场馆院线?

2020 年 3 月 17 日

云智前端技术如何赋能场馆院线?

一、背景

场馆院线的互联网化,就是将场馆院线实体,通过互联网的手段,实现票务的全网分发营销。前端在该进程中,扮演着多系统操作的可视化、简易化,协调调度的流程化、规范化。本文将为你揭秘前端技术和组件库技术如何解决场馆院线前端面临的版本碎片化、需求个性化、迭代效率低、维护成本高的问题。


二、场馆院线的前端技术

一个垂类行业的系统,往往是多系统协调工作,开发和维护成本都很高,但垂类行业系统都有着较高的相似性,大多数都是由查询列表页、编辑页、详情页组成。同行业的前端系统相似性更高,需要结合行业特有的业务场景,形成行业前端解决方案,方便多套垂类系统复用,减少维护和开发成本。



(图:阿里影业云智业务前端系统架构图)


通过在开发过程中沉淀经验和对开源软件的封装,影业前端团队形成了高效的研发体系和开发规约,基于约定大于配置的理念,工程化的思想渐入业务。实现了多个项目的项目结构、文件路径、路由配置,发布和上线方式全部打通,统一管理,减少了配置时间和学习成本。


同时我们在四个部分进行了流程上的改进:



(图:阿里影业云智业务前端系统流程图)


1)前端工程化:使用 Umi 框架提供项目的基本结构和开发规范以及基础工程能力;


2)插件和工具:根据团队需要,在开源插件工具库不能满足需求时,开发了鲁班系统,一个前端工具集合;


3)行业组件库:在视觉层面积累行业经验,沉淀了行业视觉组件库,共同支撑多套前端垂类系统,助力业务的快速迭代,覆盖绝大多数业务场景;


4)前端监控和质量管理:统一的监控插件和质量管理标准,在项目生成时内嵌,无需开发时手动接入。


三、场馆院线前端组件库

在业务的开发上,我们大量使用组件库提供的交互和视觉,目前主要的基础组件库是 Antd 和 Antd Pro,通用程度较高,但对于特定的行业和业务场景还有些不够。我们深耕场馆院线和积累业务场景,在原有的组件库基础上进行了拓展,沉淀出了两套对应的场馆院线前端组件库,分别是元素级别的组件库 Lark-component 和页面级别的组件库 Lark-pro。



(图:Lark-component 组件库实例)



(图:Lark-pro 组件库实例)


在场馆院线前端系统中,如根据城市或者影院名称筛选影院的场景,基本覆盖到所有的场馆院线系统,我们对这一场景进行抽象,封装在页面级别的组件库 Lark-pro 中。



(图:日期选择视觉图)


经过对用户日期选择行为的数据进行分析,不断的优化交互体验,沉淀出满足不同需求的日期选择类型,如单日的日期选择,带左右箭头的简洁型日期选择,再对细节进行像素级别的不断打磨,落地到元素级别的组件库 Lark-component 中。


四、总结

我们试着用前端水平横向方案和组件库方案,去解决前端场馆院线问题,基于约定大约配置的理念,最大化的统一需要开发人员手动配置的内容,如项目编译配置、路由配置、镜像配置、发布管理。同时基于行业背景下,产出更加丰富行业前端组件库,去覆盖高频率使用场景。


通过不断积累和沉淀,我们在前端系统上可复用的内容会越来越多,逐步完善场馆院线的前端基础建设。在 2020 年,面对 10000+ 的影院市场,前端系统会朝着智能化搭建、积木式搭建方向演进。快速、高效、稳定的服务用户,助力阿里场馆院线实现观影人次、影院数量双第一目标。


作者介绍


阿里影业高级前端工程师 余缺


相关阅读


电影垂直行业的云智开放平台如何炼成?


阿里工程师带你了解 B 端垂类营销中心如何设计?


2020 年 3 月 17 日 10:00455

评论 2 条评论

发布
用户头像
这也太流水账了吧
2020 年 03 月 18 日 08:41
回复
用户头像
干货呢
2020 年 03 月 18 日 08:40
回复
没有更多了
发现更多内容

京东Java高开岗三面算法+数据库+设计模式,复习1个月成功拿offer

互联网架构师小马

数据库 面试 算法 设计模式 Java 分布式

架构师训练营2 ——框架设计

默默

设计一个软件框架的关键点

dony.zhang

江帅帅:精通 Spring Boot 系列 05

古月木易

Spring Boot

聊聊面向对象的设计(OOD)原则

Jerry Tse

极客大学架构师训练营 作业

0期架构Week2作业2

Nan Jiang

架构师训练营——第二周总结

jiangnanage

0期架构Week2作业1

Nan Jiang

DIP和SIP的理解和学习

拈香(曾德政)

极客大学架构师训练营 面向对象设计原则 DIP 设计原则 SIP

架构师训练营第二周命题作业

兔狲

作业

透过本质和发展看编程

拈香(曾德政)

架构师 面向对象设计 极客大学架构师训练营 面向对象设计原则

作业

chenzt

江帅帅:精通 Spring Boot 系列 05

奈学教育

Spring Boot

第2周总结

娄江国

极客大学架构师训练营

设计原则

GalaxyCreater

架构

第 02 周学习总结

夏秋

【漫画】云通信企业公众号,打造私域流量的利器

阿里云Edge Plus

云通信

软件的本质与设计原则

dony.zhang

架构师训练营 Week02 学习心得

极客大学架构师训练营

7-ELEVEn工作法

wujunmin

管理 零售

第 02 周作业

夏秋

极客大学架构师训练营

视频豪横时代,应用如何快速构建视频点播能力?

阿里云Edge Plus

音视频 CDN 直播 点播

【架构师第二周作业】依赖倒置

浪浪

你不会还不懂依赖倒置吧?赶紧来看看

hellohuan

设计模式 极客大学架构师训练营 设计原则

第二周作业

极客大学架构师训练营

架构师训练营第二周学习总结

whiter

极客大学架构师训练营

第2周作业

娄江国

极客大学架构师训练营

银行业数据治理之「数据资产管理」

数据司令

大数据 数据仓库 金融科技 数据治理 数据资产

架构师训练营第二周命题作业

hifly

设计模式 极客大学架构师训练营 UML 依赖倒置原则 接口隔离原则

架构师训练营第二周学习总结

王鑫龙

极客大学架构师训练营

架构师训练营第二周作业

Jerry Tse

极客大学架构师训练营 作业

Leader修炼指“北”:管理路上的大小Boss

Leader修炼指“北”:管理路上的大小Boss

云智前端技术如何赋能场馆院线?-InfoQ