专访钟钦成:前端江湖纷乱,框架之争,出路何在?

  • 韩婷

2016 年 7 月 31 日

话题:语言 & 开发架构前端

前端可选的框架很多,这背后的原因是什么?为什么会发展到现在这种局面?这么多的框架,总让开发人员感到十分迷茫,应当如何做出选择呢?在未来,前端框架会如何发展?让我们跟随司徒正美,一起来聊一聊前端江湖的未来。

受访嘉宾介绍

钟钦成,花名司徒正美,现任去哪儿网前端架构师,开源框架 avalon 的作者。涉猎多种语言与设计模式,精通 DOM 与 JS 各种黑魔法,精通选择器引擎、模块加载器、MVVM。曾在盛大创新院与国内许多知名专家共事,并在那里敲下了 avalon 的第一行代码,写下了《JavaScript 框架设计》一书。热爱动漫,能读写日语,热爱分享,已写下近千篇博文。

InfoQ:请您介绍一下自己目前的工作职责,负责的项目情况。据说您是写小说出身的,能否简单介绍一下自己的工作经历?为什么选择进入前端领域?为什么对前端框架抱有极大的热情?

钟钦成:现在我在去哪儿网任前端架构师一职,带领大家搞 React 开发。React,特别是 React Native 是现时最好的移动框架。而公司的重点也转移到移动端了,因此我们小组负责将移动端相关设置全部搭建起来,各种坑踩一遍,努力成为业务线最坚实的支撑。

每个人的经历都很曲折,尤其是前端人员,更是龙蛇混杂。许多人都是觉得前端比较容易学,或者赚钱比较多,才进入这行业。而我比较幸运,因为敲代码也是我大学生活中的乐趣之一。因此不会像其他人,会出现动力不足的情况。当然我的兴趣还是蛮多的,比如写小说,建筑,考古,日语,动画,看科幻小说,手办,陶艺,等等。会找乐子的人,不会轻易泄气。

至于为什么进入前端,纯粹是偶然。我的某个弟弟是干这行的。我在小县城呆着赚不了几个钱,他说带我去深圳见识见识,便一下子介绍到他公司做前端了。我在小县城时也用前端方面的知识来接些小活过日子,因此不会觉得一下子跳跃太大。更重要的是,我特别能写,在我没进这行时,就写了三百多篇有关前端的博文,那时大家都以为我已经在大公司任职了。

出于这样的误解,公司一开始就把一些很重要的事我做。而我得保证代码质量,因为我的组件将会被许多人复用。从那时起,我就一直搞框架,搞组件,搞各种工具。

InfoQ:请您跟大家讲一下前端框架的发展历史,前端框架的起源和发展如何?现在的前端框架很多,其背后的原因是什么?国内的前端框架又是怎样起步的,发展现状如何?

钟钦成:这是一个老生常谈的话题,基本每本 JavaScript 书都会聊一下这段痛苦的历史。主要原因是 JavaScript 没有自己的 SDK(核心库),需要依赖民间的力量解救自己。

最开始是一些大公司有能力开发这些框架,如 Prototype.js,是作为 ROR 的次要项目开发出来的。此外还有 Dojo, Closure、YUI 这样恐龙级的框架,也是大公司搞的。后来突然出现了 jQuery 这样由天才开发的框架。事实证明,大公司那一套管理方式,以 KPI 驱动的框架有着致命的缺憾,虽然面面俱到,但不能迅速吸收社区的新东西,使用起来不够方便灵活。它们在 jQuery 这种瑞士刀前,一下子就解体了。

再后来,大家都知道,前端框架是 jQuery 的天下,大家都争先恐后地为它做插件。jQuery 也大大解放了生产力,让我们有时间去做一些更有意义的事。在后 jQuery 时代,最有意义的两件事是 RequireJS 与 Node.js 的诞生。前者试图解决 JavaScript 模块化问题,后者让我们能从后端那里抢走一些活儿。而那些活儿本来就是前端做比较合适,比如说做模板,套模板,传数据,JavaScript 的语法检测,风格检测,理点,等等。

这段时间,又产生了像 Backbone 这样的 MVC 框架。但旋即被 Knockout, Angular, React 等 MVVM 框架占去份额了。要知道,后端从 MVC 进化到 MVVM,用了大概十年时间,而前端则不到 2 年。前端框架发展太迅猛了!

我想这迅猛发展的背后,最大的动力就是需求!源源不断的需求!原来由后端做的活儿,放在前端做更合适更快,用户体验更好。这是时势使然,挡也挡不住。

目前国内的发展历程其实与国外一模一样。最开始是公司牵头,后来就涌现大量出色的个人项目。阿里的前端技术之所以这么强,是因为他们不断地研制自己的轮子,轮子会越造越好。那些绝不重复造轮子的人默默无名,而框架作者们则开创自己一片天地了。中国拥有世界上最庞大的互联网市场,我们的框架也最终走出国门(比如我的 avalon,在澳大利亚,德国都有人在用)。

InfoQ:avalon 的起源与发展是如何的?avalon 2 的架构如何?采用这样的架构有什么好处?与其他框架相比,avalon 更加“接地气”的点体现在哪些地方?

钟钦成: avalon 当初只是我另一个早期的框架 mass Framework 的一个插件。mass Framework 类似于 jQuery 与 Prototypejs 的结合体。没什么特色,被理没也是必然的。但我说过,轮子会越造越好的。当我将这个插件介绍到博客园——国内一个非常著名的.net 社区,反响很不错。于是我把它独立出来搞。经过 5 年的发展,它渐渐拥有自己的论坛与社区。不过,由于年纪大了,我也开始抗拒一些新东西(比如说组件化与动画),导致 avalon 一度发展缓慢。avalon 1.5 试图奋起直追,效果不明显。avalon 2 决定使用一个更吸引眼球的东西扭转局面,这就是虚拟 DOM,以期能够带来性能上的飞跃。

MVVM 虽然非常方便,但很容易出现性能瓶颈。出自于谷歌之手的 Angular,也有 2000 指令之轭(即一个页面超过 2000 个指令,页面更新就慢得令人发指)。FaceBook 的 React 带来了“虚拟 DOM”这个新概念,使用轻量对象来代替重型对象来承担绝大多数的页面重绘工作,解决了所谓的“性能墙”问题。

原来 MVVM 架构是分三层,M,V,VM 三层,我们只需要关注于 VM。VM 通过各种手段得知外界对它的操作 ,然后它智能地通知 M 与 V 进行变更。VM 承受太多职责,导致不堪重负。而虚拟 DOM 的导入,让 avalon2 拥有 4 层架构。虚拟 DOM 位于 V 与 VM 之间,复杂的视图计算由虚拟 DOM 计算好, 然后 diff 出差异点实现最小化刷新。这是算法的伟大胜利。为了实现虚拟 DOM,前端框架作者也接触编译原理等高深东西了。

现在主流的 MVVM 也结合虚拟 DOM 进行性能优化。基本上它们是基于 Object.defineProperty 这个 PI。而这个 API 在 IE8 中有 BUG,只能用于 IE9+ 。因此它们的兼容性都比较差。而 avalon 的优势在于其作者精通各种兼容性问题与黑魔法。在 IE6-8 下,我找到了 VBScript 实现对 VM 的自省机制,在较新的浏览器使用 Object.defineProperty, 在更新锐的浏览器,则使用 Proxy(动态代理)这个划时代的东西,从此我们可以动态监听对象是否被添加删除了某个属性,或调用了某个方法,而不像 Object.defineProperty 只能监听读写操作。(Proxy 对象被用于定义自定义基本操作的行为 (如属性查找、分配、枚举、函数调用等),在 Firefox 的定义中有一共有 14 个属性。)

从这个介绍来看,avalon 是走在时代的前列,但它不忘初心,还继续支持 IE6,让大家用 MVVM 或虚拟 DOM 时没有后顾之忧。

InfoQ:在选择前端框架时,大家的建议很多,例如结合自己的业务等。您也曾提到,选择前端框架应综合考虑框架本身与团队情况。要考虑的点这么多,究竟怎样来综合考虑呢?具体的步骤应该是怎样的?

钟钦成:的确如此,技术本来是为业务服务的,单纯玩技术是没有前途,也找不到方向。前端框架之所以这么多,也是因为大家的业务侧重点也各不相同。选择合适的框架,比选择一个时髦的框架重要多了。千万别让手下自行决定。他们玩不转可以拍拍屁股走人,留下一个烂摊子给后人。我就后说一个公司,先后引进了 Angular, vue, React 三个框架了,结果他却跑了。我们要考虑到业务的可持续性,代码的可交接性及团队的普遍接受能力。比如一个公司,没有前端,都是后端顺手做前端的活,早期许多公司都是招 PHP 实现前端通吃的。他们的设计模式比较好,可以上手 Angular。如果一个团队新人够多,不稳定,则只能用 jQuery 与 bootstrap。如果是一个创业公司,急着做出原型来拉投资,可以尝试 vue,avalon,React 等短平快的框架。但我所说的还是核心框架,涉及到图表,UI 库,则更多选择。这些需要架构师见多识广,自己趟过坑,才让团队集中过河。

InfoQ:有人说前端编程标准和方法渐渐出现稳定的趋势,您怎么看待这一观点?在之后的发展过程中,有没有可能标准完全统一?有没有可能某个前端框架一统江湖?

钟钦成:这个观点前半段是对的。像 jQuery 带来一系列便捷的操作 DOM 的方式,append, prepend, remove 等方法已经在 DOM4 中实现了。其最著名的选择器引擎,也有了原生替代品。因为浏览器商之间也存在竞争关系,他们当然将一些公认的好东西内置了,以讨好用户。但每个浏览器商是没怎么商量沟通,W3C 给出的规范也是足够含糊客气,因此出现差异是在所难免的。因此不要相信浏览器,要使用框架! 至于框架,由于文人相轻等缘故,框架之战是不会停息的,好的框架会不断涌现,它们可能以某个神奇的设计一下推翻前朝的统治。就像 jquery 灭掉 prototype, gulp 灭掉 grunt, webpack 灭掉 browserfy, React 灭掉 Angular……

InfoQ:您认为,前端开发人员学习框架设计应具备哪些能力?应从哪些方面着手进行设计?哪些地方有“坑”,需要注意避开?

钟钦成:这个问题比较笼统,我也只能笼统地回答。就像你问怎么挣大钱,有许多东西,人家说出来你也不能复制。首先,基础很重要。如科班出来的人,搞前端就很易上手。可见算法与数据结构的威力。其次是设计模式,这是 JAVA 十多年积累的精华,是我们构建巨型工程的威器。现在前端框架也动不动上万行了。像过去那样,全是方法+全局变量在堆砌,在生产环境中找 BUG 是恶梦。最后是好好看高手们的框架,阅读源码是进步最快的方式之一。只有看了足够多的源码,你才能博采众长,出奇制胜。最后,就是宣传与测试了。宣传确保你拥有第一批用户,成为你继续维护与升级的动力。需要提供一系列便捷的下载渠道,npm、bower、component、cdn,因为酒香还巷子深 。测试是确保你能留住用户。目前社区上产出大量的测试工具,你可以将它们全部绑定在 webpack,在用户 build 工程时,把所有测试跑一遍。

语言 & 开发架构前端