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

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

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

以下内容根据现场分享和幻灯片整理而成。
前端发展历程
前端发展历程可以概括为石器时代、铁器时代和工业革命三个阶段。
石器时代
12b81b5a83456a7953c36bf3e4f6012e33e2ac47
在石器时代，前端开发者主要工作是写一些简单的HTML代码、JS代码以及切图；那时，很多公司认为前端岗位并不是很重要。
铁器时代

6bbd1c2037d444c736e1e5c2bbac82d9b2dc25da
在铁器时代，各种前端框架层出不穷，如jQuery、PhoneGap、prototype等。在该时代，开发不同项目时，开发环境比较糟糕，并且不存在通用的解决办法。
工业时代
262e499a4ee5df3028476f8867294138dfac5b1f
工业时代是前端百花齐放的时代，涌现了像React、React Native、Node等解决方案。在工程环境上相比前一个时代有了巨大的飞跃。

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

ef5327c3b0906de0c2850035a25163e995f19722
在前端方面，阿里云针对不同的业务有着不同的解决方案。目前，前端所涉及的业务范畴包括：阿里云官网、市场、万网、云栖、移动等；支撑这些业务所使用的技术体系如涵盖Rect/NG、Webpack、Weex/RN、Node。
39b27dd4d3aea496549982dec41631210b323712
上图是业务支撑技术架构的DBL实践，上层是TMS发布系统、Cabinet、Hypercube和万花筒。整个技术架构中的重点部分是DBL-cli部分，它是一系列可视化命令操作的组合：Project、Light、Cabinet、Hypercube，其中Project用于处理与后端关联较为紧密的业务；Light主要用于静态页面模块化的发布；Cabinet用于活动页面、个性化页面的开发；Hypercube提供了可视化的方式用于管理状态的转移。下面来具体看一下每个模块的组成。
http://click.aliyun.com/m/23331/