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: 原做者的微信公衆號: 技術達人李亞飛