[转]解读2014以前端篇：任性的颠覆式改变

http://www.infoq.com/cn/articles/2014-review-front-end-part

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

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

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

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

 

相关厂商内容

从Java代码到机器代码：如何编写高度优化的Java程序

游戏运维之“痛”并快乐—腾讯游戏运维实践之路

高德—快速转型时期的稳定性架构实践

 

相关赞助商

QCon全球软件开发大会，2015年10月15-17日，上海光大会展中心国际大酒店。9折报名。

 

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