2014年WEB高手都在作什么

转李亚飞 2014年WEB高手都在作什么

写在前面的话

今年, 对于我, 从技术上说, 仍是有很多的进步的. 进步的主要是在于前端开发, 因此, 想从后端工程师的身份对前端的发展作一些总结.

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

往上要跟 UI 设计师要设计图, 被他们欺负, 往下与老牌的后端工程师要接口, 后端工程师每每做为架构师存在, 只能更被期负, 因为本身的领域只是关乎用户体验, 与功能无关, 又 Javascript 做为一门语言设计的仓促, 有不少缺陷, 因此很难过.

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

据业内报道, 前端工程师薪水也彻底能够媲美甚至越事后端工程师. 咱们来看看前端是怎么从一个简单的脚本小子蜕变成高上大的工程师的.

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

GruntJS

首先, 迎入眼帘必然是 GruntJS, 这是一个相似于 make(C), ant(JAVA), rake(Ruby) 的构建/执行环境, 它自己并无伟大的地方, 但伟大的是它的生态环境.

随着 GruntJS 的成熟, 愈来愈多的组件被加入 GruntJS 的阵营:

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

看得出, 这已是一个完整的生态系统, 不须要像从前那样后端的帮助, 前端彻底有本身的工做流程了.

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

Yeoman

GruntJS 以后, 必然缺少一个前端工做流程事实的标准, 这就是 Yeoman. Yeoman 是一个由 30 多人的团队开发维护的脚手架项目, 经过它, 咱们不要须要研究 GruntJS 里面的各类插件. 只须要跟随 Yeoman, 跟着它, 便能找到光明: 十倍百倍地超越通常程序员.

例如, 我输入

yo angular
`</pre>

就能够建立

<pre class="highlight shell">`.
|-- Gruntfile.js
|-- app
|   |-- 404.html
|   |-- favicon.ico
|   |-- images
|   |-- index.html
|   |-- robots.txt
|   |-- scripts
|   |-- styles
|   <span class="sb">`</span>-- views
|-- bower.json
|-- bower_components
|   |-- angular
|   |-- bootstrap-sass-official
|   |-- es5-shim
|   |-- jquery
|   <span class="sb">`</span>-- json3
|-- node_modules
|   |-- grunt-autoprefixer
|   |-- grunt-usemin
|   |-- grunt-wiredep
|   |-- jasmine-core
|   |-- jshint-stylish
|   <span class="sb">`</span>-- karma
|-- npm-debug.log
|-- package.json
<span class="sb">`</span>-- <span class="nb">test</span>
    |-- karma.conf.js
    <span class="sb">`</span>-- 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, 那会是什么呢?

咱们拭目一待.

ps: 原做者的微信公众号: 技术达人李亚飞