web前端開源架構
大約十年前，JavaScript開發人員社群開始目睹JavaScript架構之間出現的激烈戰鬥。 在本文中，我将介紹一些最著名的架構。 需要特别注意的是，這些都是開放源代碼JavaScript項目，這意味着您可以在開放源代碼許可下自由使用它們，甚至可以為源代碼和社群做出貢獻。
如果您喜歡在探索這些架構時繼續學習，則可以觀看我的視訊。
但是，在開始之前，學習一些JavaScript開發人員在讨論架構時常用的術語将很有用。
| 術語 | 這是什麼 |
|---|---|
| Document Object Model (DOM) | 網站的樹結構表示形式，其中每個節點都是代表網頁一部分的對象。 網際網路聯盟（W3C）是網際網路的國際标準組織，維護DOM的定義。 |
| Virtual DOM | 使用者界面（UI）的“虛拟”或“理想”表示形式保留在記憶體中，并通過諸如ReactDOM之類的庫與“真實” DOM同步。 要進一步探索，請閱讀ReactJS的虛拟DOM和内部文檔。 |
| Data Binding | 一種程式設計概念，旨在為通路網站上的資料提供一緻的界面。 Web元素與DOM維護的元素的屬性或屬性相關聯。 例如，當您需要以網頁形式填寫密碼時，資料綁定機制可以使用密碼驗證邏輯進行檢查，以確定密碼采用有效格式。 |
既然我們已經了解了通用術語，那麼讓我們探索一下那裡的開源JavaScript架構。
| 構架 | 關于 | 執照 | 釋出日期 |
|---|---|---|---|
| ReactJS | 由Facebook建立，目前是最受歡迎JavaScript架構 | 麻省理工學院執照 | 2013年5月24日 |
| Angular | 由Google建立的流行JavaScript架構 | 麻省理工學院執照 | 2010年1月5日 |
| VueJS | 快速增長JavaScript架構 | 麻省理工學院執照 | 2013年7月28日 |
| MeteorJS | 功能強大的架構不隻是JavaScript架構 | 麻省理工學院執照 | 2012年1月18日 |
| KnockoutJS | 開源Model-View-ViewModel（MVVM）架構 | 麻省理工學院執照 | 2010年7月5日 |
| EmberJS | 另一個開源的Model-View-ViewModel架構 | 麻省理工學院執照 | 2011年12月8日 |
| BackboneJS | 具有RESTful JSON和Model-View-Presenter模式JavaScript架構 | 麻省理工學院執照 | 2010年9月30日 |
| Svelte | 開源JavaScript架構未使用虛拟DOM | 麻省理工學院執照 | 2016年11月20日 |
| AureliaJS | 現代JavaScript子產品的集合 | 麻省理工學院執照 | 2018年2月14日 |
就上下文而言，這是基于npm趨勢基于每個架構的NPM包下載下傳量的可公開獲得的流行度資料。
ReactJS
ReactJS是Facebook發明的，盡管它是在Angular之後發明的，但它顯然是當今JavaScript架構中的上司者。 React引入了一個稱為虛拟DOM的概念，這是一個抽象副本，開發人員可以在其中僅使用所需的ReactJS功能，而無需重寫整個項目即可在架構中工作。 此外，React項目活躍的開源社群絕對是增長的動力。 以下是React的一些主要優勢：
- 合理的學習曲線-React開發人員可以輕松建立React元件，而無需用JavaScript重寫整個代碼。 在ReactJS的首頁上檢視ReactJS的好處以及它如何使其變得更容易程式設計。
- 高度優化的性能-React的虛拟DOM實作和其他功能可提高應用程式渲染性能。 請參閱ReactJS關于如何通過應用程式性能對其性能進行基準測試和測量的描述 。
- 出色的支援工具-Redux ， Thunk和Reselect是用于建構結構良好的可調試代碼的一些最佳工具。
- 資料綁定的一種方法-“到達”中使用的模型從所有者流到子節點，這僅使跟蹤代碼中的因果關系變得更加簡單。 在ReactJS的資料綁定頁面上閱讀有關它的更多資訊。
誰在使用ReactJS？ 自從Facebook發明它以來，該公司本身就在其首頁上大量使用React，據說Instagram完全基于ReactJS庫。 您可能會驚訝地發現， 《紐約時報》 ， Netflix和Khan Academy等其他知名公司也在其技術堆棧中實作了ReactJS。
如下所示，您可以從Stackoverflow的研究中看到，ReactJS開發人員可以得到更多的工作，這可能會更加令人驚訝。 嘿，您可以從事開源項目，并獲得報酬。 太酷了！
Stackoverflow顯示了對ReactJS開發人員的巨大需求- 來源：2017年開發人員招聘趨勢 -Stackoverflow 部落格
ReactJS的GitHub目前顯示了超過1.3萬的送出和1,377位貢獻者。 它是MIT許可下的一個開源項目。
角度的
Angular緊随其後。 實際上，盡管React是開源開發人員和初創公司中更受歡迎的選擇，但大型公司往往更喜歡Angular（下面列出了一些）。 主要原因是，盡管Angular可能更複雜，但其一緻性和一緻性在大型項目中效果很好。 例如，我在整個職業生涯中都從事過Angular和React的工作，而且我發現大型公司通常認為Angular的嚴格結構是一種優勢。 以下是Angular的其他一些關鍵優勢：
- 精心設計的指令行界面：Angular具有出色的指令行界面（CLI）工具，可以輕松地引導和使用Angular進行開發。 ReactJS還提供了指令行界面以及其他工具，但是Angular具有廣泛的支援和出色的文檔，如您在此頁面上所見。
- 單向資料綁定-與React類似，單向資料綁定模型使架構較少受到有害副作用的影響。
- 對TypeScript的強大支援-Angular與TypeScript具有出色的一緻性，實際上是JavaScript的更多類型強制實施。 它還可以編譯為JavaScript，進而使其成為強制執行類型以減少錯誤代碼的絕佳選擇。
YouTube， Netflix ， IBM和Walmart等知名網站都已在其應用程式中實作了Angular。 我親自學習了有關該主題的知識，進而開始使用Angular進行前端JavaScript開發。 我參與了許多涉及Angular的個人和專業項目，但當時是AngularJS調用的Angular1.x。 當Google決定将版本更新到2.0時，他們徹底改造了該架構，然後将其變為Angular。 新的Angular是對以前的AngularJS的完全改造，它淘汰了一些現有的開發人員，同時帶來了新的開發人員。
在撰寫本文時， Angular的 GitHub頁面顯示了17,781個送出和1,133個貢獻者。 它也是具有MIT許可證的開源項目，是以您可以随時将其用于項目或做出貢獻。
VueJS
VueJS是一個非常有趣的架構。 它是JavaScript架構領域的一個新手，但是在過去的幾年中，它的流行性大大提高了。 VueJS由曾從事Angular項目的前Google工程師Evan Yu建立。 該架構如此流行，以至于許多前端工程師現在更喜歡VueJS而不是其他JavaScript架構。 下圖描述了架構随着時間的推移獲得牽引力的速度。
以下是VueJS的一些關鍵優勢：
- 更輕松的學習曲線-與Angular或React相比，許多前端開發人員都認為VueJS具有最低的學習曲線。
- 體積小-與Angular或React相比，VueJS相對較輕。 在其官方文檔中 ，它的大小僅聲明為30 KB，而例如Angular生成的項目則超過65 KB。
- 簡潔的文檔-Vue擁有詳盡但簡潔明了的文檔。 自己檢視其官方文檔 。
VueJS的GitHub顯示了3099個送出和239個貢獻者。
流星JS
MeteorJS是一個免費的開源同構架構 ，這意味着，與NodeJS一樣，它同時運作用戶端JavaScript和伺服器端JavaScript。 Meteor可以與任何其他流行的前端架構（例如Angular，React，Vue，Svelte等）結合使用。
高通，馬自達和宜家等多家公司使用了Meteor，Dispatch和Rocket.Chat等許多應用程式也使用了Meteor。 在其官方網站上檢視案例研究。
流星的一些主要功能包括：
- 線上資料-伺服器發送資料而不是HTML，而用戶端呈現資料。 線上資料主要是指Meteor在頁面加載時形成與伺服器的WebSocket連接配接，然後通過該連接配接傳輸所需資料的方式。
- 用JavaScript開發一切-用戶端，應用程式伺服器，網頁和移動界面都可以使用JavaScript設計。
- 支援大多數主要架構-Angular，React和Vue可以全部組合并與Meteor結合使用。 是以，您仍然可以使用自己喜歡的架構，如React或Angular，但仍可以利用Meteor提供的一些出色功能。
到目前為止， Meteor的 GitHub顯示了22,804個送出和428個貢獻者。 對于開源活動而言，這是很多！
EmberJS
EmberJS是基于Model-view-viewModel（MVVM）模式的開源JavaScript架構。 如果您從未聽說過EmberJS，那麼一定有很多公司正在使用它。 Apple Music，Square，Discourse，Groupon，LinkedIn，Twitch，Nordstorm和Chipotle都将EmberJS用作其技術堆棧之一。 檢查EmberJS的官方頁面以發現所有使用EmberJS的應用程式和客戶。
盡管Ember與我們已經讨論過的其他架構具有類似的好處，但以下是其一些獨特之處：
- 約定優于配置-Ember标準化命名約定并自動生成結果代碼。 這種方法具有更多的學習曲線，但可以確定程式員遵循最佳建議的做法。
- 完善的模闆機制-Ember依靠純文字操作，可以動态建構HTML文檔，而對DOM一無所知。
正如人們可能希望從許多應用程式使用的架構中看到的那樣， Ember的GitHub頁面顯示了19,808個送出和785個貢獻者。 太好了！
淘汰賽
KnockoutJS是一個獨立的開源JavaScript架構，采用帶有模闆的Model-View-ViewModel（MVVM）模式。 盡管與Angular，React或Vue相比，聽說過此架構的人較少，但該項目在開發社群中仍然相當活躍，并利用以下功能：
- 聲明性綁定-Knockout的聲明性綁定系統提供了一種簡潔而強大的方法來将資料連結到UI。 綁定到簡單資料屬性或使用單個綁定通常很容易。 在KnockoutJS的官方文檔頁面上了解更多有關它的資訊 。
- 使用者界面自動重新整理
- 依賴跟蹤模闆
Knockout的GitHub頁面顯示了約1,766項送出和81位貢獻者。 與其他架構相比，這些數字沒有那麼重要，但是該項目仍在積極維護中。
BackboneJS
BackboneJS是具有RESTful JSON接口的輕量級JavaScript架構，基于Model-View-Presenter（MVP）設計範例。
據說該架構供Airbnb ，Hulu，SoundCloud和Trello使用。 您可以在Backbone的頁面上找到所有這些案例研究。
BackboneJS GitHub頁面顯示3,386個送出和289個貢獻者。
斯維爾特
Svelte是一個開放源代碼JavaScript架構，該架構生成用于操作DOM的代碼，而不包含架構引用。 在某些情況下，在建構時而非運作時将應用程式轉換為JavaScript的過程可能會稍微提高性能。
截至撰寫本文時， Svelte的 GitHub頁面顯示了5,729個送出和296個貢獻者。
奧雷利亞
名單上的最後一個是Aurelia 。 Aurelia是一個前端JavaScript架構，它是現代JavaScript子產品的集合。 Aurelia具有以下有趣的功能：
- 快速渲染-Aurelia聲稱其架構可以比當今任何其他架構更快地渲染。
- 單向資料流-Aurelia使用基于可觀察的綁定系統，該系統将資料從模型推送到視圖。
- 使用普通JavaScript進行建構-您可以使用普通JavaScript來建構網站的所有元件。
截至撰寫本文時， Aurelia的 GitHub頁面顯示788個送出和96個貢獻者。
這就是我在檢視JavaScript架構世界中的新增内容時發現的。 我是否錯過了任何有趣的架構？ 随時在評論部分分享您的想法！
翻譯自: https://opensource.com/article/20/5/open-source-javascript-frameworks
web前端開源架構