QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

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

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

评论 2 条评论

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

高性能、高稳定、高扩展:解读ByteHouse实时导入技术演进

Openlab_cosmoplat

云原生 开源社区 大数据‘’

项目经理问我Tomcat 与 Undertow 怎么抉择?此文教她选

Java你猿哥

Java jdk Spring Boot ssm

通过HTTP/2通道实时获取IoT设备状态和数据——设备管理运维类

阿里云AIoT

Java 物联网

阿里云IoT物联网平台基础版和高级版数据进入规则引擎的流转详解——普及类

阿里云AIoT

物联网

Dapr实战—RabbitMQ binding

青柚1943

Docker RabbitMQ dapr 发布订阅 Binding

获得华为技术认证,智维数据携手华为云初创生态再添新坐标!

智维数据

华为云 智能运维 网络运维 智维数据 技术认证

PS磨皮插件DR5白金版:支持ps 2022

互联网搬砖工作者

干货,在差分对信号的应用中需要注意些什么?

华秋PCB

电路 PCB PCB设计 共模

智维数据荣获2022金融科技应用创新奖

智维数据

金融科技 智能运维 金融电子化 智维数据

Serverless:基于个性化服务画像的弹性伸缩实践

百度Geek说

云原生 成本优化 Servelress 弹性伸缩 企业号 3 月 PK 榜

感谢大家对我的捐赠和鼓励

源字节1号

何为神经网络卷积层

华为云开发者联盟

人工智能 神经网络 华为云 华为云开发者联盟 企业号 3 月 PK 榜

直播 | StarRocks 实战系列第四期--查询性能优化

StarRocks

数据库

分布式存储中建立高效回收站的设计思考

焱融科技

文件存储 分布式文件存储 回收站 高性能存储 全闪存储

带你掌握如何查看并读懂昇腾平台的应用日志

华为云开发者联盟

人工智能 华为云 昇腾 华为云开发者联盟 企业号 3 月 PK 榜

GifGun for Mac(快速输出GIF动图格式AE插件)

互联网搬砖工作者

国内首发|焱融科技 YRCloudFile 支持 NVIDIA GPUDirect Storage(GDS)

焱融科技

人工智能 分布式存储 分布式文件存储 全闪存储 GPT-4

谷歌Android things物联网硬件接入阿里云IoT物联网套件实战——设备接入类

阿里云AIoT

物联网 传感器 Android开发

聚势启新,赢未来!网银互联通航云计算数据中心三期盛大落地!

科技热闻

Trapcode Particular(AE经典粒子插件)绿色破解版

互联网搬砖工作者

现货合约量化机器人开发对冲交易策略

薇電13242772558

量化策略

graphpad prism基础使用教程

互联网搬砖工作者

京东云总裁曹鹏:安全可控的数字基础设施提升产业链韧性

京东科技开发者

数字化 产业数字化 京东云 国产化替代 京东云峰会

AltCLIP:改变语言编码器,扩展语言功能

Zilliz

计算机视觉 openai

InstructPix2Pix: 动动嘴皮子,超越PS

华为云开发者联盟

人工智能 华为云 华为云开发者联盟 企业号 3 月 PK 榜 文本编辑图像

智维数据加入信创工委会,助力国产化智能运维自主创新

智维数据

信创 国产化 智能运维 网络运维 智维数据

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