這是該系列文章的第2部分：“Fundbox的前端技術選型”。第1部分介紹了Fundbox的技術現狀以及我們重新設計它的動機。第2部分介紹了選擇新框架背后的考慮：是遷移到React，Vue還是Angular。第3部分描述了我們如何從Angular遷移到Vue，同時保證我們產品發展路線不受影響。
Overview
重新考慮前端技術選型需要大量思考，討論，決策，規划，管理和實施。我們首先需要做出的決定之一是選擇一個前端框架來重新設計我們的產品。
我們研究了幾個月來保證我們得出一個的更好決策。進行討論，建立概念證明，與其他公司相關經驗的同事進行面談，並閱讀大量在線材料。
在本文中，我將比較選型過程中的入圍者。我們決定從以下幾個框架中選出我們的下一個基礎框架：Angular，React和Vue。
目標
我們的目標是構建一個全新的，現代化的，快速可靠的平台，為我們當前和未來的所有前端應用程序提供服務。
候選框架
- React
- Vue
- Angular
Angular
Angular在我們的選型過程中被提前放棄了,主要由於以下兩個主要原因（更詳細的推理可以在“Why move then?” 這里閱讀）：
-
Angular是我們目前采用的框架，使用v1版本。Angular v2引入了許多改進，但它不向后兼容。這意味着升級到最新的Angular不亞於換到其他框架。這也導致了開發人員對這個框架失去了信心，使用Angular的想法在Fundbox乃至整個行業中大幅下降。
-
Angular逐漸發展成為一個可以幫助構建復雜系統的大框架，但對於構建啟動快速變化的UI卻沒那么有用。React和Vue更加輕量，組件化意味着小巧，自主，封裝，因此易於重復使用。如果我們從頭開始開發新的基礎架構（而不需要從現有基礎架構遷移），我們也可以考慮使用Angular。但在我們的例子中，它不合適。
無論如何，我們正在重寫我們應用程序的重要部分，這是我們學習新技術的絕佳機會。通過這種方式，我們可以拓寬知識面，豐富開發人員的經驗。
React VS Vue
接下來留給我們選擇的就只有React和Vue了，我們主要從以下幾個方面對這兩個框架進行對比：
- 學習曲線
擁有豐富開發經驗人員學習框架是否足夠簡單？ - 代碼風格
框架的代碼和約定的可讀性和直觀性如何？ - 單個文件組件
在框架中瀏覽和維護組件有多直觀？ - 性能
使用框架構建的應用程序的性能如何？
框架的大小和運行內存占用有多大？ - 靈活性
框架提供了多少功能？
有多少功能是強制性的？
定制框架有多容易？ - 工具
框架可用的工具有哪些？
框架有多少穩定的插件？ - 移動端支持
框架是否支持除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一樣受歡迎。
參看資料
- How popular is VueJS in the industry? Will becoming a Vue expert be useful, career-wise? (Quora)
- Comparison with Other Frameworks (in Vue’s documentation)
- Vue.js or React? Which you would chose and why? (Reddit discussion)
- Choosing the Right JavaScript Framework for Your Next Web Application (Progress)
- Angular vs. React vs. Vue: A 2017 comparison (Medium article)
- Can Vue Fight for the Throne with React? (RubyGarage blog)
- React vs Vue.JS: Which Front-end Framework to Choose in 2018 (jetruby blog)
- Angular 5 vs. React vs. Vue (ITNEXT blog)
感謝閱讀
原文： React vs. Vue (vs. Angular) 譯文：https://juejin.cn/post/6844903858741706765