野蛮生长的前端，从杂牌军到正规军

Original Guooo 码闻强识 2017-10-29

笔者从事后台研发多年，对前端实在是没有多少发言权，下面就斗胆以门外汉的角度聊聊近来对前端技术的一些见解，也自当整理一下思路，使前端技术如何更好的融入到整个产品研发架构中来。这里的前端语言不仅限于js，还是css,html等等。

来看一看2016年，github统计出来的不同语言的项目排行榜吧，是不是有一种投身前端大潮的冲动？！

2016 JavaScript Rising Stars：https://risingstars2016.js.org/en/

笔者是从JQuery时代过来的，但JQuery也玩的不怎么样，遇到问题一般也就是从网络中查找下资源，解决问题即可，并没有深入进行系统性的掌握起来。随着我对前端技术资源查找的深入，就像发现了浩瀚的宇宙里居然有那么的星球，整理出一张图，便于系统化的理解掌握：

1995年，在Netscape在其浏览器上设计实现，开天辟地，之后便有了大踏步的进步，一个从0到1的过程，开始广泛的WEB应用。但凡搞WEB开发的，多少都会点Js语法达到功能需求，谈不上什么框架，更谈不了什么工程化，堆砌代码实现功能而已。

随着工作量的加大，一些比较IT界比较懒的同志开始坐不住了，于是出现了各种框架、脚手架、组件库，开发效率开始大幅度的提升。JQuery出现的比较早，紧接着框架便如雨后春笋般的成长，截止到目前依旧有数不清的框架、库，为了解决不同的问题，为了不同的目标被编写出来。早期还算是门户之争，后期更像是团购、O2O、P2P一样，百团大战乃至千团大战，你能接触到的也基本是一些头部框架/库，更多的是悄悄的湮灭不见。

框架与框架之间也是不同的，各种思想也被倾注其中，比如经典的MVC，到后来的MVVM，MVP等等。张三可能比较喜欢Vue，李四就比较擅长Angular，王五搞后台的就比较喜欢Bootstrap，还有React，Backbone，zepto，compass，sass，less等等不一而足，有可能你都没有听过。但就是这些开发库、开发框架构建成了当下前端开发的一片天，软件交付的质量、频率也得到了长足的发展。

你可能比较保守，最不济也会用JQuery而不会用原生的来搞产品开发。那些个好学上进的同志，可能会一把些前沿的技术放到项目里面去试错成长。具体该掌握哪些东西，相信身处前端开发岗位的同学应该有自己的度量。

目前大多数团队应该处于这个阶段，这个阶段的开发模式基本是：找个框架或库，直接copy到项目里，前端人员编写好样式、基本js代码，扔给后端开发，后端再把业务逻辑套进静态页面里，最后随着后端服务直接发布。好一点的还有规范做指导，一般的话就是随便写就行了，毕竟前端人员两三个，能把功能实现就好了。

这种做法前、后端职责分工不明确，有些运行性能、安全问题没有很好的解决，比如

js/css文件的大小，在页面加载时显的优为重要
js/css中开发过程中的注释，但不能暴露在外面
js/css的版本发布中的缓存问题
js/css文件合并，提高加载效率
js/css代码的逻辑混淆(毕竟是暴露在浏览器端，总不能把自己的代码逻辑一览无余吧)，

迫切需要构建、优化工具诞生来协助我们解决这些问题。BTW，这里有一个绕不开的NodeJS要特殊说明下：

NodeJS
此间不得不提到一个划时代进步的框架、思想、工具：NodeJS、NPM。上面提到的包括后面即将提到的很多框架、组件库，语法都类似于NodeJS，安装维护也基于NPM来完成，可见其战略地位是多么的重要。
NodeJS的出现，可以算是前端里程碑式的一个事件，它让前端攻城狮们摆脱了浏览器的束缚，踏上了一个更加宽广的舞台。前端的可能性，从此更加具有想象空间。
花了点时间，顺便熟悉了下NodeJS，简单总结了张脑图

由于其事件驱动、非阻塞io、单线程，在应对高并发的场景下表现比较出色，但同样也有其不擅长的场景，比如大数据处理、复杂逻辑处理等，所以有时候还需要与其它成熟的语言比如JAVA配合开发，完成功能【经常听说前端开发掌握了NodeJS就可以变成全栈开发，不知道这个全栈指的是什么？】
虽然NodeJS是写js，但我不认为前端员能够很好的掌握，相反后端的同志会更容易掌握，毕竟这是前、后端两种思想的碰撞。
NPM的出现使前端开发的包管理变的异常的简单便捷，也使前端开发者方便地分享和重用代码、更方便地更新自己分享的代码。

NodeJS先说到这里，我们回到正题。

大家比较公认的两大前端构建、优化工具非GRUNT和gulp.js莫属了。自此前端开发才算进入到一点工程化的道路上来，引入任意一个工具到项目来，基本上可以完成对代码的简化、压缩、校验、混淆、合并等等，来满足实际开发、运行过程中的安全、效率问题，当然开发效率上也有更大的提升。

结合CI/CD工具，如Jenkins、Travis，前端研发流程一样可以如后端迭代开发流程一样，实现持续集成、持续交付、持续部署。

采用工程化构建流程之后，前后端职责分工便更加明确，前端更专注于数据展现，后端仅提供数据查询、数据处理，相互不受影响，各自也能在关注在各自领域内的问题，比如动静分离，静态化处理等。

模块化、组件化

走上工程化的道路后，当然希望以更一步，模块化、组件化开发，降低耦合，提高复用。此间也出现了一大批框架、组件库，比如commonjs、requirejs、seajs、less、sass、stylus、webpack等等，CMD与AMD的思路碰撞等等，到达这一步光靠框架、构建工具已经不足满足，道与术的完美结合才能更好的实现模块化、组件化的研发之种。(css的演化不如js来的那么凶猛)。

Java是一个非常成功的工业化语言就是在于其工程化程度很高，能够大规模的应用而依旧有据可依。按检索到的资料中一些貌似大牛的总结：前端技术如何能走到流程构建、优化、模块化开发已经处于国内前端开发团队的先列，绝大部分依旧是停留在框架选型阶段，工程化程度与后端不匹配。

写到这，内心有一股冲突：前端开发必须往前一步，不留仅停留在框架阶段，至少走到构建、优化这一层。如果能像一些大厂一样走进模块化、组件化阶段那是更好，比如BATJ、TMMD，但对人员的技术能力储备、团队的思想层次有很高的要求。

但目标定的高，我们才能走的更远，你说呢？ 0?wx_fmt=gif