我所亲见的前端技术变革

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