作者 | 阿里文娛技術

出品 | 程序人生（ID：coder_life）

背景

場館院線的互聯網化，就是將場館院線實體，通過互聯網的手段，實現票務的全網分發營銷。前端在該進程中，扮演著多系統操作的可視化、簡易化，協調調度的流程化、規範化。本文將為你揭秘前端技術和組件庫技術如何解決場館院線前端面臨的版本碎片化、需求個性化、迭代效率低、維護成本高的問題。

場館院線的前端技術

一個垂類行業的系統，往往是多系統協調工作，開發和維護成本都很高，但垂類行業系統都有著較高的相似性，大多數都是由查詢列表頁、編輯頁、詳情頁組成。同行業的前端系統相似性更高，需要結合行業特有的業務場景，形成行業前端解決方案，方便多套垂類系統複用，減少維護和開發成本。

圖：阿里影業雲智業務前端系統架構圖

通過在開發過程中沉澱經驗和對開源軟件的封裝，影業前端團隊形成了高效的研發體系和開發規約，基於約定大於配置的理念，工程化的思想漸入業務。實現了多個項目的項目結構、文件路徑、路由配置，發佈和上線方式全部打通，統一管理，減少了配置時間和學習成本。

同時我們在四個部分進行了流程上的改進：

圖：阿里影業雲智業務前端系統流程圖

1）前端工程化：使用 Umi 框架提供項目的基本結構和開發規範以及基礎工程能力；

2）插件和工具：根據團隊需要，在開源插件工具庫不能滿足需求時，開發了魯班系統，一個前端工具集合；

3）行業組件庫：在視覺層面積累行業經驗，沉澱了行業視覺組件庫，共同支撐多套前端垂類系統，助力業務的快速迭代，覆蓋絕大多數業務場景；

4）前端監控和質量管理：統一的監控插件和質量管理標準，在項目生成時內嵌，無需開發時手動接入。

場館院線前端組件庫

在業務的開發上，我們大量使用組件庫提供的交互和視覺，目前主要的基礎組件庫是 Antd 和 Antd Pro，通用程度較高，但對於特定的行業和業務場景還有些不夠。我們深耕場館院線和積累業務場景，在原有的組件庫基礎上進行了拓展，沉澱出了兩套對應的場館院線前端組件庫，分別是元素級別的組件庫 Lark-component 和頁面級別的組件庫 Lark-pro。

圖：Lark-component 組件庫實例

圖：Lark-pro 組件庫實例

在場館院線前端系統中，如根據城市或者影院名稱篩選影院的場景，基本覆蓋到所有的場館院線系統，我們對這一場景進行抽象，封裝在頁面級別的組件庫 Lark-pro 中。

圖：日期選擇視覺圖

經過對用戶日期選擇行為的數據進行分析，不斷的優化交互體驗，沉澱出滿足不同需求的日期選擇類型，如單日的日期選擇，帶左右箭頭的簡潔型日期選擇，再對細節進行像素級別的不斷打磨，落地到元素級別的組件庫 Lark-component 中。

總結

我們試著用前端水平橫向方案和組件庫方案，去解決前端場館院線問題，基於約定大約配置的理念，最大化的統一需要開發人員手動配置的內容，如項目編譯配置、路由配置、鏡像配置、發佈管理。同時基於行業背景下，產出更加豐富行業前端組件庫，去覆蓋高頻率使用場景。通過不斷積累和沉澱，我們在前端系統上可複用的內容會越來越多，逐步完善場館院線的

前端基礎建設。在 2020 年，面對 10000+ 的影院市場，前端系統會朝著智能化搭建、積木式

搭建方向演進。快速、高效、穩定的服務用戶，助力阿里場館院線實現觀影人次、影院數量雙第一目標。