Vue, React, AngularJS, and Angular2. 咱們對流行JavaScript框架們的選擇

2017-08-04 前端大全

（點擊上方公衆號，可快速關注）

 

英文：ANTONI ZOLCIAK  譯文：衆成翻譯

www.zcfy.cc/article/vue-react-angularjs-and-angular2-our-take-on-popular-javascript-frameworks-3668.html

若有好文章投稿，請點擊 → 這裏瞭解詳情

 

一個有趣的事實是：IBM發表的2017年最值得學習的編程語言名單中，JavaScript榜上有名。這位IT巨頭指出，JS在網站中驚人地達到94.4％的使用率，並且「不太可能下降」。JavaScript能確保「對用戶很是友好的網頁，由於它負責整個web界面，包括動畫和交互」。無論你怎麼看，JavaScript很重要。

這也爲潛在的Web開發人員指明瞭方向：若是你深刻前端，你不得不在某些時刻面對JavaScript。而且正確的開發指南可能有助於此。

讓咱們假設你知道JavaScript基礎知識。純JS（不是一無所知）的那種。若是假設是正確的（意思是你瞭解基礎），你可能對現代JavaScript框架們的學習更感興趣。這些框架一般帶有預置的函數和一些構建應用的方法。

雖然有些人可能認爲框架有侷限性，可是世界上大多數開發者更喜歡使用框架（不要將它們與庫混淆），由於它們使工做更容易，更快速，在一般狀況下更可靠。

好吧！說完這些，是時候該深挖一點兒了。

咱們的開發團隊準備了他們天天使用的框架清單。雖然周圍確定有更多的JavaScript框架，這些是咱們最關注的。

接下來，你會看到咱們所愛的技術及其各自特色的簡單概述。

大街上的酷小孩－Vue.js

它就像一個還在讀高中的超級巨星。這不是一個成熟的技術，因此咱們真的沒法預言五年後，Vue會發生什麼。然而目前，它多是每一個會議議程中最引人注目的話題。

若是你決定和JS極客喝兩杯，他確定會談論Vue。若是Vue是個流行歌星，那麼如今它就是最紅的。若是…嗯，你明白個人意思。

它由尤雨溪在2014年2月創建。在2016年，Vue.js擁有驚人的89％的開發人員滿意度評估，目前是GitHub中star最多的項目之一。

虛的說差很少了，來點實際的。什麼是Vue.js？首先，它是本文中討論的全部JavaScript框架中最快最小的。它的語法和原理所須要的學習成本不是很高。此外，它還具備高覆蓋率的文檔。你想要執行的操做絕大部分狀況都已有文檔說明。反之，若是一個操做沒有文檔記錄，你能在線上找到解決方案的概率很小，由於Vue不如Angular或React更流行。

注意：Vue的發音和「view」同樣。

隨便挑5個Vue.js的特性說一下：

• 便於擴展的插件系統。

• 擁有在使用服務端渲染時的庫(Nuxt.js)。

• 支持範圍樣式。

• 有一個CLI工具，容許你經過先進的前端工做流設置，快速構建單頁應用。

• 被加入Laravel5.4的新特性中，用來處理前端模板

 

就像React同樣，Vue.js僅處理視圖層。也就是，它讓開發人員本身實現他們的業務邏輯。它還實現了Flux架構：Vuex。做爲咱們的隊友， Maciej Kolodziejczak說：

在我看來，Vuex比React的Redux使用起來更好，更容易。

此外，Vue.js在Chrome中擁有最好的開發者工具，而且Weex也使用Vue的語法，它是一個經過JavaScript構建原生應用的框架，也是React Native的競爭對手。值得注意的是，Weex並不太完善，特別是對於商業項目。目前，它更多的是一個方案而不是一個真正的技術。

對開發者來講，Vue.js的優點在於：

• 易於學習和理解，能快速開發應用

• 與Laravel集成，因此具備Vue知識的開發人員對使用Laravel開發應用的後端團隊有所補充

• 擁有很是方便的CLI工具，能夠快速啓動

• 有不少額外的模塊，如路由器和狀態管理工具；雖然不如其餘框架那麼多

對客戶來講，Vue.js的優點在於：

• 下降前端應用成本，乃至全功能web應用的成本（在使用Laravel和Vue.js的組合時）

• 在保證穩定性的同時，是一個快速可靠的解決方案

• 較小的模塊很適用，如日曆，聯繫人表單或小部件

 

開發者滿意度最高－React.js

React是由Facebook的Jordan Walke建立的，GitHub的最流行框架中排名第5。然而，React.js（以及React Native）最火爆的時間點是在2015年。

據State of JS調查顯示React的開發者滿意度最高，達到92％。Vue跟它在同一個級別。根據調查，React的開發者較平均水平來講，在決定哪一個技術配套使用前，會嘗試多種其餘技術組合。

隨便挑5個React.js的特性說一下：

• 框架只負責」View」層，這意味着其它業務邏輯是徹底解耦的，而且能以任何方式來實現。

• 與框架相關的Redux是一個很是棒的類Flux架構的實現。

• 模板方面，框架可使用JSX語法，這個語法在剛上手時可能會有一點點難度。

• 開發者掌握React.js的知識後，能夠直接用於基於React Native的移動客戶端開發。

 

React對VirtualDOM的使用，以及由此得到的高性能廣受開發者好評。常用框架的開發者也是這與這項技術相關的龐大社羣的重要組成部分。React的快速發展，除了 Facebook的維護外，也要感謝開源項目以及第三方的模塊。

此外，隨着React將會有一個可以向後兼容的重寫版React Fiber的消息放出，React的」第二春」很快就會到來。

對開發者來講，React的優點在於：

• 龐大且活躍的社區

• 並不是一個大而全的框架

• JSX這種新的JavaScript語法，也是一個不錯的優勢

• 相關的開發工具也很不錯

• 強制使用最新的最佳實踐

 

對客戶來講，React的優點在於：

• 大量的開發者熟悉這個框架

• React Native使得Web應用的邏輯能夠複用於移動客戶端

• 有足夠多的使用和測試場景來保證框架自己幾乎沒有bug和錯誤

 

智慧長老－AngularJS

Google在2009年第一次發佈了AngularJs框架，鼓勵使用聲明式編程方法去建立用戶界面和鏈接各類組件，另外一方面，指令式的編程用於實現程序的邏輯。

Brat Tech公司的Miško Hevery是這個技術的真正做者，當時，它被建立爲在線JSON存儲服務背後的軟件。可是業務沒有搞起來，因此公司放棄了這個想法，並將AngularJs做爲一個開源庫發佈。

AngularJS使用雙向數據綁定的方式，適配和擴展了傳統的HTML來呈現動態內容。

全部這些可能聽起來頗有意思，事實是AngularJs已經有點老了 實際上。它是咱們描述的框架裏最老的了，大ReactJS4歲，Vue.js5歲，比Angular2年長了7歲之多。

儘管如此，他擁有Github上最多的貢獻者(1,562個)，隨後是ReactJS，Angular2，Vue.js。

不能否認，AngularJS有一個陡峭的學習曲線，這個缺點在某種程度上被一個大型社區抵消，保證開發人員可能遇到的大多數問題存在解決方案。

隨便說AngularJS的5個特性

• 仍然有許多項目使用AngularJS，因此瞭解AngularJS方便你維護這些項目。

• 爲不想使用新的Angular或Ember.js的團隊提供可行且穩定的解決方案。

• 使用髒值檢查（digest cycle）；與觀察者模式相比孰優孰劣取決於你的需求。

• PlayStation 3上的YouTube應用是用AngularJS開發的。

• 以HTML爲中心。

 

AngularJS是SPA中最經常使用的JavaScript框架之一，也是企業級應用的一個很好的選擇。可是它確實很老了，大多時候是被老舊的應用採用。

AngularJs對開發者來講的」優」點：

• 在2017年，若是你尚未使用它，你徹底能夠忽略他了。

• 若是您須要更多功能的話，請使用新的Angular或Ember。

AngularJS對用戶來講的」優」點：

• 主要維護還沒有準備好或沒法得到足夠重寫的舊應用。

• 因爲框架複雜性，建立更復雜應用的成本很高。

（譯者注：各類黑）

Angular2（或簡稱Angular）

儘管在不挖掘源代碼的前提下，很難徹底瞭解Angular2的概念，它是一個很是強大的框架 內置了至關多的功能。

以AngularJS爲基礎，使用Typescript重寫。與之前的版本相比，它沒有scope或controllers的概念。相反，它使用組件層次結構化做爲其主要架構概念。支持動態加載，改進了依賴注入，並提供更爲簡單的路由和異步模板編譯機制。

隨便說Angular2的5個特性

• 由TypeScript編寫，容許開發人員使用TypeScript，Dart或純粹的ECMAScript。

• 組件的模式利用了TS類和裝飾器。

• 陡峭的學習曲線

• 開發過程很快。

• 高級的的測試特性。

 

基本上，Angular能夠擺脫AngularJS中存在的沒必要要的複雜性。然而，許多人認爲，即便用CLI，單個開發人員的配置和啓動過程仍然可能太長。

In’saneLab的開發團隊也不太喜歡提供文檔，特別是對於JS和Dart。另外一方面，他們又喜歡將技術分解成不少模塊。

Angular對開發者的優勢：

• 你喜歡TypeScript就開心了

• 強制規定編寫代碼的方式，使得它成爲與多個開發人員合做的好選擇

• 使用同一個庫開發移動和桌面應用

• 對於具備不少代碼的單頁應用是個不錯的解決方案

Angular對客戶來講的優勢：

• 使用該框架構建企業應用可能會下降成本

• 大量開發人員已經知道如何使用框架

 

有最好的 Javascript 框架這一說麼?

想要一個簡單的答案? 沒有。這跟公司目標、需求、以及最終的功能都有關係。舉例來講，Angular2更像是一個百寶箱，特別適合大型項目。它很是複雜，而且須要花不少時間來全面的學習和掌握（但比AngularJS要簡單一些）。但使用以JavaScript爲核心的React，開發者就能快速高效得拼湊出一些有用的東西。

每一個框架都在以不一樣的方式以實現適合用於不一樣場景的Web應用開發，包括MVP、創業公司和商業場景。

所以你應該考慮找到這樣一我的，他能幫你選擇適用於開發而且可以跟得上業務發展須要的技術。

而咱們剛好具有這樣的能力。