转载

解读2014之前端篇:“改变”可以,“任性”不行

极客邦开通个人微信号啦！如果你希望更多的在朋友圈见到极客邦，看到InfoQ的精彩内容，寻找我们主办与支持的给力活动；如果你希望能更经常地与我们联系，隔三差五调戏我们一下，那就复制微信号： HelloStuQ ，加Q妹的个人微信吧~

编者按

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前端结合的产物，但这只是开始，三七如是说，未来还将继续颠覆、成长、蜕变。