复杂业务环境中的前端架构设计

在2016年12月23日由云栖社区举办的云栖计算之旅第3期——前端专场沙龙中，阿里云前端开发工程师城池带来了《复杂业务环境中的前端架构设计》的分享。分享中，他主要介绍前端技术发展历程和阿里云在设计业务支撑架构方面的实践经验。

以下内容根据现场分享和幻灯片整理而成。

前端发展历程

前端发展历程可以概括为石器时代、铁器时代和工业革命三个阶段。

石器时代

在石器时代，前端开发者主要工作是写一些简单的HTML代码、JS代码以及切图；那时，很多公司认为前端岗位并不是很重要。

铁器时代

在铁器时代，各种前端框架层出不穷，如jQuery、PhoneGap、prototype等。在该时代，开发不同项目时，开发环境比较糟糕，并且不存在通用的解决办法。

工业时代

工业时代是前端百花齐放的时代，涌现了像React、React Native、Node等解决方案。在工程环境上相比前一个时代有了巨大的飞跃。

我们是如何做业务支撑的技术架构——业务范畴

在前端方面，阿里云针对不同的业务有着不同的解决方案。目前，前端所涉及的业务范畴包括：阿里云官网、市场、万网、云栖、移动等；支撑这些业务所使用的技术体系如涵盖Rect/NG、Webpack、Weex/RN、Node。

上图是业务支撑技术架构的DBL实践，上层是TMS发布系统、Cabinet、Hypercube和万花筒。整个技术架构中的重点部分是DBL-cli部分，它是一系列可视化命令操作的组合：Project、Light、Cabinet、Hypercube，其中Project用于处理与后端关联较为紧密的业务；Light主要用于静态页面模块化的发布；Cabinet用于活动页面、个性化页面的开发；Hypercube提供了可视化的方式用于管理状态的转移。下面来具体看一下每个模块的组成。

Project包括Init、Dev和Publish。在初始化时，会根据用户的选项进行相关项目（移动项目、React项目）的进行初始化；并且在本地调试时会起相应的端口，如3001、8001端口等。

Light部分提供了GUI界面，并且提供了Schema语法去描述该模块所需的数据；Schema发布之后，会有相关的系统将其翻译成相关数据，便于运营人员直观地填写数据。

Hypercube提供了可视化的方式用于管理状态的转移，十分简便。通过Hypercube这种方式将不同的状态作为模块，不同的状态之间可以共享相关代码，进而节省了极大的人力。其实现过程是将不同的状态注册成插件，并且初始化，当需要调用时启用即可。

未来展望

未来，前端的发展应该朝向以下几个方面：