web前端框架這麼多,該何去何從?
作為一個軟體開發者,最大的挑戰就是在不斷湧現的新技術中進行取捨,持續學習是從事這一行業的必備技能。在這個領域裡,技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏,呈現出一派欣欣向榮之景。
在項目中必不可少的便是前端,它是系統的門面、是用戶對系統最直接的體驗,顏值高低也是決定系統好壞的關鍵,那麼作為一名軟體開發攻城獅,怎麼能放棄這片藍海呢?沒準了解了解前端的世界,就能多一項技能、升職加薪、贏取白(gao)富(fu)美(shuai)、走向人生巔峰呢?
那麼,在一個項目中,我們要回答的第一個問題就是「這麼多的框架,該使用哪一個?」這篇文章將嘗試從項目實施相關方面入手,對目前大熱框架的特點進行分析,幫助你選擇最合適的一款。
由於篇幅有限、框架眾多,在分析之前,我們從版本更新頻度和社區活躍度來進行初步的篩選。已經出現了比較久的Backbone和Knockout, 目前流行度正在持續衰退,說明市場已經做出了選擇,市面上出現了更有競爭力的替代品; 還有aurelia這類的新湧現者,需要等待時間的檢驗。
但是在一個商業項目中,一個有活躍社區支撐,並能得到長期支持的框架無疑能給我們更大的信心。因此,Angular, Ember,Vue或者React都是理想的選擇。
那麼在項目實施中,我們一般會關注哪些方面呢?
有過前端開發經驗的同僚們可能會想到:要有可復用的組件,要控制質量做測試和靜態檢查,要有組件隔離的樣式方便實現Responsive,要打包部署方便,最好學起來不要太複雜,方便能力建設、節省招聘成本等等。
接下來,我們將從組件復用、測試和學習曲線這三個主要的方面對Angular4,Ember.js,Vue.js和React這四個當前最流行的框架來做更深入的分析,提供更具體的參考。
1. 可復用的組件
組件復用是每個項目都會重點關注的一個維度。合適的、職責單一的組件會大大提升新特性的開發效率和工程的可維護性,也能方便地進行測試。那麼他們的表現都如何呢:
概括起來,就是Vue、Component的組件相對靈活、輕量,添加依賴就可以無縫集成到遺留系統中。對於從0到1的系統,也可以使用新的實踐來構建工程,例如ES6、Webpack等技術。Angular4官方推薦使用TypeScript,這需要單獨構建和打包,不方便與遺留系統集成。Ember.js自定義了一整套生態,基於CoC理念的設計,採用了前端工程中比較前沿的實踐和標準,很難與遺留系統集成,更適合在新項目中使用。至於數據綁定,各有優勢。雙向綁定在表單交互多的場景中更便捷,單向綁定在管理跟蹤記錄組件狀態時更高效。組件狀態更新,各有不同的實現:
Vue2.js通過定義setter來監聽狀態變化,特殊場景需要特殊的API支持, 基於virtual DOM的視圖更新。
React在組件的狀態或屬性的變化後,也是基於virtual DOM的視圖更新。
Angular4在引起狀態變化的時刻,框架自動觸發臟檢查,也可以手動執行臟檢查,直接操作HTML DOM更新視圖。
Ember.js提供數據模型,所有數據的操作通過API執行,使用Glimmer引擎進行HTML渲染和更新。
其中,主要的區別是Angular4是通過事件監聽,對比數據更新,直接操作DOM來更新視圖,而其它都通過Virtual DOM的思路來更新視圖。
2. 組件測試
測試是提高軟體質量的有效手段,易於編寫測試的框架,能降低編寫測試的成本,充足的測試也能提高我們交付軟體的信心。它們在組件測試方面的比較如下:
可見,Vue, React測試靈活,可以根據項目具體情況來定製,但是沒有統一的測試實踐規範,對開發人員的能力有較大依賴。Angular4和Ember概念多,有官方推薦的實踐,要完全掌握難度大,優勢是實現起來更規範。
3. 學習曲線
在技術選型過程中,保證項目按時交付,控制風險,團隊能力建設提升,都是需要考慮的因素。作為一個軟體服務公司,如何快速的提升人員能力,選用學習曲線合適的框架,控制項目成本也是一門技術活。下面,對使用這些框架的難度進行了一些簡要分析:
總結
通過上面三個維度的分析,我們發現Vue.js和React的重點更側重於創建可復用、易於測試、能靈活集成的組件。當然,通過其它擴展組件,以及一些腳手架插件的支持,也可以方便的搭建一個採用最新實踐的前端應用的構建框架。它們最大的優點是按需定製,學習曲線平滑,構建出來的應用小而精。
相對來說,Angular4和Ember是大而全的框架,它們更側重於大型前端工程的構建,為開發人員屏蔽項目構建底層的細節,提出了自己的一套解決方案。使用它們的難點是要度過前期曲線陡峭的學習期,優點是由於使用了標準化的開發方式,後期能極大的提高開發生產力,提升開發效率。
最後,說了這麼多,大家在具體選型時還是要首先分析自己的需求和現狀,然後再做選擇。不求最酷炫,只求最合適!
想要系統學習web前端和免費學習資料的 可以加裙 0 學完有工作推薦
※用Python做了百萬字的分析,告訴你Rapper都在唱些啥
※web前端開發中css水平居中布局解決方案大全!
※高級程序員最愛逛的10大編程網站,你知道幾個?
※谷歌也發布了Web前端機器學習庫,叫deeplearn.js
TAG:IT技術java交流 |
※做web前端,這幾個技能你不get,沒有公司會要你!
※給你一個webAPP,應該如何運行起來?
※web前端小白,感覺很迷茫,應該怎麼做?
※什麼是Web框架、web框架有什麼功能?
※有關webscraper的問題,看這個就夠了
※好的web前端是如何拿到30萬年薪的?
※web前端與後端有什麼區別?
※web前端工程師:那些容易被遺忘的web前端問題
※這些有趣的web和instagram你們看過幾個?
※我是如何從零開始 Web 前端自學之路的?
※大前端技術浪潮來臨,Web開發者何去何從?
※揭秘:如何進入Web前端開發這一高薪行業?
※整容別成癮,看看歌手Kiwebaby,還是要給自己留條後路
※什麼是Web 3.0?你為什麼應該了解它?
※13個Python Web框架比較,你想使用哪個呢?
※Webpack 4正式發布!從0配置到生產模式,你需要知道的都在這裡了
※大神教你:web前端如何學習?
※未來 Web 將會變成什麼樣?Google 已經給出了自己的標準
※WebService就是這麼簡單
※時隔六年 webOS 又被開源了!你還記得它么?