前端三大主流框架如何去選擇？

今天咱們聊一聊如今主流的三大前端框架，React、Angular、Vue。em。。。等等，稍微糾正一下，React其實並不能算是真正的前端框架，它其實更相似於像JQuery同樣的前端包庫。這個定義不重要，React這麼流行那咱們就把它和Angular、Vue一塊兒聊一聊。

先說一下爲何想聊一下這個話題，由於在工做中我發現有的人會React，有的人會Angular，還有的人會Vue，甚至有的人並不會這三個主流框架中的任何一個，而僅僅會JavaScript，而這些朋友統稱爲前端工程師。哇哦！前端工程師差異這麼大呢？！我在公司作面試官時就發現不少時候咱們想要一個能夠開發Angular的人員，因此咱們必須在招聘要求上說明要熟悉JavaScript，屬性Angular等等，我會常常以爲優勢廢話呢。可是沒辦法，若是不寫清楚須要熟悉Angular，你會收到一堆不匹配的簡歷。因此今天聊這三個框架我並不想說出相似於「React是最好的前端框架」這種話。由於每一種框架都會有它本身的優勢與缺點，做爲一個前端開發者，咱們應該所有掌握。

熱度大比拼

咱們先看看這三個框架在Google Trends的表現，由於在Google Trends上並無Vue主題，因此爲了公平起見我選擇了計算機類型，並以搜索詞做爲比較對象，雖然這樣比較也並不十分準確，但也足以說明咱們想要的答案。

React和Angular熱度差很少，奇怪的是在2018/12/23~2018/12/29這個時間段React和Angular熱度都有很大的降低，Vue雖然也稍有降低，可是不算不少，這裏我猜想是歪果仁們都去過聖誕節了，誰還有心思寫代碼啊。聖誕節對中國人來講不是主要節日，但程序猿們也可能會追一下潮流，因此也稍有降低。什麼？爲何Vue跟中國有關係？由於Vue是中國人發明的，它的主要市場在中國。在這個熱度比較中對Vue有不少不公平，由於不少國人可能會經過百度等國內搜索引擎，但這裏咱們不深究，由於即時如此React和Angular能夠說是國際流行，Vue與這兩個框架在市場份額上仍是有所差距。

在GitHub上，Vue的關注度很高，其熱度和穩定性一點不輸給Angular和Vue，Angular的Issues很高，這說明Angular的穩定性還不足。經過這個圖表，咱們能夠看出Angular和Vue的熱度在持續增長，React由於發佈較早已區域穩定，但結合Google Trends圖咱們能夠看出，React已經是成熟穩定的JavaScript包庫，它的市場佔有率和使用率仍是很大的。

React

React是由Facebook公司推出的前端包庫。提供了響應式和組件化的視圖組件，而且擁有強大的路由系統，在React中淡化了HTML和CSS的模版應用，它經過JSX語法糖能夠方便快捷的創建網頁節點。React Native讓React具備多平臺的能力。React最大的優勢就是經過虛擬DOM實現高性能，而且具備繁榮的生態社區。

因爲React淡化了HTML模版概念，這使得大多數前端開發者在開始學習React時不習慣，HTML能夠給開發者更爲直觀的開發感覺。React使用CSS-In-JS實現CSS引入，這須要額外的運行時程序開銷。React依賴繁榮的社區來豐富自身的能力，這也使得功能維護更分散。React的類庫雖然儘量的與React共享API和生態，但它們也有本身的小生態。所以不少時候類庫並非全部功能都徹底兼容React。

React的主要用戶有Facebook、Uber、Netflix、Twitter、Udemy、Paypal、Reddit、Tumblr、Walmart。

Angular

Angular如今由Google團隊維護的一個JS框架，它是在AngularJS 1.X以後從新開發的全新框架，所以Angular不具備兼容AngularJS的能力。Angular是基於TypeScript開發的JavaScript MVVM框架，這裏我也見到有網友認爲它是MVC框架，我我的更偏向於MVVM。它具備很強的HTML和CSS親和性，這讓不少傳統開發者能夠更快上手。它具備本身的DSL語言，可方便的在HTML中實現邏輯判斷、for循環等功能。Angular以模型、組件、模版、服務等等相似於Java和C++面向對象的概念，這也讓後端開發者能夠更容易的學習。

Angular因爲其設計引入不少架構概念，致使其複雜度很高，提高了學習曲線的陡峭程度。Angular具備很強的規則性，也就是說不管開發者開發大項目仍是小項目都必須按照其規則進行開發，這致使其向下擴展性不足。Angular的項目體積相對於React和Vue都會比較大，雖然並不必定對性能產生很大的影響，可是下降了它與React和Vue的競爭力。

Angular的主要用戶有Google、Forbes、WhatsApp、Instagram、healthcare.gov。

Vue

Vue的創始人是中國人尤雨溪，做爲中國人感受驕傲一下。因爲尤雨溪參與過Angular的開發，所以Vue的設計參考了React、Angular和Polymer，我我的以爲Vue更像是React和Angular的結合，捨去了兩者的一些缺點，整合了兩者的主要優勢。Vue也使用了虛擬DOM，並提供了響應式和組件化的視圖組件，官方提供了基於核心包以外強大的路由系統和狀態管理庫。Vue主要支持HTML和CSS模版，但同時也支持JSX和CSS-In-JS，也可方便的繼承Redux，它須要結合Weex實現多平臺的能力。Vue更像是更簡單的React+Mobx。它兼具React的高性能和Angular的框架組織性，並具備很好的向下向上擴展性。

Vue是基於Flow團隊設計的，而因爲Flow團隊的GG，因此其在類型推導上相比Angular要略遜一籌，但據創始人尤雨溪透露，在Vue的下一個版本中將會基於TS實現更好的類型推導能力。（可參考InfoQ文章：尤雨溪迴應：Vue 與 TypeScript 爲何相性特別差？）

Vue的主要用戶有Alibaba、Gitlab、Baidu、京東等公司。

我的建議

其實對於開發而言React、Angular和Vue都是很好的前端框架，三者在性能上都表現的不錯（參考：benchmark）。咱們都應該熟練掌握，React做爲發佈較早較穩定的JavaScript包庫，其市場份額仍是至關大的，是通過了市場檢驗的。Angular和Vue做爲親和HTML和CSS模版的框架，可讓開發者更容易學習。Vue更是兼備React和Angular的優勢，解決了兩者的一些缺點，這使得其具備更好的開發體驗。因此我的以爲Vue較React和Angular略勝一籌。但這三個框架都由大的技術公司維護，因此並不能說那個框架就必定更優。

總結

本文主要比較瞭如今市場上比較火熱的三大前端框架，先根據Google Trends和Github數據進行了簡要分析，而後分別對這三個框架進行了簡要介紹，最後給出了我的建議。

本文目標並非告訴你們那個框架好那個框架很差，這三個框架如今都由大公司維護，所以其技術發展潛力仍是很好的，並且三個框架都有世界知名技術公司在使用，所以其社區繁榮度較其餘一些小型框架會更好。因此建議你們仍是本着我的技術能力出發，儘可能都能熟練掌握，這樣才能更爲遊刃有餘。