一、背景

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

二、场馆院线的前端技术

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

（图：阿里影业云智业务前端系统架构图）

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

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

（图：阿里影业云智业务前端系统流程图）

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

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

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

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

三、场馆院线前端组件库

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

（图：Lark-component 组件库实例）

（图：Lark-pro 组件库实例）

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

（图：日期选择视觉图）

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

四、总结

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

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

作者介绍：

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

相关阅读

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

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

创作场景

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