如何在主流 JavaScript 框架中做選擇?横向對比 Vue, React, AngularJS, and Angular2

本文原文撰寫於2017年,部分資料可能因時空背景而有不同。

如果你不曉得該如何為你的產品選擇一個合適的前端框架,這篇文章也許可以給你一些啟發。

一個有趣的事實是:IBM 發表的 2017 年最值得學習編程語言名單中,JavaScript 榜上有名。
正是這位 IT 巨頭指出,JS 在網站中驚人地達到 94.4% 的使用率,而且「不太可能降低」。
JavaScript 能確保「對用戶非常友好的網頁,因為它負責整個 web 界面,包括動畫和交互」。

不管你怎麼看,JavaScript 很重要。

這也指明了潛在 Web 開發人員的方向:如果你深入前端,你不得不在某些時刻面對 JavaScript。並且 正確的開發指南 可能有助於此。

讓我們假設你知道 JavaScript 基礎知識,不是一無所知的那種,如果假設是正確的,
你可能對現代 JavaScript 框架們的學習更感興趣。這些框架通常帶有預置的函數和一些構建應用的方法。

Javascript Frameworks

有些人可能會有侷限性的思考,認為世界上大多數開發者更喜歡使用框架(不要將它們與庫混淆),因為它們使工作更容易,更快速,在通常情況下更可靠。

好吧!說完這些,是時候該挖深一點了。

我們的開發團隊準備了他們每天使用的框架清單。雖然周圍肯定有 更多的 JavaScript 框架 ,這些是我們最關注的。

接下來,你會看到我們所愛的技術及其各自特點的簡單概述。

大街上的酷小孩-Vue.js

Vue.js Javascript frameworks

這個就像一個還在讀高中的超級巨星。它不是一個成熟的技術,所以我們真的無法說,五年後,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。作為我們的隊友,36Kr 某員工說:

「在我看來,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.js Javascript frameworks

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

AngularJS JavaScript framework

Google 在 2009 年第一次發布了 AngularJs 框架,鼓勵使用聲明式編程方法去創建用戶界面和連接各種組件,另一方面,指令式的編程用於實現程序的邏輯。

Brat Tech 公司的 Miško Hevery 是這個技術的真正作者,當時,它被創建為在線 JSON 存儲服務背後的軟件。但是業務沒有搞起來,所以公司放棄了這個想法,並將 AngularJs 作為一個開源庫發布。

AngularJS 使用雙向數據綁定的方式,適配和擴展了傳統的 HTML 來呈現動態內容。

所有這些可能聽起來很有意思,事實是 AngularJs 已經有點老了。
實際上。它是我們描述的框架裡最老的了,大 ReactJS 4 歲,Vue.js 5 歲,比 Angular2 年長了 7 歲之多。

儘管如此,他擁有 Github 上最多的貢獻者,隨後是 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,單個開發人員的配置和啟動過程仍然可能太長。

我們的開發團隊也不太喜歡提供文檔,特別是對於 JS 和 Dart。另一方面,他們又喜歡將技術分解成很多模塊。

Angular 對開發者的優點:

  • 你喜歡 TypeScript 就開心了
  • 強制規定編寫代碼的方式,使得它成為與多個開發人員合作的好選擇
  • 使用同一個庫開發移動和桌面應用
  • 對於具有很多代碼的單頁應用是個不錯的解決方案

Angular 對客戶來說的優點:

  • 使用該框架構建企業應用可能會降低成本
  • 大量開發人員已經知道如何使用框架

有最好的 Javascript 框架嗎?

想要一個簡單的答案?

沒有。

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

每個框架都在以不同的方式嘗試適合用於不同場景的 Web 應用開發 ,包括 MVP、創業公司和商業場景。

結語

已上是JavaScript 等的框架討論,希望能夠藉由這篇文章幫助到你,

好文轉自 36Kr《如何在主流JavaScript框架中做选择?横向对比Vue, React, AngularJS, and Angular2》
如果你喜歡他們的文章,歡迎回到原文看更多:)

如果想要對JavaScript本身有更多的瞭解,Udemy這裡開課囉!老師從基礎手把手的帶你實踐,教你主流寫法提升 JS 開發能力!

如果你的入門還在單打獨鬥,歡迎來到快樂學程式找到志同道合的夥伴,你的自學之路不孤單。

學程式助教

Recent Posts

三個你不能錯過的教學資訊

疫情之下,原本實體活動全都改成線上,活動分享全都在網路上很容易錯過,這邊整理了幾個跟數位教學相關的活動資訊給大家參考,分享順序為活動時間⏰ 1. Google Workspace技術整合術 Google Workspace for Education (原 G Suite 教育版) 能透過 Gmail、Google Drive、Google Calender、Google Meet 和 Classroom 等通訊與協作應用程式創造輕鬆與順暢的學習環境,並促進協同合作以提升數位學習與教學成效,而且還會為學校資料提供雲端安全性防護…

3 years ago

線上教學沒有臨場感?Gather來幫你解決

實體的教室變成一格一格的畫面,原本吵雜的下課時間也變成掛斷通話的系統聲。原本在班級中的歸屬感慢慢消失了,久而久之,孩子的對於學習,不再有群體的感覺,只是孤軍一人學習、複習、考試,甚至是畢業典禮都少了一份臨場感。因此,今天要和大家介紹一款現在在教育界還很少被提到的軟體-Gather。 Gather 如果你還不知道Gather,或是直覺的把Gather與虛擬會議室連結在一起,不妨先看看Gather裡的特色: 介面是像素型RPG 每個人自由創建一個角色 上下左右輕易控制角色 走道其他角色旁邊能互相討論 小遊戲battle 光是這五點特色,就足以推派它成為遠距教學的工具,除了打造不同空間的地圖外,最特別的是Gahter打造前所未有的臨場感,人與人之間只有靠近到一定距離,才能聽到彼此說話聲音,而相對應的,離開後聲音就會漸漸聽不到,就連白噪音的設計也是如此,非常的逼真。 不知道老師們會不會因為搭建地圖覺得麻煩,或是看到2D介面怕學生當遊戲在玩而不考慮這款軟體,換個角度思考,藉由不同地區的老師們集思廣益,打造出最適合學生學習的環境,像是不同學科的教室、戶外自然生態區、操場、籃球場等等....都可以更貼近真實校園,而像素的介面正好提高學生的學習意願,老師們擔心學生過於沉迷時,也能用全體廣播放上課鐘聲,或是讓學生們聚集在同一區,鏡頭站起來動一動 (另外推薦Active Arcade -> 趣味運動的APP ),就像早操一樣很真實。 線上教學缺乏臨場感,Gather可以創造了讓大家「一起在一個遊戲世界」的凝聚力。縱使Google Meet、Teams 雖然也可以進行討論,但若要每堂課要穿梭在不同會議間,節奏不流暢,使用Gather可以讓學生更自由地移動,相對應的老師也可以神出鬼沒地到處「旁聽」。 教孩子用科技解決問題,如果老師們也努力著示範給孩子看,創造出獨一無二的學習空間,相信對於孩子學習的歷程中,有莫大收穫。但到底怎麼開始使用?別擔心,這次快樂學程式邀請到Gahter界的大神 阿岳,要來和大家分享Gather的6大應用技巧,限名額唷~…

3 years ago

HTML入門系列:基本觀念介紹!

HTML入門&基本觀念介紹!         構成一個網頁,最重要的就是他的結構,而HTML就像是他的骨架,而CSS就是像是我們身體上的肌肉一般,而JS則像是人體的神經、血管般調整著我們身體、傳遞訊息,那麼HTML究竟是指哪些語法呢?   什麼是HTML?       HTML全文又稱為HyperText Markup language ,也就是所謂的超文本標記語言,是網頁構成的基本要素,換言之,網頁就是由一堆html所構成,透過瀏覽器,顯示文字、圖片、以及其他相關我們可以在網頁上看見的基本元素。而對於剛學程式的朋友來說,HTML有以下幾個重點: HTML的基本架構: HTML的基本觀念與優點1.容易學習-HTML的文檔製作非常簡單易懂﹐功能強大之餘還支持不同格式的文件鑲入。2.製作門檻低-HTML是文本﹐它需要瀏覽器的解釋。只要你學會了HTML﹐你就可以直接在Windows的記事本或寫字版上進行製作和編輯﹐當然你也可以用WPS來編寫﹐只要注意在存檔的時候用.htm或.html來做檔名就可以了3.有利於搜尋引擎理解你的內容,透過HTML所構成的頁面被稱作所謂的”靜態頁面”﹐而Google爬蟲會優先收錄靜態網頁﹐所以HTML對於Google來說就像是鯊魚聞到血腥味一樣﹐有利於吸引Google爬蟲。4.加快瀏覽速度-因為靜態網頁無需連接數據庫﹐因此比打開動態網頁的速度較快﹐對於消費者體驗來說有所幫助。5.網站更安全-因為HTML頁面不會受Asp相關漏洞所影響。 HTML的缺點與限制 1.太簡單﹐不能適應現在越來越發達的網路世界和應用的需要﹐比如手機﹑PDA﹑信息家電等都不能直接顯示HTML2.太龐大﹐由於HTML代碼不規范﹑臃腫﹐瀏覽器需要足夠智能和龐大才能夠正確顯示HTML。顯然在你的PDA上裝一個IE6是不可能的。空間不夠﹐運算也跟不上3.數據與表現混雜。這樣你的頁面要改變顯示﹐就必須重新制作HTML。對不同的網路設備顯示同樣的數據都需要制作不同的HTML4.只能對文本進行排版﹐而且HTML樣式使用標準文本標識﹐不能創建一些特殊效果 所以我該如何學習HTML? 有什麼比較快的方法嗎?       答案是沒有的﹐學習程式語言就像是學習廚藝一樣﹐只有透過不停的嘗試﹑嘗試和嘗試才能讓自己有所成長﹐並且慢慢強大。過程中你會一直遇上困難和失敗﹐但你在不斷解決困難的過程中能夠不斷發掘新的知識﹐從失敗中發才能不停的成長。無論你是學習那一種程式語言﹐都需要經歷困難和失敗才能讓自己更加強大﹐正所謂:不經一番寒徹骨,怎得梅花撲鼻香呢?對吧﹐我們能做的不是要找捷徑﹐而是透過不同的媒介和平台去不斷學習﹐那麼下面快樂學程式會為大家介紹一些很棒的程式教學網站﹐讓大家可以不斷提升自己。 1.w3schools.com- 語法練習的好地方這個網站是目前全球訪問量最大的網頁開發教程網站﹐網站裡有多種程式語言的教學﹐而且每種程式語言由淺到深的解說﹐從語言的介紹到不同的功能和方法都會分章節說明。所以無論你是從零開始學的白紙﹐還是已經在學習但遇到困難的新手都可以在這個網站上找到相關資訊﹐是個非常不錯的網站。那麼網址我們當然要雙手奉上﹐請慢用https://www.w3schools.com/ 2.CodeAcademy- 免費的教學網站這是全球其中一個最受歡迎的免費coding教學網站﹐已經有超過2400萬人透過這個網站學習到了如何去coding。這個網站是非常適合新手入門的同學去學習的﹐網站會一步一步仔細的教導而且還有實作﹐所以學習起來非常的快速! 3.StackOverflow- 實際案例與疑難雜症的解決處  這個網站比較適合一些已經有在嘗試動手實作的同學﹐當你在coding的時候遇上困難了﹐那麼你可以在這個可以解決超過80種程式語言問題的網站上找到答案﹐讓你的coding之路更加順暢。  如果你覺得爬網站麻煩又費時,不妨直接點擊快樂學程式的網頁前端課程,老師直接手把手帶你入門HTML !完整的基礎入門課程省下你獨自摸索花費的時間!   課程上架Udemy ! 準備一個輕鬆的週末,只要一天的時間,帶你建置靜態網頁。從實作中打開靜態網頁的大門,讓你的研究之路不是只有自己,有我們跟你一起努力!課程中你可以瞭解網站建置的世界觀與網站版型掌握HTML5的使用方式掌握 CSS3的使用方式使用Bootstrap處理前端UI框架現在開始上課!如果你的入門還在單打獨鬥,歡迎來到快樂學程式找到志同道合的夥伴,你的自學之路不孤單。快樂學程式

4 years ago

HTML語法整理! 3分鐘快速弄懂常用語法!

什麼是HTML?         HTML全名是HyperText Markup Language,是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言,是編寫網頁的基本語言,基本上現行的瀏覽器都可以讀取HTML,使用HTML可以編輯設計出網頁,也可以在網頁中加入所有HTML語言可支援的方式,例如表格、表單、圖片、文字、連結、程式等等。 HTML介紹與基本語法整理   不管你是小時候從撰寫無名小站為了要修改你的樣式,而開始瞭解HTML和CSS為何物,或是長大因為介面設計或前端工程開始踏入網頁的世界。HTML和CSS對於網站的重要性經過多年依然歷久不衰。在本篇會對HTML進行基礎的介紹並幫你整理出基本語法提供你在寫網頁時的快速參考!   編寫基本的HTML: 先讓大家看一下一個基本的HTML文件格式為: <HTML> <HEAD> <TITLE>網頁主題</TITLE> <Meta> </HEAD> <BODY>…

4 years ago

PHP是什麼?3分鐘PHP基本介紹!

PHP是什麼?3分鐘PHP基本介紹!       大家安安﹐快樂學程式這一次要跟大家分享PHP這種程式語言。希望幫助對於PHP有興趣的新手們可以透過我們的文章對這種語言有初步認識。一如以往﹐我們會分享以下幾項有關PHP的知識。 PHP是什麼?       PHP語言的全名是(PHP: Hypertext Preprocessor),和ASP、JSP等都是動態網頁開發語言,不過,PHP擁有跨平台的能力,無論是在Linux(最適合)、Unix、 Windows都可以執行運作,不像微軟 的ASP只能在Windows平台上執行,而且PHP是免費的,並可結合多種資料庫伺服器,如:MySQL、PostgreSQL、dBase、mSQL、Informix、ODBC、Oracle等。      PHP語言是伺服器端(Server)執行的網頁,不像一般HTML網頁,只要單機下開啟檔案就可以檢視網頁,PHP必須先在伺服器端執行完後,再將結果傳至使用者端(Client)的瀏覽器中檢視結果,所以必須使用網站伺 服器,且伺服器要支援PHP。 如何學好PHP?       要學好PHP,要有目的,要有一個想寫的東西,寫個學校網站,寫個校友系統,寫個簡單的新聞區或相簿...等,都可以,盡可能的和工作和生活結合,利用程式來簡化繁瑣的人工步驟,或者提昇工作效率,有目標,才會有動力,才會有想法。      學PHP不需要背,背不完的,只要懂就好了。像函數就不用背,常用的打久了你就背起來了,不常用的,等到要用時,知道去哪裡找就好。換言之,函數懂越多,功力越高強。      程式碼可以複製貼上,但一定要知道為什麼要這麼寫,不要傻傻的照著打,可以的話,自己打一遍最好,最上乘就是可以說出每一行程式碼的作用和前因後果。或者,故意打錯,看看會怎樣。錯誤訊息看久了,功力也就提昇了。 PHP程式碼執行方式 透過 Web Server 方式:例如利用 Apache…

4 years ago

PHP是什麼?基本介紹與語法整理

Sildenafil citrate oral jelly Combiné avec les données de départs 2, on leur a demandé de type 5 de tadalafil…

4 years ago