9 月 13 日,2025 Inclusion・外滩大会「开源嘉年华」正在限量报名中! 了解详情
写点什么

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

  • 2020-03-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-03-17 10:001161

评论 2 条评论

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

供配电学习笔记 day3

万里无云万里天

电力 工厂运维

Go 语言专题之Sync.Mutex底层

Go 互斥锁Mutex RWMutex

fm足球经理Football Manager 2022 for mac 下载安装包

你的猪会飞吗

Mac游戏下载

携手并进 共创未来丨东软睿驰与中国移动上海产业研究院达成战略合作

科技热闻

揭秘”大模型加速器”如何助力大模型应用

袁袁袁袁满

人工智能

HBase 在统一内容平台业务的优化实践

vivo互联网技术

HBase 连接池预热 compact优化

“离职员工”试图打包资料带走,如何防止敏感数据外泄?

极盾科技

数据安全

人形机器人的理想与现实

脑极体

AI

30天拿下Rust之超级好用的“语法糖”

希望睿智

语法糖 rust语言

供配电学习笔记 day2

万里无云万里天

电力 工厂运维

中小企业和数智化的距离,只差一块华为IdeaHub

Alter

INFINI Easysearch 尝鲜 Hands on

极限实验室

console easysearch 极限科技 征文系列

好玩的卡牌游戏推荐:堆叠大陆 Stacklands(Win/Mac)中文版

你的猪会飞吗

Mac游戏推荐 Mac游戏分享

MySQL派生表合并优化的原理和实现

华为云开发者联盟

MySQL 数据库 华为云 华为云开发者联盟 企业号2024年7月PK榜

本周六!上海场新能源汽车数据基础设施专场 Meetup 来了

Greptime 格睿科技

数据库 大数据 开源 汽车 新能源

30天拿下Rust之网络编程

希望睿智

网络编程 rust语言

中国在GenAI应用方面位列全球第一!马斯克取消100亿美元Oracle服务器交易,准备自己整活!|AI日报

可信AI进展

人工智能

特权账号管不好,“删库跑路”防不住

芯盾时代

iam 删库保护 特权账号管理

如何利用AI找到能帮你引荐大客户的人

客户在哪儿AI

ToB营销 ToB获客 ToB增长 ToB销售

滴滴开源项目xiaoju-survey搞事情了...

XIAOJUSURVEY

GitHub 开源 科技 贡献者

探索办公智能助手--办公小浣熊

在书中成长

华鲲振宇携手华为云时习知,探索数字化培训新路径

轶天下事

火山引擎×威科:拥抱大模型,法律行业信息库建设再提效

新消费日报

Easysearch 数据可视化和管理平台:INFINI Console 使用介绍

极限实验室

console easysearch 极限科技

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