2014 年 WEB 高手都在做什么 -- 一个后端工程师的视角

[yafeilee]

0. 写在前面的话

For V2EX, 一直在潜水, 从未发过言. 今天, 重回写作, 出来见人. 希望一些分享对大家有用.

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

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

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

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

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

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

1. GruntJS

首先, 迎入眼帘必然是 GruntJS, 这是一个类似于 make©, 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

如果你是我的忠实读者(虽然不多), 还是技术爱好者, 应该就知道我之前翻译了一篇它俩的比较一文: http://yafeilee.me/blogs/52f83eb915638851a3000006, 通过这一年的观察, 这两个都是非常酷的 CSS 框架, 如果你不是一个 CSS 的顶级高手, 择其一而用之, 你会发现, 做一个漂亮的页面, 也没那么复杂嘛.

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

Sass, Less

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

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

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

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

总结

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

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

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

我们拭目一待.

关于我: 李亚飞, 居住在深圳的 Ruby 爱好者, 全栈, 创业中. 爱 Rails, 也爱生活.

ps: 欢迎关注我的微信公众号: 技术达人李亚飞. 讲述我们技术界的技术, 生活, 创业. 此文首发于我的博客: yafeilee.me

[kmvan]

用 Bootstrap 的朋友，难道就不觉得那些 html 结构冗余的不得了吗？一个简单的并列，他要里三层外三层层层包围，哎哟，看得我揪心。

[limbo0]

@kmvan 不管怎么说Bootstrap是后端程序员开发前端的福音,后端终于可以~~

[yafeilee]

@kmvan 这点是挺感同身受的, 可以试试 Foundation 5.

[qdwang]

一年前也是这些东西 没什么新意啊

[dustinth]

都是主流框架和工具. 公司选型就是这些东西.

[loooooost]

总结的很全面，基本把前端涉及的方面都提到了。
还可以补充一点移动端的比如 ionic ratchet

ps: Bootstrap 与 Fondation 拼写错了

[yafeilee]

@loooooost 嗯, 关于移动端的前端框架会再组织一篇文章, 而且要讲讲移动端趋势, 不然就太大啦.

[clino]

前端的技术发展也让后端程序员能往前台走了

[vicalloy]

Bootstrap 和 Foundation 相比最大的优势是社区环境好啊。
各类的JS组件都能和Bootstrap很好的工作。

[gt11799]

目前收后端工程师，也想成长为一个全栈工程师呢。

[nbkhic]

great, thank you for your share.

[zyue]

@gt11799 +1 虽然有人说全栈是个歪脖子书 可是还是想什么都会

[kokdemo]

@kmvan 需要三层吗？外层一个row，内层一共两层就够了啊

[jimmy66]

感谢分享~

[pysama]

我就问个实际的问题：各种技术， 各种名词等等，这些东西如何体现价值，你的BOSS和公司如何透过这些衡量你的贡献？
当然我不是针对LZ，我只是说出自己的困惑。

技术只是手段，我觉得。吾辈缺乏的是包装技术的能力，量化自己产出的能力和觉悟。

[maddot]

感觉这些玩意创造了很多就业岗位

[zhaiduo]

前端工业自动化时代

[datou552211]

@kmvan bootstrap只用来解决整体布局，自己写的时候确实会不自觉的多写包裹层

[cornelia]

貌似现在很多人从grunt转到gulp了

[pertersonvv]

@kmvan bs会降低浏览器性能么?

[kfll]

…我以为楼主要讲后端……

[lijinma]

妥妥的使用 gulp啊。。

谁用谁知道。。

[yafeilee]

@pysama 工作做的又快又好, 就是你的产出. 老大就会看重你.

[Jafee]

GruntJS尽管被许多大项目采用，不过他们的官方文档（二月份时看的）写的真是狗屎，如果是构建入门的话，学习倾度比较大。

[momowei]

前端无非是吧后端的一些思想,mvc(backbone),mvvm(angular),grunt(ant,maven)用前端实现了一遍。不过我觉得主要还是由于移动端的到来和谷歌v8引擎这几年的快速发展让现在的前端发生了这么多变化。

[momowei]

mvc在后端已经实践至少有10年了吧，mvvm在adobe flex框架里面也是早就存在了，wpf。其实没什么新的东西

[pysama]

@yafeilee 这个嘛，看公司吧。哈哈

[tshwangq]

grunt已死

[tshwangq]

前端的兴起，主要还是因为软件的产品化时代的全面来临。

[SunLn]

@kmvan 认可啊

[anubiskong]

@tshwangq 为啥说grunt已死, 我还没来得急学呢 T_T