如何在主流JavaScript框架中做選擇？

該如何為你的產(chǎn)品選擇一個(gè)合適的前端框架，這篇文章也許可以給你一些啟發(fā)

一個(gè)有趣的事實(shí)是：IBM發(fā)表的2017年最值得學(xué)習(xí)編程語言名單中，JavaScript榜上有名。正是這位IT巨頭指出，JS在網(wǎng)站中驚人地達(dá)到94.4％的使用率，而且“不太可能降低”。JavaScript能確保“對(duì)用戶非常友好的網(wǎng)頁，因?yàn)樗?fù)責(zé)整個(gè)web界面，包括動(dòng)畫和交互”。不管你怎么看，JavaScript很重要。

這也指明了潛在Web開發(fā)人員的方向：如果你深入前端，你不得不在某些時(shí)刻面對(duì)JavaScript。并且正確的開發(fā)指南可能有助于此。

讓我們假設(shè)你知道JavaScript基礎(chǔ)知識(shí)。純JS（不是一無所知）的那種。如果假設(shè)是正確的（意思是你了解基礎(chǔ)），你可能對(duì)現(xiàn)代JavaScript框架們的學(xué)習(xí)更感興趣。這些框架通常帶有預(yù)置的函數(shù)和一些構(gòu)建應(yīng)用的方法。

JavaScript Frameworks

有些人可能會(huì)有局限性的思考，認(rèn)為世界上大多數(shù)開發(fā)者更喜歡使用框架（不要將它們與庫(kù)混淆），因?yàn)樗鼈兪构ぷ鞲菀祝焖伲谕ǔＧ闆r下更可靠。

好吧！說完這些，是時(shí)候該深挖一點(diǎn)兒了。

我們的開發(fā)團(tuán)隊(duì)準(zhǔn)備了他們每天使用的框架清單。雖然周圍肯定有更多的JavaScript框架，這些是我們最關(guān)注的。

接下來，你會(huì)看到我們所愛的技術(shù)及其各自特點(diǎn)的簡(jiǎn)單概述。

大街上的酷小孩－VUE.JS

Vue.js JavaScript framework

這個(gè)就像一個(gè)還在讀高中的超級(jí)巨星。它不是一個(gè)成熟的技術(shù)，所以我們真的無法說，五年后，Vue會(huì)發(fā)生什么。然而目前，它可能是每個(gè)會(huì)議議程中最引人注目的話題。

如果你決定和JS極客喝兩杯，他會(huì)談?wù)揤ue。如果Vue是個(gè)流行歌星，那么現(xiàn)在它就是最紅的。如果...嗯，你明白我的意思。

它由尤雨溪在2014年2月建立。在2016年，Vue.js擁有驚人的89％的開發(fā)人員滿意度評(píng)估，目前是GitHub中star最多的項(xiàng)目之一。

虛的說差不多了，來點(diǎn)實(shí)際的。什么是Vue.js？首先，它是本文中討論的所有JavaScript框架中最快最小的。它的語法和原理所需要的學(xué)習(xí)成本不是很高。此外，它還具有高覆蓋率的文檔。你想要執(zhí)行的操作絕大部分情況已被記錄在案。此外，如果一個(gè)操作沒有文檔記錄，你能在線上找到解決方案的幾率很小，因?yàn)閂ue不如Angular或React更流行。

注意：Vue的發(fā)音和“view”一樣。

隨便挑5個(gè)Vue.js的特性說一下：

• 便于擴(kuò)展的插件系統(tǒng)。
• 擁有在使用服務(wù)端渲染時(shí)的庫(kù)(Nuxt.js)。
• 支持范圍樣式。
• 有一個(gè)CLI工具，允許你通過先進(jìn)的前端工作流設(shè)置，快速構(gòu)建單頁應(yīng)用。
• 被加入Laravel5.4的新特性中，用來處理前端模板

就像React一樣，Vue.js僅處理視圖層。也就是，它讓開發(fā)人員自己實(shí)現(xiàn)他們的業(yè)務(wù)邏輯。它也有被稱為Flux架構(gòu)實(shí)現(xiàn)的Vuex。作為我們的隊(duì)友，36Kr某員工說：

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

此外，Vue.js在Chrome中擁有最好的開發(fā)者工具，并且Weex也使用Vue的語法，它是一個(gè)通過JavaScript構(gòu)建原生應(yīng)用的框架，也是React Native的競(jìng)爭(zhēng)對(duì)手。值得注意的是，Weex并不太完善，特別是對(duì)于商業(yè)項(xiàng)目。目前，它更多的是一個(gè)方案而不是一個(gè)真正的技術(shù)。

對(duì)開發(fā)者來說，Vue.js的優(yōu)勢(shì)在于：

• 易于學(xué)習(xí)和理解，能快速開發(fā)應(yīng)用
• 與Laravel集成，所以具有Vue知識(shí)的開發(fā)人員對(duì)使用Laravel開發(fā)應(yīng)用的后端團(tuán)隊(duì)有所補(bǔ)充
• 擁有非常方便的CLI工具，可以快速啟動(dòng)
• 有很多額外的模塊，如路由器和狀態(tài)管理工具；雖然不如其他框架那么多

對(duì)客戶來說，Vue.js的優(yōu)勢(shì)在于：

• 降低前端應(yīng)用成本，乃至全功能web應(yīng)用的成本（在使用Laravel和Vue.js的組合時(shí)）
• 在保證穩(wěn)定性的同時(shí)，是一個(gè)快速可靠的解決方案
• 較小的模塊很適用，如日歷，聯(lián)系人表單或小部件

開發(fā)者滿意度最高－REACT.JS

React.js JavaScript framework

React是由Facebook的Jordan Walke創(chuàng)建的，GitHub的最流行框架中排名第5。然而，React.js（以及React Native）最火爆的時(shí)間點(diǎn)是在2015年。

據(jù)State of JS調(diào)查顯示React的開發(fā)者滿意度最高，達(dá)到92％。Vue跟它在同一個(gè)級(jí)別。根據(jù)調(diào)查，React的開發(fā)者較平均水平來說，在決定哪個(gè)技術(shù)配套使用前，會(huì)嘗試多種其他技術(shù)組合。

隨便挑5個(gè)React.js的特性說一下：

• 框架只負(fù)責(zé)"View"層，這意味著其它業(yè)務(wù)邏輯是完全解耦的，并且能以任何方式來實(shí)現(xiàn)。
• 與框架相關(guān)的Redux是一個(gè)非常棒的類Flux架構(gòu)的實(shí)現(xiàn)。
• 模板方面，框架可以使用JSX語法，這個(gè)語法在剛上手時(shí)可能會(huì)有一點(diǎn)點(diǎn)難度。

開發(fā)者掌握React.js的知識(shí)后，可以直接用于基于React Native的移動(dòng)客戶端開發(fā)。

React對(duì)VirtualDOM的使用，以及由此獲得的高性能廣受開發(fā)者好評(píng)。經(jīng)常使用框架的開發(fā)者也是這與這項(xiàng)技術(shù)相關(guān)的龐大社群的重要組成部分。React的快速發(fā)展，除了 Facebook的維護(hù)外，也要感謝開源項(xiàng)目以及第三方的模塊。

此外，隨著React將會(huì)有一個(gè)能夠向后兼容的重寫版React Fiber的消息放出，React的"第二春"很快就會(huì)到來。

對(duì)開發(fā)者來說，React的優(yōu)勢(shì)在于：

• 龐大且活躍的社區(qū)
• 并非一個(gè)大而全的框架
• JSX這種新的JavaScript語法，也是一個(gè)不錯(cuò)的優(yōu)點(diǎn)
• 相關(guān)的開發(fā)工具也很不錯(cuò)
• 強(qiáng)制使用最新的最佳實(shí)踐

對(duì)客戶來說，React的優(yōu)勢(shì)在于：

• 大量的開發(fā)者熟悉這個(gè)框架
• React Native使得Web應(yīng)用的邏輯可以復(fù)用于移動(dòng)客戶端
• 有足夠多的使用和測(cè)試場(chǎng)景來保證框架本身幾乎沒有bug和錯(cuò)誤

開發(fā)者滿意度最高－REACT.JS

AngularJS JavaScript framework

Google在2009年第一次發(fā)布了AngularJs框架，鼓勵(lì)使用聲明式編程方法去創(chuàng)建用戶界面和連接各種組件，另一方面，指令式的編程用于實(shí)現(xiàn)程序的邏輯。

Brat Tech公司的Mi?ko Hevery是這個(gè)技術(shù)的真正作者，當(dāng)時(shí)，它被創(chuàng)建為在線JSON存儲(chǔ)服務(wù)背后的軟件。但是業(yè)務(wù)沒有搞起來，所以公司放棄了這個(gè)想法，并將AngularJs作為一個(gè)開源庫(kù)發(fā)布。

AngularJS使用雙向數(shù)據(jù)綁定的方式，適配和擴(kuò)展了傳統(tǒng)的HTML來呈現(xiàn)動(dòng)態(tài)內(nèi)容。

所有這些可能聽起來很有意思，事實(shí)是AngularJs已經(jīng)有點(diǎn)老了
實(shí)際上。它是我們描述的框架里最老的了，大ReactJS4歲，Vue.js5歲，比Angular2年長(zhǎng)了7歲之多。

盡管如此，他擁有Github上最多的貢獻(xiàn)者(1,562個(gè))，隨后是ReactJS，Angular2，Vue.js。

不可否認(rèn)，AngularJS有一個(gè)陡峭的學(xué)習(xí)曲線，這個(gè)缺點(diǎn)在某種程度上被一個(gè)大型社區(qū)抵消，保證開發(fā)人員可能遇到的大多數(shù)問題存在解決方案。

隨便說AngularJS的5個(gè)特性

• 仍然有許多項(xiàng)目使用AngularJS，所以了解AngularJS方便你維護(hù)這些項(xiàng)目。
• 為不想使用新的Angular或Ember.js的團(tuán)隊(duì)提供可行且穩(wěn)定的解決方案。
• 使用臟值檢查（digest cycle）；與觀察者模式相比孰優(yōu)孰劣取決于你的需求。
• PlayStation 3上的YouTube應(yīng)用是用AngularJS開發(fā)的。
• 以HTML為中心。

AngularJS是SPA中最常用的JavaScript框架之一，也是企業(yè)級(jí)應(yīng)用的一個(gè)很好的選擇。但是它確實(shí)很老了，大多時(shí)候是被老舊的應(yīng)用采用。

AngularJs對(duì)開發(fā)者來說的"優(yōu)"點(diǎn)：

• 2017年，如果你還沒有使用它，你完全可以忽略他了。
• 如果您需要更多功能的話，請(qǐng)使用新的Angular或Ember。

AngularJS對(duì)用戶來說的"優(yōu)"點(diǎn)：

• 主要維護(hù)尚未準(zhǔn)備好或無法獲得足夠重寫的舊應(yīng)用。
• 由于框架復(fù)雜性，創(chuàng)建更復(fù)雜應(yīng)用的成本很高。

譯者注：各種黑，我X

ANGULAR2（或簡(jiǎn)稱ANGULAR）

盡管在不挖掘源代碼的前提下，很難完全了解Angular2的概念，它是一個(gè)非常強(qiáng)大的框架 內(nèi)置了相當(dāng)多的功能。

以AngularJS為基礎(chǔ)，使用Typescript重寫。與以前的版本相比，它沒有scope或controllers的概念。相反，它使用組件層次結(jié)構(gòu)化作為其主要架構(gòu)概念。支持動(dòng)態(tài)加載，改進(jìn)了依賴注入，并提供更為簡(jiǎn)單的路由和異步模板編譯機(jī)制。

隨便說Angular2的5個(gè)特性

• 由TypeScript編寫，允許開發(fā)人員使用TypeScript，Dart或純粹的ECMAScript。
• 組件的模式利用了TS類和裝飾器。
• 陡峭的學(xué)習(xí)曲線
• 開發(fā)過程很快。
• 高級(jí)的的測(cè)試特性。

基本上，Angular可以擺脫AngularJS中存在的不必要的復(fù)雜性。然而，許多人認(rèn)為，即使用CLI，單個(gè)開發(fā)人員的配置和啟動(dòng)過程仍然可能太長(zhǎng)。

我們的開發(fā)團(tuán)隊(duì)也不太喜歡提供文檔，特別是對(duì)于JS和Dart。另一方面，他們又喜歡將技術(shù)分解成很多模塊。

Angular對(duì)開發(fā)者的優(yōu)點(diǎn)：

• 你喜歡TypeScript就開心了
• 強(qiáng)制規(guī)定編寫代碼的方式，使得它成為與多個(gè)開發(fā)人員合作的好選擇
• 使用同一個(gè)庫(kù)開發(fā)移動(dòng)和桌面應(yīng)用
• 對(duì)于具有很多代碼的單頁應(yīng)用是個(gè)不錯(cuò)的解決方案

Angular對(duì)客戶來說的優(yōu)點(diǎn)：

• 使用該框架構(gòu)建企業(yè)應(yīng)用可能會(huì)降低成本
• 大量開發(fā)人員已經(jīng)知道如何使用框架

有最好的 JAVASCRIPT 框架這一說么?

想要一個(gè)簡(jiǎn)單的答案? 沒有。這跟公司目標(biāo)、需求、以及最終的功能都有關(guān)系。舉例來說，Angular2更像是一個(gè)百寶箱，特別適合大型項(xiàng)目。它非常復(fù)雜，并且需要花很多時(shí)間來全面的學(xué)習(xí)和掌握（但比AngularJS要簡(jiǎn)單一些）。但使用以JavaScript為核心的React，開發(fā)者就能快速高效得拼湊出一些有用的東西。

每個(gè)框架都在以不同的方式嘗試適合用于不同場(chǎng)景的Web應(yīng)用開發(fā)，包括MVP、創(chuàng)業(yè)公司和商業(yè)場(chǎng)景。

本文來自翻譯：insanelab.com，如若轉(zhuǎn)載，請(qǐng)注明出處：http://36kr.com/p/5085661.html