“每18至24个月，前端都会难一倍”（注：2015深JS大会上，赫门在《前端服务化之路》主题演讲中说的一句话）。难，是前端发展史偶然中的必然。但难，也造就着前端当下的繁荣。

Ryan Dah之所以选择用Javascript作为Node.js的基础语言，主要是因为它是单线程的，没有服务器I/O，没有历史包袱，有较低的门槛和比较良好的社区（更多内容可见：Node.js Interview: 4 Questions with Creator Ryan Dahl）。这看似是偶然，但实际上正是Javascript的这些优秀特性必然被历史选择，承担推动Web技术发展的使命。

在Node.js的推动下，前端技术大放异彩，逐渐告别“石器时代”，走向“工业时代”。而通过推动前端迈进”工业时代”的“三化“建设的力量，分别是前端的自动化、实时化与服务化。

前端服务化

所谓服务化，即使用者只需调用，而毋须知道内部的实现，说白了就是标准化（引自2015深JS大会上，赫门主题演讲《前端服务化之路》的内容）。Node.js的出现使前端服务化成为可能。Node.js开发的系统可以作为接入层，调用Java、C++等提供的基础功能，处理数据库，然后将数据吐给浏览器进行渲染。简易言之，就是用Node.js代替业务逻辑这一层。最后造就的成果是，不仅Java，C++可以放弃业务逻辑，更专注于数据处理的基础服务，而且Node.js能更专注于业务逻辑，提供API服务给浏览器端的代码进行调用。

用Node.js作为接入层，让前端涉足“后台”的业务成为可能，而且能提高开发效率，还能更方便地使用最新Web技术，如Big Pipe，WebSocket等对页面进行优化。早前淘宝进行的前后端分离，腾讯AlloyTeam正在进行的玄武框架，都是在推动前端服务化做出努力。

除了Node.js作为接入层提供服务以外，淘宝的赫门还提出了将前端Web Component作为一种服务，提供给后台使用。Javascript的AMD与CommonJS规范的订立使Javascript的模块化开发成为可能，也就自然而然地推动了前端的组件化。但赫门认为组件化的Web Component是散乱的，并没有办法一统江湖（如Angular、React这类框架），而他的理念就是希望帮助Web Component重新定位，也就是将其标准化。他在演讲中举出一个应用场景：使用React开发了一个组件，给前端直接使用React，而给后端用的时候则先用Flipper输出成Web Component再用。赫门的这个Flipper在技术上并没有太大的新意，其创新之处在于，他基于Flipper提出的服务化理念。

AlloyTeam内部其实有类似的更完善的方案—— MVVM框架Q.js及Ques组件方案。赫门的Flipper只管将代码转成标准化Web Component，而Ques组件方案不仅在开发过程中可以用标准化Web Component，而且在基于构建，开发的过程中就已经可以将HTML，CSS及JS模块化，更好地组织代码。而Q.js则是一个类Vue.js的的MVVM框架，它可以使用Ques组件方案，结合MVVM框架的特性，能够轻松驾驭一个项目的开发 Ques。

大型前端工程架构可能面临的问题：

• css样式覆盖
• js调用冲突
• 技术更新快，新旧技术栈冲突

css和js原生没有命名空间的支持， 是在同一个浏览器页面沙箱内的静态资源。css覆盖和js冲突，会造成不同业务之间的技术选型冲突。

如何实现前端服务化

• 参考后台如何做到服务化：

  - 通过技术中立的网络消息、文件接口经行通信；
  - 服务间的接口采用粗粒度的业务模型，而不是技术实现模型；
  - 服务间约定接口及上面承载的业务含义；
  - 各独立进程、独立部署机器、独立升级演进；
  - 服务间接口可以被监控和追踪，用于故障定位；
  

• 前端类似机制服务化：

  1. 将一个页面划分若干可集成的业务单元=======>对应后端应用/服务；
  2. 业务单元各自独立，不暴露细节，也不影响其他单元的技术选型；
  3. 业务单元只通过有限的消息进行通信实现协作；
  4. 各个业务单元可以部署在不同服务器，甚至域名上，独立升级；
  5. 各个业务单元之间消息传递以中间件middleware或者钩子Hook监控跟踪；
  6. 将业务单元可以挂载PIU（Page Integratable Unit）全局命名空间之上；
  

• 面向集成的前端元框架Prelude

  1. 提供PIU之间协作和通信的基础能力；
  2. 管理全局冲突
     - 浏览器特性检测和Pollyfill
     - 全局JS注册、注入
     - 拉起全局样式，hash片段
     - 全局页面元素
     - 消息通信（发布/订阅模式）
     - 集成接口：国际化、皮肤、会话管理（登陆、注销、身份）等
  3. 不越界管理提供
     - 组件、控件、路由管理、公共或具体业务
     - 业务接口等除集成所需的任何接口
  

前端服务化之路借鉴后台的服务化，类似于后台开发的独立进程，彼此互相解耦，只通过消息接口通信，业务单元彼此解耦、互相相对独立、技术选择互不影响、新旧技术栈可以迭代更新，可以很好适合前端大型工程架构的实现。