微信号:ptpressitbooks

介绍:走在技术最前沿,发布最新新书资讯,分享最新技术文章.

大咖专访——前端的路该如何走

2017-09-08 11:30 人邮异步社区

       点击标题下「异步图书」可快速关注      

在前端最能反映威力的技术之一就是框架,其中一个评价标准是在GitHub上拿到很多星星的开源框架。从2015年起,JavaScript就加速添加新特征、新语法、新功能,框架也变得越来越庞大,越来越复杂,因为对应的行业需求总是比我们的框架更复杂。是我们的框架适应现实,不是我们的框架无端变得如此“不可理喻”,学习门槛越来越高,要读懂已有框架的难度系数越来越陡峭。下面我们将引入一段InfoQ对于《JavaScript框架设计(第2版)》作者司徒正美的专访,带你了解前端领域。


 作者简介

钟钦成 网名司徒正美,著名的JavaScript专家,立志做考古学家的日语系工程师,穿梭于二次元与二进制间的“魔法师”,做过陶艺,写过小说,涉猎Java、Ruby、 JavaScript,3年成就此书!  




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

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

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

总的来说,我的兴趣都有个特点,就是缺少与他人的互动。编代码也一样,一个人静静地编就好了。像PM,需要与别人不断沟通,我可能做不过来。每个人的性格都不一样,因此选择行业要符合自己的性格。

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

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


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

笔者:这是一个老生常谈的话题,基本每本JavaScript书都会聊一下这个话题。主要原因是,JavaScript没有自己的SDK(核心库),需要依赖“民间”的力量。最开始是一些大公司有能力开发这些框架,如Prototype.js,也是作为ROR的次要项目开发出来的。此外还有dojo、closure、YUI这巨大的框架,也是大公司搞的。后来突然出现jQuery这样由天才开发的框架。事实证明,大公司那一套管理方式,以KPI驱动的框架有着致命的缺憾,虽然面面俱到,但不能迅速吸收IT社区的新东西,使用起来不够方便灵活。

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

这个时间里,产生了像backbone这样的MVC框架。但立即被knockout、angular、react等MVVM框架占去份额了。要知道,后端从MVC进化到MVVM,需要大概10年时间,而前端则不到2年。前端框架发展实在太迅猛了!

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

目前国内的发展历程其实与国外一模一样。最开始是公司牵头,后来就涌现大量出色的个人项目。阿里的前端技术之所以这么强,是因为他们不断地研制自己的“轮子”,“轮子”会越造越好。那些绝不重复造“轮子”的人默默无名,而框架作者们则开创自己一片新天地了。中国拥有世界上最庞大的互联网市场,面临的挑战很大,光是满足国内用户的需求,国内框架的研发人员就需要比国外同行更加努力。经过这几年的磨练,国内的框架也渐渐走出国门(如我的avalon,在澳大利亚、德国都有人在用,又如百度的ECharts,这个也非常抢眼)。


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

笔者:avalon当初只是我另一个早期的框架mass Framework的一个插件。mass Framework类似于jQuery与Prototypejs的结合体。没什么特色,被埋没也是必然的。但我说过,“轮子”会越造越好的。当我将这个插件介绍到博客园——国内一个非常著名的IT社区,反映很不错。于是独立出来搞。经过5年的发展,它渐渐拥有自己的论坛与社区。不过,由于年龄的增长,我也开始抗拒一些新东西(比如说社区上一些自动化工具,总是想自己全部实现),导致avalon一度发展缓慢。发展到1.5版时试图奋起直追,效果不明显。avalon2决定使用一个更吸引眼球的东西扭转局面——这就是虚拟DOM,带来了性能上的飞跃。MVVM虽然非常方便,但很容易出现性能瓶颈。出自于谷歌之手的angular,也有2000个指令(即一个页面超过2000个指令,页面更新就慢得令人发指)。Facebook的react带来了“虚拟DOM”这个新概念,使用轻量对象代替重型对象来承担绝大多数的页面重绘工作,解决了所谓的“性能墙”问题。

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

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

从上面的描述来看,avalon走在时代的前列,但它不忘初心,还继续支持IE6,让大家用MVVM或虚拟DOM时没有后顾之忧。并且大家也不用担心avalon为了兼容IE6,会变得非常冗长。因为avalon是一份源码编译出好几个版本,每个版本根据浏览器的支持程度合并对应的模板。如果只想运行于IE10,其会相当小。


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

笔者:的确如此,技术本来是为业务服务的,单纯“玩”技术是没有前途,也找不到方向。前端框架之所以这么多,也是因为大家的业务侧重点各不相同。选择合适的框架,比选择一个时髦的框架重要多了。千万别让手下人员自行决定。他们玩不转可以“拍拍屁股走人”,留下一个烂摊子。我们要考虑到业务的可持续性、代码的可交接性及团队的普遍接受能力。比如一个公司,没有前端开发人员,都是后端开发人员顺手做前端的活,早期许多公司都是招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是恶梦。最后是好好看高手们的框架,阅读源码是进步最快的方式之一。只有看了足够多的源码,你才能博采众长。再最后,就是宣传与测试了,宣传确保你拥有第一批用户,成为你继续维护与升级的动力。需要提供一系列便捷的下载渠道,因为酒香也怕巷子深。测试是确保你能留住用户。目前社区上有大量的测试工具,你可以将它们全部绑定在webpack,在用户build工程时,把所有测试运行一遍。

最后说“坑”,其实没什么“坑”,所有浏览器兼容性问题与技术难点,许多技术高人都提供现成方案。但如果你做出框架,不再维护,对使用者来说这才是“大坑”。就是你不想维护了,就要找一个接盘者来主持。就像jQuery、nodejs等著名项目,原作者早早交给他人维护。


作者对于《JavaScript框架设计(第2版)》一书评价

距本书前一版出版已经3年了,这3年来前端技术也发生了很大变化。因为这3年中,出现了团购、P2P、O2O、直播等几大创业热潮,对前端的技术需求更强,也要求更高。许多公司为了迎合用户需求,也由PC端转移到移动端,全新的交互方式,及之前不曾遇到的性能问题,这些都需要全新的思路与框架来解决。旧的jQuery已经跟不上时代的步伐,因此一些新库如雨后春笋般出来,如fastclick、iscroll、react、fetch-polyfill、es5-shim、babel、rollup、rxjs …… 在react新版刚完成之际,react的版本号已经飙升到15,nodejs已经发展到8.0,这么多新东西,这么快的更新换代,一方面反映了前端技术的欣欣向荣,另一方面说明这个市场还不成熟。市场不成熟,正是框架高手“称雄一方”的好时机。远的不说,就说国内的玉伯,由于适时推出seajs,与国外的requirejs竞争,国内舆论哗然,贬褒不一,但不管你说什么,时势造英雄,为什么英雄不是自己呢。说到底,实力很重要。

在前端最能反映威力的技术就是框架,其中一个评价标准是在GitHub上拿到很多星星的开源框架(网友的评论)。这是一本讲JavaScript框架的书,初版发布时,是国内唯一一本深入研究前端框架的书。新的一版,也是市面上唯一能把框架研究得较深入的书。深入并不代表难,但肯定有门槛。因为从2015年起,JavaScript就加速添加新特征、新语法、新功能,框架也变得越来越庞大,越来越复杂,因为对应的行业需求总是比我们的框架更复杂。是我们的框架适应现实,不是我们的框架无端变得如此“不可理喻”,学习门槛越来越高,要读懂已有框架的难度系数越来越陡峭。

当然,你也可以尝试无师自通,在武侠小说中,无师自通的主角不在少数,但无书自通者恐怕寥寥无几。我觉得有效的方法是多看几本进阶的书。有人说,书买十本看一本也值的,我觉得有待商榷。因此我推荐钱穆的另一个说法。当年,李敖向他请教治学方法,他回答说:并没有具体方法,要多读书、多求解,当以古书原文为底子、为主,免受他人成见的约束。书要看第一流的,一遍一遍读。与其十本书读一遍,不如一本书读十遍。不要怕大部头的书,养成读大部头书的习惯,则普通书就不怕了。从这里面得到许多启示,一是读好书,二是读原版,三是精读,四是能读厚书。

第一版的《JavaScript框架设计》是完全按照一个框架的编写顺序来编排,导致阅读难度太大,让许多读者反馈说无法坚持下去。这次大改版,将一些难点挪到后面,并加上大量的流程图与示意图来降低学习难度。并且随着浏览器的升级,许多东西也该更新换代,因此本书俨然是一本新书,无论是目录结构与内容上都焕然一新。最开始的知识是偏底层,讲授一些工具方法,一些常出现在各种框架的模块,里面会大量列举实现相同功能的不同实现,比如说isArray、trim、一个迷你的事件系统、获取元素样式、如何跨域……但越到后面,代码就越少,却能通过提供的网上链接,到相关博客里去观看相关的内容。后面几章都是非常前沿的东西,许多技术方案还没有定案(至少在我成书时),没有最佳实践,只能提供一些抽象的方法论,让读者们自行悟道。有些东西不是死记硬背就能理解的。并且,本书也不是让你造一个avalon/angular的框架。每个时代对框架的需求都不一样。引用《从0到1》里的话——商业世界的每一刻都不会重演。下一个比尔·盖茨不会再开发操作系统,下一个拉里·佩奇或是谢尔盖·布林不会再研发搜索引擎,下一个马克·扎克伯格也不会去创建社交网络。如果你照搬这些人的做法,你就不是向他们学习了。

本文摘自《JavaScript框架设计(第2版)》


推荐理由

引导读者了解近10年来大师们打造的优良框架以及其中令人称道的奇思妙想 

更深入、更彻底地认识JavaScript,领略jQuery等库的架构之美和设计之美 

帮助开发者高屋建瓴地打造适合自己的前端框架 

内容简介

本书全面讲解了JavaScript框架设计及相关的知识,主要内容包括种子模块、语言模块、浏览器嗅探与特征侦测、类工厂、选择器引擎、节点模块、数据缓存模块、样式模块、属性模块、PC端和移动端的事件系统、jQuery的事件系统、异步模型、数据交互模块、动画引擎、MVVM、前端模板(静态模板)、MVVM的动态模板、性能墙与复杂墙、组件、jQuery时代的组件方案、avalon2的组件方案、react的组件方案等。

本书适合前端设计人员、JavaScript开发者、移动UI设计者、程序员和项目经理阅读,也可作为相关专业学习用书和培训学校教材。


购书地址:https://item.jd.com/12239072.html 

试读:http://www.epubit.com.cn/book/details/4849 


本周免费电子书

 
人邮异步社区 更多文章 异步9月新书丨Kotlin领航经典著作升级 聊聊Python 开学季省钱攻略,经典好书值得买! 程序员该懂一点儿KPI 你与高薪仅差一本Kotlin
猜您喜欢 技术控领福利 | 《CoreOS实践之路》免费赠书活动 码农们,还记得大明湖畔的 Windows 95 吗? isc意犹未尽?10月还有华为网络安全沙龙 距离一个优秀程序员 你还差这些 Algorithm from THE BOOK