7月QCon广州站2022,关注Web 3.0、数据架构选型、数字化转型等热门话题,点击了解 了解详情
写点什么

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

  • 2020 年 3 月 17 日
  • 本文字数:1359 字

    阅读完需:约 4 分钟

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

一、背景

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


二、场馆院线的前端技术

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



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


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


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



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


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:00598

评论 2 条评论

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

网络攻防学习笔记 Day25

穿过生命散发芬芳

5月日更 网络攻防

绍兴柯桥数码印花金昌描稿调色分色培训到哪里?兴德

Geek_196d9f

签了!百度智能云携手浙江广播电视集团共推媒体数智化转型

百度大脑

媒体 百度智能云

聊聊数据分析

数据社

数据分析 5月日更

python 常用模块详解

若尘

模块 Python编程 5月日更

访问控制

escray

学习 极客时间 安全 5月日更 安全攻防技能30讲

绍兴柯桥CAD制图培训到哪里?兴德!

Geek_196d9f

Bzz算力挖矿系统开发节点部署

薇電13242772558

数字货币 算力

“丝绸之舟”创新区块链帮扶模式

CECBC

区块链 丝路

Java设置Filter过滤了CSS等静态文件的问题

空城机

Java 5月日更

Dubbo 路由规则之标签路由

青年IT男

dubbo

绍兴柯桥电脑办公培训到哪里?兴德

Geek_196d9f

绍兴柯桥3Dmax效果图培训到哪里?兴德

Geek_196d9f

微服务注册中心:Consul——概念与基础操作

程序员架构进阶

微服务 Consul 注册中心 28天写作 5月日更

绍兴柯桥淘宝美工培训到哪里?兴德

Geek_196d9f

绍兴柯桥室内设计培训到哪里?兴德

Geek_196d9f

5分钟速读之Rust权威指南(九)

码生笔谈

rust

华为推送踩坑记录

mengxn

架构学习笔记:微服务架构与SOA架构

六维

微服务 SOA 5月日更

绍兴柯桥摄影摄像培训到哪里?兴德!

Geek_196d9f

绍兴柯桥视频剪辑影视后期PR,AE培训到哪里?兴德

Geek_196d9f

绍兴柯桥JAVA,web前端编程培训到哪里?兴德

Geek_196d9f

Go 并发编程 — 深度剖析 sync.Pool 源码级原理

奇伢云存储

并发编程 云存储 Go 语言

绍兴柯桥服装设计培训到哪里?兴德

Geek_196d9f

人生算法:内控控制点

石云升

读书笔记 思维模型 5月日更

虚惊一场

IT蜗壳-Tango

5月日更

320万开发者在用的飞桨,全新发布推理部署导航图:打通AI应用最后一公里

百度大脑

人工智能 飞桨

把数字人民币打造成全球最佳的央行数字货币

CECBC

金融

绍兴柯桥平面设计培训到哪里?兴德

Geek_196d9f

绍兴柯桥插花花艺培训到哪里?兴德

Geek_196d9f

绍兴柯桥学历提升培训到哪里?兴德

Geek_196d9f

云智前端技术如何赋能场馆院线?_文化 & 方法_阿里巴巴文娱技术_InfoQ精选文章