写在前面的话

今年对于我， 从技术上说， 还是有不少的进步的。 进步的主要是在于前端开发， 所以， 想从后端工程师的身份对前端的发展做一些总结。

在我前几年的印象中， 前端工程师一直是一个很不独立， 也不高端的职位。 因为他们就是来写 Javascript 的。

往上要跟 UI 设计师要设计图， 被他们欺负， 往下与老牌的后端工程师要接口， 后端工程师往往作为架构师存在， 只能更被期负， 由于自己的领域只是关乎用户体验， 与功能无关， 又 Javascript 作为一门语言设计的仓促， 有很多缺陷， 所以很难过。

随着 Javascript 的发展， 前端用户体验要求越来越高， 前端俨然迎来了春天。

据业内报道， 前端工程师薪水也完全可以媲美甚至越过后端工程师。 我们来看看前端是怎么从一个简单的脚本小子蜕变成高上大的工程师的。

一切的蜕变从 v8 的产物之一: nodejs 开始。

1. GruntJS

首先， 迎入眼帘必然是 GruntJS， 这是一个类似于 make(C)， ant(JAVA)， rake(Ruby) 的构建/执行环境， 它本身并没有伟大的地方， 但伟大的是它的生态环境。

随着 GruntJS 的成熟， 越来越多的组件被加入 GruntJS 的阵营：

CSS 压缩 精简， 打包 Javascript 图片压缩， 合并 Sass， less 处理 Coffeescript 处理 发布前端应用

看得出， 这已经是一个完整的生态系统， 不需要像从前那样后端的帮助， 前端完全有自己的工作流程了。

与 GruntJS 类似的一个产物叫 GulpJS， 它采用管道技术来优化与改进 GruntJS 的不足， 发展很快， 大有赶超的趋势。

2.Yeoman

GruntJS 之后， 必然缺乏一个前端工作流程事实的标准， 这就是 Yeoman。 Yeoman 是一个由 30 多人的团队开发维护的脚手架项目， 通过它， 我们不要需要研究 GruntJS 里面的各种插件。 只需要跟随 Yeoman， 跟着它， 便能找到光明: 十倍百倍地超越一般程序员。

例如， 我输入

yo angular

就可以创建

.
|-- Gruntfile.js
|-- app
|   |-- 404.html
|   |-- favicon.ico
|   |-- images
|   |-- index.html
|   |-- robots.txt
|   |-- scripts
|   |-- styles
|   `-- views
|-- bower.json
|-- bower_components
|   |-- angular
|   |-- bootstrap-sass-official
|   |-- es5-shim
|   |-- jquery
|   `-- json3
|-- node_modules
|   |-- grunt-autoprefixer
|   |-- grunt-usemin
|   |-- grunt-wiredep
|   |-- jasmine-core
|   |-- jshint-stylish
|   `-- karma
|-- npm-debug.log
|-- package.json
`-- test
    |-- karma.conf.js
    `-- spec

都不用管 bootstrap， angularjs 从哪里来， 一个项目已经启动了。

扔掉 Rails， 开启前端开发之旅。

Bower

说到 Yeoman， 不能忘了它背后的 "男人"， 这就是 Bower， 类似于 Ruby 圈子的 bundler，

正是因为它， Yeoman 才会方便做到自动帮你管理 bootstrap， angularjs， 无须让你操心用哪个版本， 如果愿意， 它会帮你更新， 当然也可以帮你锁定版本。

Angular

项目基础的框架能让你开发的流程十分顺畅， 就像我在办公室里面， 用着 27 寸 imac 一样带感， 而你只用着 3 年前的配置， IT 部还告诉你， 2G 内存完全够用了。

但是， 真正让高手与菜鸟产生差距的还在于内功: 前端JS框架， 如 Angular， Ember， Backbone 以及小而美的 React。

我们先来说说 Google 出品的 Angular， 也是我最熟悉的前端框架。

首先， 它出手极快。 相信你去看过它的官方主页， 就可以体会到， 什么叫快速开发。

其次， 它非常现代化。 不管你信与信， HTML 标准已经落后时代好多年了， 单单从 HTML 的组件化能力上看， 几乎没有。 而 Angular， 从内在改进了它。 通过编译原理， 标记扩展， digest 处理等技术手段， 让你可以写出极为优雅的逻辑代码。 并且前端测试， 在它这里易如反掌。

最后， 最为全面。 它拥有自己的路由系统， Model， Controller， View， Template， 一个不少。 极为方便的开发体验。

并且， Angular 2.0 也在日程， 将会一消第一版的历史问题， 带来更为清晰现代的设计。

Backbone & Ember & React

之所以把 Angular 单独一篇， 是我最看好它， 无论是设计， 还是技术， 还是生态， 皆有巨大优势。 不过， 大而全， 不一定全是优点， 我们先来看看 Backbone。

Backbone 其实是一个十分久远的前端框架， 或者说， 在 Angular 之前， 它是事实的标准。 而且在很多重前端的项目中， 都应用很不错。 随着时间的推进， 小而美( 核心只有 1000 多行 )不太适合普通开发者使用， 重复开发的轮子太多， 人们开们转向 Angular 与 Ember 了。

而 Ember 是一个真正的 MVC 前端框架， 其思路借鉴了后端的 MVC 思想， 相比于 Angular， 它也很全面， 很好， 与 Angular 与众不同。

它的背后， 也站着许多坚定的支持者， 因为它确实值得你去一试。

而且， Ember-CLI 这样一个像 Rails 一样酷的框 架的出现， 也大大激励了整个社区的前进。

如果说， Angular， Backbone， Ember 都是为解决前端问题而生的全能型武器。 那 React 就是一个锋利的匕首， 你可以同时携带一个主武器和一个匕首， 是吧？

这个 "匕首"， 是由 Facebook 发起的开源项目， 它利用虚拟 DOM 生成技术， 极为巧妙地避开了一般前端框架都会遇到的一个问题: DOM节点处理的性能问题。 并且， 通过特有的虚拟 DOM， 可以很好的封装自己的组件， 让一个组件像后端的一个函数一样， 有输入与输出。 在庞大的前端项目中， 有了它， 就可以游刃有余地重用代码。

说完前端框架， 不得不提的就是 CSS 框架了。 缺了 CSS， 我们的生活哪有色彩。

Bootstrap 与 Fondation

这两个都是非常酷的 CSS 框架， 如果你不是一个 CSS 的顶级高手， 择其一而用之， 你会发现， 做一个漂亮的页面， 也没那么复杂嘛。

Bootstrap 与 Foundation 有许多关键的区别， 但是， 我想你只需要记住一件事:

ZURB 和 Twitter 的两种设计理念是很清楚的， 从他们对自己的框架的命名就可以看出来: Bootstrap 有引导， 开机自举的意思， 换言之， 它尝试处理你项目中一切所需要的。 而 Foundation 有创建， 创造的意思， 换言之， 它仅仅给你项目中强有力的创造力。

相比之下， 我更喜欢 Foundation， 如果你都用过， 相信会理解我的意思。

关于Bootstrap可查看：Bootstrap3.0教程

Sass， Less

除了 HTML 与 JS， CSS 也不断在发展， 因为 CSS 没有像 Javascript 那样强大的扩展性， 所以我们只能去做他的预编译技术:

Sass， Less 这两个项目正是为此而生， 有了它们， CSS 里面也可以用变量， 可以写函数， 可以复用代码了。

这个方向， 正是为写大型复杂的前端项目应运而生。

值得一提的是， 有人写了一个 Stylus， 可以采用缩进的方式写 CSS， 而且语法与 Sass， Less 非常相近。

总结

WEB高手之所以为高手， 是他的学习能力， 是他的创造力， 是他愿于突破自己的舒适区。 不断改进手上的技术， 不断提高水平。

而前端领域， 也像后端一样庞大的社区了， 那么， 后端还需要像 Rails 那样大而全的框架吗？ 也许只需要一个 API 接口就可以了。

这个 API 接口， 目前看不是 nodejs， 也不是 Rails， 不是 Grape， 那会是什么呢？

我们拭目一待。