2014年WEB高手都在做什么

0. 寫在前面的話

今年, 對于我, 從技術上說, 還是有不少的進步的. 進步的主要是在于前端開發, 所以, 想從后端工程師的身份對前端的發展做一些總結.

在我前幾年的印象中, 前端工程師一直是一個很不獨立, 也不高端的職位. 因為他們就是來寫 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 就是一個鋒利的匕首, 你可以同時攜帶一個主武器和一個匕首, 是吧?

這個 "匕首", 是由 非死book 發起的開源項目, 它利用虛擬 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: 歡迎關注我的微信公眾號: 技術達人李亞飛. 講述我們技術界的技術, 生活, 創業.

來自：http://yafeilee.me/blogs/54995f3a6c69342f6d100000