2019，開發者應該學習的16個JavaScript框架

2019，開發者應該學習的16個JavaScript框架

• 來源 | 願碼(ChainDesk.CN)內容編輯
• 願碼Slogan | 鏈接每一個程序員的故事
• 網站 | http://chaindesk.cn
• 願碼願景 | 打造全學科IT系統免費課程，助力小白用戶、初級工程師0成本免費系統學習、低成本進階，幫助BAT一線資深工程師成長並利用自身優點創造睡後收入。
• 官方公衆號 | 願碼 | 願碼服務號 | 區塊鏈部落
• 免費加入願碼全思惟工程師社羣 | 任一公衆號回覆「願碼」兩個字獲取入羣二維碼

---

本文閱讀時長：14min

根據Stack Overflow的開發人員調查，JavaScript是最普遍使用的編程語言之一。因爲其不斷髮展的框架生態系統，能夠爲複雜和具備挑戰性的問題找到最佳解決方案。儘管JavaScript的大部分生命週期都與Web開發有關，但近年來，它的使用彷佛正在擴大。它不只從前端移動到後端，咱們也開始看到它用於機器學習(Machine Learning, ML)和加強現實(Augmented Reality，簡稱 AR)。

JavaScript的發展是由框架驅動的。儘管有一些在引領潮流，但還有許多其餘較小的工具在2019年值得你關注。

JavaScript Web開發框架

---

React

React最初由Facebook於2011年開發，2013年開源。從那時起，它已成爲構建用戶界面的最流行的JavaScript庫之一。根據NPM的調查，儘管React在2018年的增加放緩，但它將成爲2019年的主導框架。因爲其高使用率，2018年的JavaScript現狀調查將其稱爲「採用的安全技術」。

在2018年，React團隊發佈了從16.3到16.7的版本，並進行了一些重大更新。這些更新包括新的生命週期方法，Context API，用於代碼拆分的懸念，React Profiler，Create React App 2.0等。該團隊已經制定了2019年的計劃，很快將發佈最期待的功能之一Hooks。它容許開發人員在不使用JavaScript類的狀況下訪問狀態等功能。它旨在經過容許開發人員重用有狀態邏輯而不對組件層次結構進行任何更改來簡化React組件的代碼。其餘功能將包括併發模式，以容許組件樹呈現而不阻塞主線程，數據獲取的懸念等等。

Vue

Vue是由Evan You在爲許多項目使用AngularJS爲Google工做後建立的。它在2014年首次發佈。分享他建立Vue的動機，Evan說：「我想，若是我可以提取我真正喜歡Angular的部分並構建一些很是輕量級的東西會怎樣 。」 Vue繼續在JavaScript開發人員中獲得很好的採用，我懷疑這種趨勢很快就會中止。根據NPM調查，一些開發人員更喜歡Vue而不是React，由於他們以爲「在保持可擴展性的同時更容易上手」。

Vue是一個容許開發人員構建交互式Web界面的庫。它提供相似於React的數據反應組件，具備簡單靈活的API。與React或Angular不一樣，Vue的一個好處是它產生的乾淨的HTML輸出。其餘JavaScript庫每每會在代碼中留下散佈着額外屬性的HTML，而Vue會刪除它們以產生乾淨的語義輸出。它經過官方維護的支持庫和包爲複雜應用程序提供高級功能，如路由，狀態管理和構建工具。

Angular

谷歌於2009年開發了AngularJS，並於2012年發佈了第一個版本。從那時起，它獲得了企業和我的的熱烈支持和普遍採用。AngularJS最初是爲設計師而非開發人員開發的。雖然它確實在設計上看到了一些改進，但它們還不足以知足開發人員的要求。後來的版本，Angular 2，Angular 4等已經升級，提供性能的總體改進，特別是在速度和依賴注入方面。

新版本簡稱爲Angular，這是一個平臺和框架，容許開發人員使用HTML和TypeScript構建客戶端應用程序。它帶有聲明性模板，依賴注入，端到端工具以及解決開發難題的集成最佳實踐。雖然AngularJS的架構基於模型 - 視圖 - 控制器（MVC）設計，但Angular具備基於組件的架構。每一個Angular應用程序至少包含一個稱爲根組件的組件。每一個組件都與一個負責處理業務邏輯的類和一個表明視圖層的模板相關聯。

Node.js

圍繞Node是不是一個框架（它確實是一個庫）存在不少爭論，但在談論Web開發時，很難跳過它。Node.js最初是由RyanDahl編寫的，他在2009年11月8日舉行的首屆歐洲JSconf上演示了這一點。Node.js是一個免費的、開源的、跨平臺的JavaScript運行時環境，在瀏覽器外執行JavaScript代碼。

Node.js遵循「JavaScript無處不在」的範例，經過圍繞單一編程語言統一Web應用程序開發，而不是服務器端和客戶端腳本的不一樣語言。在JSConf 2018中，Dahl描述了他的服務器端JavaScript運行時引擎的一些限制。其架構的許多部分都受到限制，包括安全性以及如何管理模塊。做爲解決方案，他引入了一個名爲Deno的新軟件項目，這是一個V8 JavaScript引擎上的安全TypeScript運行時，旨在糾正Node.js中的一些設計缺陷。

跨平臺移動開發框架

---

React Native

React Native的故事始於2013年夏天，當時它是Facebook的內部Hackathon項目，後來於2015年開源。React Native是一個用於構建原生移動應用程序的JavaScript框架。正如你可能已經從其名稱中猜到的那樣，React Native基於React。它之因此被稱爲「本機」是由於使用React Native構建的UI包含本機UI小部件，這些小部件外觀和感受與使用本機語言構建的應用程序一致。

在後臺，React Native將用Javascript/JSX編寫的用戶界面定義轉換爲適合目標平臺的本地視圖層次結構。例如，若是咱們正在構建iOS應用程序，它會將Text原語轉換爲本機iOS UIView，而在Android中，它將使用本機TextView生成。所以，即便咱們正在編寫JavaScript應用程序，咱們也不會在移動設備的shell中嵌入Web應用程序。咱們正在得到一個「真正的原生應用」。

NativeScript

NativeScript由Telerik(Progress的子公司)開發，於2014年首次發佈。它是一個開源框架，可幫助您使用JavaScript或任何其餘轉換爲JavaScript的語言(例如TypeScript)構建應用程序。它直接支持Angular框架，並經過社區開發的插件支持Vue框架。使用NativeScript構建的移動應用程序可生成徹底本機應用程序，這些應用程序使用的API與在Xcode或Android Studio中開發的API相同。

因爲應用程序是用JavaScript構建的，所以須要一些代理機制來將JavaScript代碼轉換爲相應的本機API。這是由NativeScript的運行時部分完成的，它充當JavaScript和本地世界(Android和iOS)之間的「橋樑」。運行時可使用JavaScript代碼在Android和iOS框架中調用API 。要作到這一點，須要使用JavaScript虛擬機——Google的V8用於Android，WebKit的JavaScript實現與iOS 7.0+一塊兒發佈。

Ionic框架

該Ionic框架是由Drifty公司建立，最初發佈於2013年，它是一個開源的前端SDK，用於開發混合移動應用程序，使用熟悉的Web技術，如HTML五、CSS和JavaScript。藉助Ionic，您將可以構建和部署跨多個平臺的應用程序，例如本機iOS，Android，桌面和Web做爲漸進式Web應用程序。

Ionic主要關注應用程序的外觀或UI交互。這告訴咱們，它並不意味着取代Cordova或你最喜歡的JavaScript框架。事實上，它仍然須要像Cordova這樣的原生包裝器來將您的應用程序做爲移動應用程序運行。它使用這些包裝器來訪問主機操做系統功能，如相機，GPS，手電筒等。Ionic應用程序在低級瀏覽器外殼中運行，如iOS中的UIWebView或Android中的WebView，它由Cordova/PhoneGap等工具包裝。

JavaScript桌面應用程序開發框架

---

Electron

Electron由GitHub的軟件工程師Cheng Zao建立。它最初於2013年做爲Atom Shell發佈，而後在2015年改名爲Electron.Electron使Web開發人員可以利用他們現有的知識和本地開發人員構建一個代碼庫並分別爲每一個平臺發佈。有許多流行的應用程序使用Electron構建，包括Slack，Skype for Linux，Simplenote和Visual Studio Code等。

Electron應用程序由三個組件組成：Chromium Web引擎，Node.js解釋器和應用程序的源代碼。Chromium Web引擎負責呈現UI。Node.js解釋器執行JavaScript併爲您的應用程序提供Chromium引擎沒法使用的操做系統功能，例如文件系統訪問，網絡，本機桌面功能等。應用程序的源代碼一般是JavaScript，HTML和CSS。

JavaScript機器學習框架

---

Tensorflow.js

在2018年的TensorFlow開發者峯會上，Google宣佈了他們的機器學習框架TensorFlow的JavaScript實現，稱爲TensorFlow.js。它是deeplearn.js的繼承者，於2017年8月發佈，如今命名爲TensorFlow .js Core。該團隊最近發佈了針對TensorFlow的Node.js綁定，因此如今相同的JavaScript代碼將同時適用於瀏覽器和Node.js.

Tensorflow.js由四層組成，即用於GPU支持的數字操做的WebGL API，用於用戶交互的Web瀏覽器，以及兩個API：Core和Layers。低級Core API對應於之前的deeplearn.js庫，它提供硬件加速的線性代數運算和用於自動區分的急切API。更高級別的Layers API用於在Core之上構建機器學習模型。它還容許開發人員使用Keras或TensorFlow SavedModels導入以前使用Python訓練的模型，並將其用於在瀏覽器中進行推理或轉移學習。

Brain.js

Brain.js是一個用JavaScript編寫的神經網絡庫，是「Brain」庫的延續，能夠與Node.js一塊兒使用或在瀏覽器中使用。它經過利用JavaScript的易用性和將API限制爲幾個方法調用和選項，簡化了建立和訓練神經網絡的過程。針對不一樣的任務，它具備不一樣類型的網絡，包括具備反向傳播的前饋神經網絡，時間步長遞歸神經網絡，時間步長期短時間記憶神經網絡等。

JavaScript加強現實（AR）和虛擬現實（VR）框架

---

React 360

2017年，Facebook和Oculus共同推出了React VR，後者於去年改編並從新命名爲React 360。這個改進的版本簡化了3D空間中的UI佈局，而且比React VR更快。React 360構建於咱們以前討論過的React之上，是一個JavaScript庫，使開發人員可以建立3D和VR界面。它容許Web開發人員使用熟悉的工具和概念在Web上建立沉浸式360體驗。

使用React 360構建的應用程序由兩部分組成，即在你的React應用程序和運行時，這兩部分將您的組件轉換爲屏幕上的3D元素。這種「角色劃分」概念相似於React Native。因爲Web瀏覽器是單線程的，所以應用程序代碼與呈現代碼分離，以免應用程序中出現任何阻止行爲。經過在單獨的上下文中運行應用程序代碼，呈現循環能夠以高幀速率持續更新。

AR.js

AR.js由Jerome Etienne於2017年開發，旨在在網絡上有效地實施加強現實。它目前提供60fps的效率，這對於基於Web的開源解決方案來講並不壞。該圖書館受到了諸如three.js，ARToolKit 5，emscripten和Chromium等項目的啓發。

AR.js須要WebGL，一種用於HTML5 Canvas元素的3D圖形API，以及WebRTC，一組瀏覽器API和協議，容許在Web瀏覽器和本機應用程序中實現音頻，視頻和數據的實時通訊。利用ARToolKit和A-Frame中的功能， AR.js使得用於Web的AR的開發成爲一個簡單的過程，能夠由新手編碼器實現。

新興的JavaScript框架

---

Gatsby.js

Gatsby的創始人凱爾馬修斯在2017年辭去了他初創公司的工做，並開始全職專一於他的項目：Gatsby.js和Typography.js。Gatsby.js最初於2015年發佈，其第一個版本於2017年問世。它是React.js的現代網站生成器，這意味着Gatsby中的全部內容都是使用組件構建的。使用Gatsby，能夠建立動態和靜態網站/網絡應用程序，從簡單的博客，電子商務網站到用戶儀表板。

Gatsby支持許多數據庫源，例如Markdown文件，無內容CMS，如Contentful或 WordPress，或REST或GraphQL API，您能夠經過GraphQL進行整合。它還能夠經過自動化來實現代碼拆分，圖像優化，內聯關鍵樣式，延遲加載和預取資源等功能。

Next.js

Next.js由ZEIT建立並於2016年開源.Red.js構建於React，Webpack和Babel之上，是一個小型JavaScript框架，能夠輕鬆實現React應用程序的服務器端呈現。它提供了自動代碼分割，簡單的客戶端路由，支持HMR的基於Webpack的開發環境等功能。它旨在幫助開發人員編寫同構的React應用程序，以便相同的呈現邏輯可用於客戶端和服務器端呈現。

Next.js基本上容許你編寫一個React應用程序，SSR和代碼拆分之類的東西會爲你處理。它支持兩種服務器端呈現模式：按需和靜態導出。按需呈現意味着每一個請求，呈現一個惟一的頁面。此屬性很是適用於高度動態的Web應用程序，其中內容常常更改，具備登陸狀態和相似用例。此模式須要運行Node.js服務器。另外一方面，靜態導出會將全部頁面預先呈現爲.html文件，並使用任何文件服務器爲其提供服務。此模式不須要運行Node.js服務器，HTML能夠在任何地方運行。

Nuxt.js

Nuxt.js最初由Chopin兄弟，Alexandre和SébastienChopin建立，並於2016年發佈。2018年1月，它更新爲生產就緒的1.0版本，並獲得了一個活躍且獲得良好支持的社區的支持。它是一個受Next.js啓發的高級框架，它構建於Vue.js生態系統之上，簡化了通用或單頁Vue.js應用程序的開發。

在後臺，Nuxt.js使用帶有vue-loader和babel-loader的webpack來捆綁，代碼分割和縮小代碼。使用Nuxt，js的一個好處是它提供了一個nuxt generate命令，它使用相同的代碼庫生成Vue應用程序的徹底靜態版本。除此以外，它還爲客戶端和服務器端之間的開發提供了諸如異步數據，中間件，佈局等功能。

NestJS

NestJS由Kamil Mysliwiec建立，於2017年發佈。它是一個輕鬆構建高效，可靠和可擴展的Node.js服務器端應用程序的框架。它創建在TypeScript和JavaScript(ES6，ES7，ES8)的基礎之上，而且受Angular的啓發，由於它們都使用容許可重用性的模塊/組件系統。

在後臺，NestJS使用Express，而且還與各類其餘庫兼容，例如，Fastify。對於它的大多數抽象，它使用類並利用類和TypeScript帶來的裝飾器和元數據反射的好處。它帶有保護，管道和攔截器等概念，並內置支持其餘傳輸，如WebSockets和gRPC。

這些是從大量的javascript框架中挑選出來的。你固然沒必要成爲他們全部的專家。在開始使用框架以前，你能夠檢查它是否有幾個問題，例如它解決的問題，更好地執行相同操做的任何其餘框架，是否符合項目要求，此框架適合哪一種類型的項目等等，若是該框架對你有吸引力，可能會嘗試用一個框架構建一個項目。