【譯】前端框架技術選型 React vs. Vue (vs. Angular)

時間 2019-11-07

標籤前端框架技術選型 react vue angular 欄目 React 简体版

原文原文鏈接

這是該系列文章的第2部分：「Fundbox的前端技術選型」。第1部分介紹了Fundbox的技術現狀以及咱們從新設計它的動機。第2部分介紹了選擇新框架背後的考慮：是遷移到React，Vue仍是Angular。第3部分描述了咱們如何從Angular遷移到Vue，同時保證咱們產品發展路線不受影響。javascript

Overview

從新考慮前端技術選型須要大量思考，討論，決策，規劃，管理和實施。咱們首先須要作出的決定之一是選擇一個前端框架來從新設計咱們的產品。css

咱們研究了幾個月來保證咱們得出一個的更好決策。進行討論，創建概念證實，與其餘公司相關經驗的同事進行面談，並閱讀大量在線材料。html

在本文中，我將比較選型過程當中的入圍者。咱們決定從如下幾個框架中選出咱們的下一個基礎框架：Angular，React和Vue。前端

目標

咱們的目標是構建一個全新的，現代化的，快速可靠的平臺，爲咱們當前和將來的全部前端應用程序提供服務。vue

候選框架

React
Vue
Angular

Angular

Angular在咱們的選型過程當中被提早放棄了,主要因爲如下兩個主要緣由（更詳細的推理能夠在「Why move then?」這裏閱讀）：java

Angular是咱們目前採用的框架，使用v1版本。Angular v2引入了許多改進，但它不向後兼容。這意味着升級到最新的Angular不亞於換到其餘框架。這也致使了開發人員對這個框架失去了信心，使用Angular的想法在Fundbox乃至整個行業中大幅降低。react
Angular逐漸發展成爲一個能夠幫助構建複雜系統的大框架，但對於構建啓動快速變化的UI卻沒那麼有用。React和Vue更加輕量，組件化意味着小巧，自主，封裝，所以易於重複使用。若是咱們從頭開始開發新的基礎架構（而不須要從現有基礎架構遷移），咱們也能夠考慮使用Angular。但在咱們的例子中，它不合適。jquery

不管如何，咱們正在重寫咱們應用程序的重要部分，這是咱們學習新技術的絕佳機會。經過這種方式，咱們能夠拓寬知識面，豐富開發人員的經驗。git

React VS Vue

接下來留給咱們選擇的就只有React和Vue了，咱們主要從如下幾個方面對這兩個框架進行對比：github

學習曲線
擁有豐富開發經驗人員學習框架是否足夠簡單？
代碼風格
框架的代碼和約定的可讀性和直觀性如何？
單個文件組件
在框架中瀏覽和維護組件有多直觀？
性能
使用框架構建的應用程序的性能如何？
框架的大小和運行內存佔用有多大？
靈活性
框架提供了多少功能？
有多少功能是強制性的？
定製框架有多容易？
工具
框架可用的工具備哪些？
框架有多少穩定的插件？
移動端支持
框架是否支持除Web之外的更多應用程序？
它是否提供了構建Native應用程序的方法？
社區
框架的社區有多大？
社區是團結仍是支離破碎的？
成熟度
框架有多成熟？
它通過了多長時間的生產驗證？
它的將來發展路線是否清晰？
支持
框架背後的團隊有多大？
是否有公司或組織負責該框架？
招聘人才
聘請具備該框架使用經驗的開發人員有多容易？

學習曲線

React

React官方文檔提供了一些編寫得很好的入門指南，併爲新手提供了一個入門演練教程。具備一些前端框架經驗的開發人員能夠在幾個小時內理解框架的核心原則。

官方的React文檔很詳細，但不像Vue的官方文檔那樣清晰有序。文檔涵蓋了必要的入門教程和核心概念等，但文檔中缺乏介紹框架的邊界。隨着項目變得更大，這些邊界可能轉換爲痛點。

React不是一個包含全部功能的框架。它的核心理念是精益，只關注於核心部分，其餘功能經過引用第三方解決方案解決。這增長了學習曲線的一些複雜性，由於它根據您在整個過程當中對框架所作的選擇而有所不一樣。

Vue

Vue能夠直接在HTML頁面中經過資源的方式加載，只需幾分鐘，整個庫無需構建即可以使用了。這讓咱們能夠在任什麼時候候編寫Vue應用程序。

編輯：感謝David Bismut指出React也有辦法將其做爲獨立的JS文件添加到頁面中，無需構建步驟：https//reactjs.org/docs/add-react-to-a-website.html

由於Vue借鑑了React和Angular的一些概念，開發人員更容易學習Vue。Vue的官方文檔編寫得很是好，甚至涵蓋了開發Vue應用程序過程當中偶然發現的問題。

Vue的定義比React更嚴格; 這也意味着它更具穩定性。值得注意的是，在Vue中，許多問題直接在其文檔中獲得解答，而不須要在其餘地方搜索。

代碼風格

React

React引入了一系列基於函數式編程的概念，簡化了開發UI優先應用程序的過程。最值得注意的是：

JSX，這是一種用JavaScript編寫HTML的方法。JSX是React做爲函數式編程的強大推進者的補充，具備重大意義。
它的組件生命週期提供了一種直觀的方式來鏈接組件「生命」中的特定事件（建立，更新等）

Vue

做爲一個比React和Angular更年輕的框架，Vue從各個方面吸取了不少好的理念，混合了函數式和麪向對象編程(OOP)。

默認狀況下，Vue的編碼風格在某些方面與Angular有點類似，但也消除了Angular的大部分痛點。Vue將HTML，JS和CSS分開，就像Web開發人員已經習慣了多年的編碼風格。但假如你喜歡JSX這種風格，它也能夠替換使用。因此它不會強制改變你的代碼風格。

Vue對組件生命週期的考慮比React更直觀。通常來講，Vue的API比React更寬泛但更簡單。

單個文件組件

React

使用JSX，React中的單個文件組件徹底是做爲JavaScript模塊編寫的，意味着React具備編寫HTML，CSS和JavaScript的特定方式。

全部功能採用JavaScript編寫，意味着更少的bug，由於它減輕了在組件內部建立動態HTML的負擔。做爲替代，使用JSX時咱們可使用原生JavaScript生成模板。

也就是說，React的特殊語法須要更多的學習和練習才能在React中編寫組件。

Vue

Vue中的單個文件組件分爲三個獨立的部分：<template>，<script>和<style>，每一個都包含相應類型的代碼，所以Web開發人員感受更天然。

做爲一個漸進式框架，Vue能夠輕鬆定製。例如，做爲可配置項，可使用JSX而不是<template>模板。另外，另外一個例子，只需在<style>標記中添加lang =「scss」屬性，就能夠編寫SCSS而不是純CSS。相似地，經過將scoped屬性添加到<style>標記，Vue組件將實現開箱即用的CSS（也稱爲CSS模塊）。

性能

編輯：值得一提的是，性能有點難以衡量，由於它在很大程度上取決於您正在構建的特定應用程序，甚至更多取決於您如何構建它。

React

庫大小（經過網絡/未壓縮）：32.5KB / 101.2KB

比較DOM操做，React的總體性能很是好。它比Angular快得多，但比Vue慢一點。

React提供了對開箱即用的服務器端渲染（SSR）的支持，而且可能對某些類型的實現頗有用。

內置支持bundling和tree-shaking，最大限度地減小最終用戶的資源負擔。

Vue

庫大小（經過網絡/未壓縮）：31KB / 84.4KB

除了成爲最快的Vue以外，Vue仍是一個漸進式框架，從頭開始構建以逐步採用。核心庫僅專一於視圖層，易於獲取並與其餘庫或現有項目集成。

與React相似，Vue內置了對bundling和tree-shaking的支持，可最大限度地減小最終用戶的資源負擔。

www.stefankrause.net/js-framewor…

靈活性

React

React專一於UI，所以咱們能從它上面獲取的最根本功能是構建用戶界面。

更高級的功能不在React官方庫的提供的功能範圍以內，如狀態管理。大多數React應用程序都使用Redux進行狀態管理，MobX做爲React伴侶也倍受關注。

甚至React路由器也不是官方軟件包，而是由React團隊支持的第三方軟件包。

Vue

做爲一個漸進式框架，Vue只容許使用其最基本的功能來構建應用程序，但若是須要，它還提供您開箱即用的大部份內容：用於狀態管理的Vuex，用於應用程序URL管理的Vue路由器，Vue-SSR 用於服務器端渲染。

不管好壞，Vue比React更穩固。

工具

React

React有一個名爲create-react-app的第三方CLI工具，可幫助在React項目中構建新的應用程序和組件。

CLI工具還支持運行端到端和單元測試，代碼檢查和本地開發服務器功能。

React爲主要IDE提供了很好的官方和社區支持。

Vue

Vue有一個名爲Vue CLI的官方CLI工具。與React的create-react-app很是類似，Vue CLI工具提供了新應用程序的支架。

此外，Vue對全部重要的IDE都有很好的支持（不如React，但支持WebStorm和VSCode）。

移動端支持

React

React有一個用於構建本機移動應用程序的端口，它被稱爲React Native，它是當前的「write once (in JavaScript), use many (in native iOS and Android)」的解決方案。

有大量的線上應用是使用React Native構建的。

Vue

對於Vue，構建Mobile Native應用程序的方式有不少種。不像React Native，使用Vue構建Native應用並無明確的引領者。

NativeScript是這些選項的領先者（它也是Angular的優先解決方案），除此以外還有Weex和Quasar。

社區

React

在StackOverflow中，有大約88,000個問題用#reactjs標記。有超過40,000個npm軟件包可供React開發人員安裝。

在最新的前端工具調查中，超過40％的受訪者表示他們對使用React感到滿意。

在GitHub中，React repo擁有近100,000顆星。

React的社區確實更爲龐大，但缺點是比Vue更加分散，並且很難找到常見問題的直接答案。

Vue

在StackOverflow中，有18,000個標記爲#vue 有近10,000個npm軟件包可供安裝。

在最新的調查中，17％的受訪者表示他們對使用Vue感到滿意。但事實上，與React相比，對學習Vue感興趣的開發人數增長了一倍，所以Vue開發人員的市場需求在將來可能會增加得比React更快。

GitHub中的Vue項目start數已經超過了100,000，超過了React。

因爲其出色的文檔，Vue開發中的問題的大多數答案能夠當即在文檔中找到，而且跟社區答案基本是一致的。

成熟度

React

React於2013年3月發佈（撰寫本文時爲5年）。

據SimilarTech稱，React正在被205,000個獨立網站使用，每個月增加2.46％。

React在生產方面通過了很好的測試，超過了Vue。React創建了一個龐大的社區，這主要得益於其全部者Facebook的維護。

Vue

Vue於2014年2月發佈（撰寫本文時爲4歲）。

根據SimilarTech，Vue正在被26,000個獨立網站使用。每個月增加3.34％。

Vue在一年半前成爲業界標杆並被普遍使用，包括一些大公司，如GitLab，阿里巴巴，百度等。事實證實，Vue的運轉和更新都是穩定的。

支持

React

React是由Facebook建立和維護的框架。在Facebook，有一個團隊按期支持React（React也被用於Facebook內的許多項目）。

據稱，Facebook的React團隊規模包括10名專職開發人員。但值得注意的是，Facebook研發部門的多個團隊正在將React用於內部和外部項目，而且每一個團隊均可以將變動請求推送到庫中。

React不具備實際的路線圖，基於RFC規則，具體解釋在這裏。

Vue

Vue是一個獨立的庫，由Evan You創立。他還負責管理Vue的維護及其路線圖。

Vue團隊規模包括23名專職開發人員。

Vue的高級路線圖能夠在他們的GitHub倉庫中查看。

人才招聘

React

做爲目前最流行的框架，若是React開發人員的市場中，React具備優點。

此外，經過學習React，開發人員的簡歷更具閃光點，由於他們很容易從這個流行框架中得到相關的寶貴經驗。

Vue

Vue是前端行業的新「熱點」。固然，炒做也有一些缺點，但Vue長期以來一直在得到穩定的牽引力，開發人員急於將Vue項目做爲錯失恐懼症-FOMO的一部分。如今，找到有Vue經驗的開發人員並不難。

各自優勢

React

行業標準。
受歡迎，熟練使用框架的前端開發工程師更多。
更容易招聘到優秀的工程師。
擁有強大背景的公司支持，更加安全的將來和穩定。
更龐大的社區，大量的工具和包。
web和移動應用能夠共享一些代碼。

Vue

內置核心模塊（Vuex，路由器等）而且運轉很是棒。
面向「將來」，而不是「當前」。
更獨特; 引領潮流而不是跟隨它。
更快的上手，FED(前端開發)和BED(後端開發)都會在Vue代碼中感受很天然，速度很快。
更好全棧支持; 容許跨產品開發。

各自缺點

React

保持FED和BED之間的界限; React須要學到不少才能成爲專家。
須要更多的時間訓練開發者。
交付較慢（至少對於全新啓動的複雜項目來講）。

Vue

走進一個更具實驗性的土地，沒有風險，但前衛。
更難找到經驗豐富的Vue開發者。
可用的插件和工具更少，社區更小。
不像React，開發者沒法得到最流行框架的相關經驗。

很長一段時間裏，React和Angular是框架遊戲中的主要參與者，而許多（不少！）框架每隔一天都會出現，並試圖進入名人堂卻沒有成功; 除了-Vue。Vue之因此吸引人和受歡迎能夠在文章，教程，POC和瀏覽器開發者社區的參考文獻這幾個方面看到。

React是行業中的潮流引領者和高級技能。React在今天是一個明確的引領者，不管是在行業使用上面仍是社區受歡迎程度。它很是受歡迎的，說實話，它的高地位是應得的。 React能夠輕鬆構建複雜而直觀的Web和移動應用程序，但它具備成本 - 框架複雜性和樣例複雜。基礎知識相對直觀，但大型React項目每每變得複雜。社區中的碎片化也是它一大肯定。React引入許多新規範對其學習曲線有一些負面影響。

Vue更精簡，是一個直接且新穎的框架，值得在舞臺上佔據一席之地，由於它很是簡單易學，樣例代碼很是簡單，性能高，靈活且完整。今天的許多網絡應用程序可使用Vue比使用React更快地構建。Vue頗有趣，開發很簡單。

最近前端社區內讚賞Vue的討論在穩定的增加，意味着Vue將很快變得像React同樣受歡迎。