爱奇艺组件化技术探索与项目实践

前言

组件化对于任何一个业务场景复杂的APP以及经过多次迭代之后的产品来说都是必经之路，组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。

本文主要讲述爱奇艺知识APP如何结合自身的业务特点，探索和实践了一套高效的移动端组件化方案。

一、背景与目标

1.1背景

爱奇艺知识目前有多个业务承载端，包括爱奇艺移动端APP的知识插件、爱奇艺iPad端APP的知识插件、随刻移动端APP的知识插件和爱奇艺知识移动端独立APP。由于各个端上线的时间不同，所承载的业务功能也不完全一致，造成了多端多套代码的情况，维护成本很高。首先当相同或类似的功能需要迭代升级时，开发和测试都需要在多端同步进行，成本成指数级增长；其次随着业务的快速发展，业务模块在不断增加，模块间的依赖关系也变得越来越模糊，代码耦合度和复杂度都在增大；另外在现有人力成本的基础上如果想增加更多的业务端，就会变得非常困难。因此长期看非常不利于业务的高效迭代。下图描述了组件化之前，爱奇艺知识各端的业务模块架构。

从上图我们也能看出其实每个端之间是存在很多公共业务模块的，各个业务模块的底层支撑模块也几乎相同，所以结合爱奇艺知识自身的业务特点，我们提出了适合于爱奇艺知识移动端的组件化方案。

1.2目标

我们将组件化的目标定义为以下几个：

· 解决多端代码维护问题

根据业务特点，横向和纵向划分组件，以组件为单位承接迭代需求，各端进行组件复用；

· 解决跨组件调用和组件间路由的问题

业务划分更加清晰、组件间解耦更加彻底、组件间通信更高效，对原有业务模块进行抽离和整合，明确组件间的业务边界；

· 提升开发效率，方便开发调试

组件可以单独编译和调试，使模块开发者更聚焦本模块业务；

· 提升集成和提测效率

各端项目需要哪个组件，可以直接通过工具快速集成和提测。

基于以上目标，我们设计了适合爱奇艺知识业务的组件划分策略，下图为组件化之后的功能架构图，横向分为基础组件、功能组件和业务组件，纵向对每个层级的组件又进行细分；从划分粒度上看，组件不仅包括功能性的sdk，还可能包括业务UI，宗旨就是业务模块独立，边界清晰，方便扩展和维护。

二、整体技术架构

基于功能架构，知识组件化的技术架构如下图所示。