写点什么

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

  • 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:001039

评论 2 条评论

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

和鲸协办!2025 4C大赛AI通识教育实验创新微课赛道 Q&A × 培训预告重磅来袭!

ModelWhale

千校关注!和鲸科技重磅发布人工智能通识课,助力高校一周内实现课程落地开花

ModelWhale

AI 人工智能通识课 DeepSeek 人工智能通识

托拉拽能开发软件?低代码确实能行

伤感汤姆布利柏

制造业上了MES后,生产过程透明化,实时掌握生产动态

万界星空科技

制造业 mes 制造业工厂 生产管理MES系统

和鲸协办!2025 4C大赛大数据主题赛赛事 Q&A × 培训预告重磅来袭!

ModelWhale

大数据 数据应用 数据要素 中国大学生计算机设计大赛

鸿蒙APP的测试

北京木奇移动技术有限公司

鸿蒙app 软件外包公司 APP外包公司

vivo HTTPDNS 端到端体验优化实践

vivo互联网技术

网络协议 运维工程师 httpdns 移动端

Deepseek为技术降本增效注入新动力,促进繁荣发展

xuyinyin

【OpenTiny调研征集】共创技术未来,分享您的声音!

OpenTiny社区

开源 前端 OpenTiny

DeepSeek冲击(含本地化部署实践)

京东零售技术

线上机器CPU占用高分析实践

京东零售技术

项目调度管理系统(源码+文档+部署+讲解)

深圳亥时科技

Golang赋能金融科技后端架构的高效与安全构建

xuyinyin

项目管理全流程平台(源码+文档+部署+讲解)

深圳亥时科技

满血版数据库复制工具——NineData

NineData

解决方案 迁移 同步 数据复制 NineData

如何在 NocoBase 中实现注册用户审核

NocoBase

开源 低代码 教程 无代码 注册用户审核

Dify开源平台安装指南

测吧(北京)科技有限公司

测试

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