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

標籤：有趣的   pop   不同的   概念   排名   state   java   link   日曆   

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架構們的學習更感興趣。這些架構通常帶有預置的函數和一些構建應用的方法。

雖然有些人可能認為架構有局限性，但是世界上大多數開發人員更喜歡使用架構（不要將它們與庫混淆），因為它們使工作更容易，更快速，在通常情況下更可靠。

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

我們的Team Dev準備了他們每天使用的架構清單。雖然周圍肯定有更多的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的Team Dev也不太喜歡提供文檔，特別是對於JS和Dart。另一方面，他們又喜歡將技術分解成很多模組。

Angular對開發人員的優點：

• 你喜歡TypeScript就開心了

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

• 使用同一個庫開發移動和案頭應用

• 對於具有很多代碼的單頁應用是個不錯的解決方案

Angular對客戶來說的優點：

• 使用該架構構建公司專屬應用程式可能會降低成本

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

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

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

每個架構都在以不同的方式以實現適合用於不同情境的Web應用開發，包括MVP、創業公司和商業情境。

因此你應該考慮找到這樣一個人，他能幫你選擇適用於開發並且能夠跟得上業務發展需要的技術。

而我們恰好具備這樣的能力。

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