我所亲见的前端技术变革

cncde 9年前

该文最先发表于我的微信公众号:FangTalk。注:头图来自于google搜索,截取自51CTO

进入正文之前,先声明,我并不是前端工程师,对前端的理解也比较“肤浅”。只能站在一个带队者的角度,阐述我的团队最近几年所使用过的前端技术方案。知乎上 @狼大人 邀请我回答“好的前端主管是如何带队的”,遗留了很久,这里也算是补上这次邀请的答案吧。

我眼中的原始时代

06年开始接触JavaScript,当时处于新项目启动但是需求待定,所以有了一段时间的闲散。白天上班无事可做,随手翻了本JavaScript来看。不记得书名,但是一发不可收拾,连续读完了两本书:《JavaScript 权威指南》和《JavaScript高级编程》(前两天在一个team member桌子上又见到了这本高级编程,发现厚度已经是当年的2倍了,你说这技术变革的快不快:)),边读边写了很多从“hello world” 级别的代码。

除了这个,我发现要写个动态页面,还要去搞懂DOM树,然后一并研究了CSS还有HTML。

反正什么都不懂,写个menu点点改变效果对自己已经满足感十足。

得益于这段空闲时间,一个月后的项目启动,顾爷“夸”我前端“牛逼”,然后就把项目前端最难的部分丢给我,“多级菜单”,对,就下面图示的这种:

我所亲见的前端技术变革哈哈哈,纯JS/CSS写了一周搞定。因为这个任务,聚餐的时候lead喝醉还和大家吹牛逼“你们不要瞎逼逼,谁也没大房厉害,可以写多级菜单”。。。

你知道这话放到现在,要多少个草泥马从我眼前飘过?

这个历史(别笑,也许真正的高手在当年已经创造出了BootStrap般神器,只是我等不知而已)。

原始的时代,那个时候,我们的第一武器就是:

  • 最原生的方法写JavaScript;同时由于刚刚编码入门,鬼知道有什么模块思想,如何封装等等。

  • JavaScript配合CSS和IE6作战

  • 不用任何的框架

JQuery的崛起

JQuery的第一个版本应该是在2006年8月出来,第一个可用的版本在07年,但是在中国火的满大街,应该到08年了吧?在我的印象里,在某C某V的项目里,开始大面积应用JQuery。

JQuery + JQuery UI + Plugin火的烂大街。当年最爱做的事情,就是收集好用的JQuery plugin,看到一个收藏到收藏夹一个,以至于到10年,点开那满满的收藏夹已经可以滚几个屏幕。你要知道,在当年,那可是宝,为了能在家、在公司、在任何一台电脑上都可以访问我的宝贝收藏,尝试了N多收藏夹自动同步还有管理的工具。

想来,整理我这堆JQuery plugin的收藏所花掉的时候,都要远远大于我写代码的时间了......

我所亲见的前端技术变革

不折腾就不会死的年代,这个时期:

  • JQuery火遍全中国;大家对它的认识处于“工具,工具方法,原生JS函数扩展”

  • 程序猿分出了两类:一类说“我是JQuery熟手但是不懂JavaScript”,一类说“如果你来面试说你会JQuery但是不懂JavaScript就滚”

  • IE6终于有了点解药

这个时期,火到Angular出现。

胖前端时代:踏步迎接Angular

我一定相信,在前端人的世界里,绝对不是从JQuery直接迈进了以Angular为代表的时代,其间可能经历了JavaScript 框架A,改进JQuery某某弱点、JavaScript 框架B 改进前端编程某某弱点,等等。

或者,在高人的眼里,Angular不能代表一个时代,而是其他某某框架。

但是,在我还在推崇“前端编码,JQuery大法好”的时候,某大神和我说,“喂,你们用过Angular吗?” 为了不落后,花了一个下午玩了一把,然后在新的项目里,就推行了。

然后从那之后的新项目都开始了MVVM/MVW的转型,而那个代表就是Angular。也是从那个时期开始,身边的人都在讨论Angular。

我所亲见的前端技术变革

图片来源于Google图片搜索 - Developer's Corner

跟着潮流,从“瘦前端”到“胖前端”转型。也是从这个时期开始,在项目的设计思路中,我们开始把基于H5的“页面”也考虑成了“客户端”,服务端的角色由提供数据并渲染变成了仅仅提供数据:

  • Angular以及基于opensource的Angular扩展,是我们的主要武器

  • 有服务端各种成熟方案的铺垫,JavaScript程序猿开始“崛起”,以前在服务端开发采用的工具、设计思想统统在前端开发的世界里开始施展拳脚

  • 感谢Node.js,以及由此带来的各种工具和思想(bower, grunt, gulp, yeoman, etc, 还有重要的Promise模式),JavaScript统一前后端。

  • 项目的开发语言由JavaScript转向CoffeeScript;CSS开始严重依赖BootStrap,样式语言转向LESS/SASS;部分项目用Jade替代了HTML

  • IE6淡出了大家的视野

现状和前瞻:趋于标准化

不知道是不是应该感谢Google还有Chrome,因为在我的记忆里,Chrome推动了前端标准化的进程,随着它的市场份额越来越大,前端工程师们的痛苦也越来越小。

当然,我的理解并不一定正确,我并没有去验证,去找寻一下历史资料,到底是哪些公司和社区力量,推动了HTML5,CSS3等标准化的进程。不管是谁,他们的贡献都值得感谢、铭记和尊重!另外,微信帝国的扩张,多少也对前端开发的发展,做出了不可忽视的贡献。

另一个不可忽视的贡献,就是ES6(现在叫ES2015,从名字就能意识到,这个代表2015年大家就可以用了)。JavaScript做为“浏览器里的汇编语言”,多年来发展缓慢,所以才有了TypeScript/Dart,才有了CoffeeScript,但是不管出现多少新的变种,都无法取代它统治浏览器端编程。ES6算是一个巨大的进展,内置了公有私有Class、模块,等等等等,让JavaScript向高级语言、更易工程化方向迈出了重要的一步!这里也应该再次向开源社区致敬!

今天,我们的新项目,技术选型已经开始拥抱新技术:

  • 用ES6代替了CoffeeScript,因为我们坚定的认为,不出一年,ES6一定统治前端;

  • 我们用Babel做为编译工具

  • 开始尝试一些新的框架和开发模式,用React/Redux替换了Angular.js

  • 模块化和构建工具,开始采用Webpack,同时用gulp替换了Grunt

  • 更重视前端的自动化测试和代码质量的把空

不得不提的Node.js

很多人提到Node.js都会说,跑在服务器端的JavaScript。大家更多关注的是它的能力,而忽视了这种能力对生态系统的影响。

  • npm包管理工具,推动了其他语言对包管理的重视和工具的改善;用PHP那么多年,直到最近一两年才有了可用的composer包管理工具,Python的pip发展这么多年到现在还远不能和npm相提并论;个人认为,npm也是bower等工具的思想基础

  • Node.js彻底解放了生产力,基于Node.js的自动化构建工具,测试工具层出不穷,这些工具不但对前端开发,同时也对服务端开发,客户端开发产生了巨大的影响和推动

现在,稍微上规模的项目,不管是任何语言做为你的主力开发语言,你很难看到里面少了Node.js的影子,它无处不在!(我并没有去找数据验证,也没必要,重要的是,如果你做前端,Node.js可以带给你200%的生产力;如果是做服务端,Node.js生态中的很多思想都值得你去借鉴,所谓“技多不压身”!)

谈谈我是如何带前端技术团队的

在我团队里,每个前端工程师都是我的老师,很多时候,评估一个页面效果的开发,我都需要请教他们。但是这并不妨碍我和他们沟通,带领大家完成项目的交付。

  • 给大家足够的空间

    不强制要求大家一定使用某一个框架或者技术方案,但是我会介入大家的选型和讨论,对大家提出的候选列表,我会一个一个的去研究和比较,适当地提出我的建议和反馈。

    同时,我允许大家“折腾”,尝试新的技术和方案。我唯一去做的,就是风险控制,保证项目交付的前提下,随便大家折腾。“年轻人,留给他们折腾的时间不多,等他们都变成了老人,没人再愿意折腾了;而折腾带给他们的,是不可或缺的经验。”

  • 注重团队结构

    两个原则:第一,矮子里面也要拔个将军,创造一切条件,让这个将军获得将军的能力和尊重;第二,告诉每个将军,选拔出自己的后备将军,因为我坚持认为“只有有人可以代替你的时候,你才能有更多的机会”!

  • 了解你的团队

    对你团队人员的了解程度,决定了你如何安排项目计划、任务分配和风险控制。同时,对每一个lead也做同样的要求,做到“合适的任务放置合适的人员”。

写在最后,可能每个人对前端的发展变化的理解都不一样,本文仅以我的视角,回顾了我所理解的变化。这么多年带了很多团队,交付了很多的项目,但同时我也有自知之明,也许我只是井底之蛙,看到了我能看到的世界,但是没有关系,重要的是,每个人都需要找到自己对这个世界的认识,找到拥抱这个变化的世界的方法,独一无二的方法。

来自:http://zhuanlan.zhihu.com/fangtalk/20359442