解读 2014 之前端篇：任性的颠覆式改变

编者按

2014 年，整个 IT 领域发生了许多深刻而又复杂的变化，InfoQ 策划了“解读2014 ”年终技术盘点系列文章，希望能够给读者清晰地梳理出技术领域在这一年的发展变化，回顾过去，继续前行。

本篇是解读系列的前端篇，小编邀请到天猫前端团队的三七、铁军、不四、鬼道这四位专家来解读2014 年前端领域最引人注目的几大热点。

HTML5 正式定稿，ECMAScript 6 规范从纸上走到现实

2014 年 10 月 28 日，W3C 宣布 HTML5 正式定稿为标准，这不仅仅标志着历经8 年的标准纷争告一段落，也代表着HTML5 这个名词会逐步洗去铅华，其技术真正融入到Web 开发的每个角落，就像当年Ajax 一样，当大家不再大张旗鼓鼓吹概念和商业炒作时，正是其成熟时代到来了。HTML5 规范和以前最大区别是让Web 最基础架构从Web Page 升级到Web Application，正符合主流互联网从桌面端迁移到移动端的趋势，是移动互联网终端碎片化的一剂良方。在移动智能终端性能和网络速度到达消费者需求时，将会是Mobile Web 大展跨平台神威时，这从网络基础设施领先的韩国应用从纯Native 到大量采用Hybrid 形式就可以看出一些端倪。

HTML5 在尚未定稿前已有了大量实践，以至于其定稿之日也是成熟之时，同样下一代的 JavaScript 标准 ECMAScript 6 虽尚未定稿，但浏览器端 Chrome 和 Firefox 等新版本已实现 ES 6 的部分语法（Promise、Generators 等），同样在服务器端，Node v0.11 最新版本也已支持部分核心 ES 6 语法。这些 ES 6 新特性，大大地提升了开发者的效率。在 Node.js 中，已经有了非常优秀的基于 ES 6 特性的新框架，并已开始广泛地运用在生产环境中。随着 Regenerator、6to5 等转换工具的出现，在前端使用 ES 6 的新特性也完全不是问题，这将大大提高整个 JavaScript 开发群体的效率，让大规模应用 Nodejs 的时代更快到来。

HTML 和 ECMAScript 是前端开发的基石，其快速升级和革新意味着这个领域面临的挑战和旺盛的生命力。

YUI 停止开发，小而美的 mv* 库的流行

2014 年 8 月 29 日，Yahoo 宣布停止开发 YUI，如 Julien 在该博文所说，这几年前端行业越来越活跃，新技术和工具层出不穷，对于大而厚的基础库越来越不适应业务的发展需求。与此同时，单页应用技术符合 Web 应用化的趋势，一方面随着业务越来越复杂，前端 API 能力越来越强，数据和展现结合也越来越紧密，另一方面，Mobile 的发展对 Web 人机交互体验有更高要求，效果上要交互体验极致到 Native 的程度，性能上要前端库的高效且粒度及灵活性精细化，这也是类似 reactjs 等新型 mv* 库开始流行的一个原因。

类似问题在 jQuery 身上也挑战很大，过去小而快的优点在移动时代已没有优势，需要面对移动端新的极致人机交互体验挑战。阿里开源框架 KISSY 正在使其核心模块粒度更加细小灵活，对低级浏览器的兼容拆分，在 Mobile 等高级浏览器下加载更少的代码，这是应对这一趋势所必须做的改变。前端框架和类库是为了提升前端开发的效率和品质，当人机交互环境发生重大变革时，这些基础设施都必须敢于大胆提早顺势而变，否则只能被淘汰。

基于 Web Components 的跨终端组件快速发展

2014 年通过指令化 / 声明式调用前端组件的形式发展迅速：比如 Angularjs、Reactjs 及新晋的 vuejs 等各种热议和实践，其中一个特点是 Directive 的引入。 Web Components 规范将组件定义使用标准化，这种标准化正式跨平台跨终端业务急需的，为前端开发方案带来巨大机会。2014 年 Google IO 上《 Polymer and the Web Components revolution 》介绍，2014 年北京 QCON 豆瓣的《 DOMO UI 》 、百度的《跨终端组件实战》，都是基于Web Component 的实践落地（DOMO UI 类似Web Component）。究其背后原因：一方面前端开发越来越富交互化，组件共享复用也越来越频繁，如何高效一致地使用是每个组件库需要解决的问题，而Web Commponents 的到来让我们看到了机会；另一方面，Mobile 的高速发展，让前端开发不仅仅只面对桌面一个终端，更要面对Phone、Pad 乃至TV 终端，Web 和不同的Native 开始混用，如何让Native 代码也能像Web 组件一样方便调用，就需要引入类似HTML 之类得声明描述组件，而Web Components 正式符合这一特性的原生标准，为组件的跨终端带来无限想象。面对消费者终端的碎片化，Web Components 会成为跨端UI 模块化协作的基础。

目前天猫正在构建跨终端高品质UI 体系MUI，从设计到客户端和Web 前端一起打造一套UI 设计规范和模块化组件体系覆盖所有端的天猫业务，从iPhone 到Android Phone，从iPad 到Android Pad，从Mobile Web 到Desktop Web，还有TV 等，实现任何标准的UI 设计都能够快速覆盖全站，其背后技术思想之一就是Web Components。

基于Node.js 的前后端分离方案流行，同时社区和企业边协作边竞争使Node.js 在稳定服务和创新发展中平衡

1989 年 3 月 12 日，Tim Berners-Lee 创立了 WWW（Word Wide Web），Web 的迅猛发展成为 Internet 上最重要的内容承载方式，以至于很多人会认为 Web 就是 Internet。亿万互联网用户催生无数的 Web 开发者和巨无霸网站，Web 的规模化促使了前后端的分工，于是 2001 年雅虎有了全世界第一个前端工程师职位，此时前端专注于 HTML、CSS 和 JavaScript，后端专注于业务和数据，而数据（Data）和展现（View）结合部分由于成本较低和技术难度不高而分工模糊，大部分情况下这部分工作依旧是后端工程师在负责。2007 年 iPhone 诞生，互联网全面向移动快速进化，各种系统和硬件配置的 Phone 和 Pad 兴起使得用户访问互联网的终端碎片化，导致互联网产品都需要一套数据（Data）多个展现（View），所以 Data 和 View 结合的技术难度和成本剧增使得这部分工作必须从后端向前端转移，前端负责客户端和服务端所有的 View 及 View 相关的 Control，后端负责业务逻辑和数据并以 API 服务的方式向前输出，这样前后端彻底分离，对于产品开发而言前端只需要控制 View 和标准化的 Data 服务，不存在后端了。

前后端分离技术的难点是在服务端的前端，这个领域一直被后端开发语言和思想所统治，对于本来就很稀缺的前端工程师在技能和工作量上提出太高的要求，导致进展不顺利，直到 Node.js 横空出世。Node.js 出现，不仅让前端工程师终于有能力自己为自己打造提高工作效率的工具，让前端工程师发挥程序上的想象力，也让前后端分离有了更好的选择，所以整个业界非常多公司在这方面尝试，有些甚至尝试使用 Node.js 完全取代后端语言，比如 Java。目前还处于风起云涌的初期，所以即使在同一个公司如阿里巴巴内部都很多类似尝试，比如淘宝的 Midway、支付宝的 iChair 和天猫的 Wormhole 等，主因是难点并不在于 Node.js 技术本身，而在于和原有业务服务体系对接和运维能力上，所以切入点很多且难以标准化，先多点尝试相互竞争，后续在基于实际方案的基础上进行合并统一是我们目前的思路。天猫的首页已经构建在 Node.js 上，不仅经受了 2014 双 11 的考验且性能表现优异，目前正在把这个方案应用到天猫所有活动和频道页面，到 2015 双 11 会有相当多的流量运行在 Node.js 上，那将是激动人心的时刻。

Node.js 开始大规模使用和其逐渐成熟完善且社区非常有活力关系密切，但从七月初开始，Node.js 核心开发者与 Node 社区核心参与者认为 Joyent 管理下的 Node 开发进展太慢，且对于社区的需求响应不及时，开始与 Joyent 公司进行谈判，希望将 Node 源码从 Joyent 公司拿出来，放到 Linux 基金会下基于社区来进行维护。最终事件以 Node.js 核心开发者 fork 了 Node 源码，重命名为 io.js 结束。2015 年 1 月 13 日， io.js 发布 1.0 版本，同时，node 也将发布 0.12 版本。 这事件对 Node 社区影响非常之大。首先，造成 Node 源码的开发工作停滞了三个月左右，其次，io.js 开发活跃程度已经大于 Node.js，且 io.js 和 Node.js 的开发理念不同必然导致之后两者会渐行渐远，但从长远角度来看，竞争虽然带来阵痛但有利于更好的产品出现。

2014 年初，Node.js 当时项目掌门人从 Joyent 离职，基于 npm 创立了 npm, Inc ，开始致力于 Node.js 的包管理平台开发和维护。之前 npm 属于社区维护性质，服务不够稳定，随着 Node 社区的发展壮大，npm 服务的稳定性越来越重要，因此 npm, Inc 的成立保障了维系 Node 社区最重要的基础服务设施的稳定性。 2014 年底， npm, Inc 发布新官网，同时重新定义 npm, Inc 为 JavaScript 的包管理工具和平台。此时 npm 已经拥有了接近 12 万个模块，超越了 maven 成为了最大的包管理中心。 随着模块数量的急剧增加，企业使用 npm 的需求也越来越高，npm, Inc 开始将目标瞄准了企业版 npm 市场，现在处于邀请公司试用期。而早在 2014 年中，阿里巴巴内部的私有 npm 服务已经非常完善，现在已经有每月超过 300 万次的下载，服务于全公司的 JavaScript 程序员。所以，社区驱动了创新和快速发展，企业会推动服务稳定和健壮，两者相互协作和竞争会让整个生态更有旺盛的生命力。

Native 定义为前端的一部分，并开始深入融合

2007 年 1 月 9 日，iPhone 诞生，带来了整个人机交互领域的颠覆式创新，对于前端技术也有了颠覆式改变，初期甚至到了讨论 Web is dead 的地步，加速 Web 世界的危机感和积极向移动端转型，同时随着 Phone 和 Pad 的严重碎片化和整个互联网都从桌面转向了移动，直接导致移动应用内容的规模化和多元化及连接和整合整个世界，越来越发现仅仅靠 Native 本身是不够的，需要 Web 和 Native 结合起来才能够满足极致人机交互和规模化联通世界的要求，比如微信其实就是这方面的表率。前端的工作就是为人机交互的 UI 提供工程化方案，当整个互联网向移动转移时，原来的 Web 体系和工程方案已不适用了，这就是为什么 YUI 会倒下，而 HTML 和 JavaScript 要快速地推出革新版本，同样 Web Components 必须满足移动终端碎片化的模块化方案才能高速发展，而 Node.js 的流行恰好迎合上前后端分离前端工程师需要掌控服务端前端的趋势。这一些也仅仅是刚刚开始，TV 和 Watch 等越来越多碎片化的终端进入到日常生活，前端的挑战也刚刚开始且前所未有，这是最好的时代。Web 是桌面时代人机交互技术方案的王者，但在移动智能终端时代目前无法及时满足新兴的人机交互能力。这非常类似 Ajax 到来时，HTML + CSS 已经无法很好地满足人机交互 UI 开发的需要，前端要快速掌握 JavaScript 一样，移动互联网时代，Web 前端工程师需要快速掌握 Native 开发能力成为跨终端的前端开发工程师，这不是抛弃 Web 转向 Native，而是把 Web 和 Native 结合起来，就像当年 HTML + CSS + JavaScript 结合起来产生巨大的威力一样。这不是 1+1 = 2，而是 1+1>2 的问题，不是简单的技术领域扩充，而是真正的人机交互技术深入探索，前端技术方案从来都不是由稳定的单一技术所能解决的。现在 Native 开发规模越来越大已开始在探索类似 Web 的 View 发布机制和模块化依赖关系管理等等，而 Web 也正在探索弱网络或不确定网络性能、内存管理及硬件调用的技术方案，两者结合（Hybrid）对于我们的大规模平台化业务来说是事半功倍的正确方向。

ArchSummit2014 深圳大会，手淘 Android 负责人无锋分享的手淘 android 架构《手机淘宝的客户端架构探索之路》中提到“像 Web 一样轻盈的 Native App！”。可见从Native 同学的角度已开始考虑向Web 融合，而在天猫我们定义：前端 ＝ Web + Native，目前天猫已有10% 的Web 前端同学拥有Native 开发的能力，预计不到2015 年中会扩大到50%。虽然目前已有大量的Hybrid 应用和使用类PhoneGAP 的混合开发，但Native 和Web 的深入融合远远不够，尤其是发布能力和大规模协作的能力上，以及对于组件、性能等方面的相互协作。之前一直讨论Native 和Web 孰优孰劣，谁取代谁，但经过2014 相信更多人已意识到这是个伪命题，真正评判一项技术的价值是在业务场景中，选择合适且面向未来的技术最重要，需要思考如何用技术为用户和业务带来价值，天猫也正在前进的路上，随着越来越多人同时掌握Web 和Native，两者的协作会更加深入和相互发展，并作为整个前端的范畴带来更多的技术突破、效率提升和极致体验，而原来的Web 前端工程师也会进行技能升级，勇敢地打破自我的壁垒拥抱移动端，尤其是Native 技术，前端 ＝ Web + Native。真正成为跨终端的前端工程师。

对于天猫前端而言，在新的一年里，Mobile 会变革为主场，主要有三个很明确的方向：跨终端组件、大规模Node、Native 和 Web 融合。

跨终端组件MUI： MUI 是天猫统一的跨终端UI 组件库，这是设计师、Native 开发和Web 前端一起协作的全站性质项目。之前已经历了两个版本完成了基础视觉规范和JS 组件规范及管理升级机制，新一年的重要方向是：跨终端。目前正在进行的MUI3.0 核心是天猫内部称作FEModule 的组件体系，就是一个完整的组件规范（包括样式、脚本、模板和数据定义），实现前端、后端一致的组件体系，即一个模块完全独立，加上数据即可渲染，模块既可以前端渲染又可以后端渲染。MUI3.0 会基于Web components 和Native 组件融合规范，实现跨终端的组件体系。

大规模Node：首页在天猫双11 中在稳定性及性能上已经被证实表现出色，同时对于前后端分离核心的数据API 定义也有了系统化的规范和工具。新一代渲染引擎Wormhole CDN 3.1 全网发布，支持 feLoader / feModule / 全局头尾，至此天猫应用、CDN、频道页环境的模版渲染环境基本都已经完善，Node.js 在天猫承担更多前端业务的时代已经到来。

Native 和 Web 融合：2014 年我们在技术和组织结构上做了很多突破，尤其是组织上把 Web 和 Native 前端调整为以业务维度的一个团队，前端 ＝ Native + Web，持续推动团队转型深入到 Native。我们要把 Native 的高性能和系统能力同 Web 的发布能力和规模协作结合起来，这其中有 Native 和 Web 互调的 Hybrid API，利用 Native 的缓存和系统能力把 Web 的基础打开速度做到 Native 一样的通用方案等等。

智能移动终端带来人机交互变革不仅仅导致了前端开发这个职位需要自我突破革新、重新审视和定义，更导致 UI 设计师的设计场景发生翻天覆地的变化，从单一的鼠标键盘大屏幕变成了多终端的触屏声音陀螺仪传感器等，设计需要更透析这些新的人机交互形式和技术才能够面向未来。新的一年里，三七将开始负责天猫的 UED 团队，把设计和技术结合起来，就像 D2 前端技术论坛理念那样“好的设计驱动技术创新，好的技术给设计无限想象”，MUI3.0 就是设计、客户端开发和 Web 前端结合的产物，但这只是开始，三七如是说，未来还将继续颠覆、成长、蜕变。

作者简介

本文作者三七是QCon 上海2014“没有后端”专题出品人，不四是该专题讲师。鬼道是QCon 北京2015 大会移动开发实践专题的讲师。更多精彩内容尽在 QCon 北京 2015 ，现在购票可享 8 折优惠。