SPA Asp.Net核心架構

Question

我想通過WebSocket與其他Web應用程序實時通信來構建Web應用程序。

爲了製作WS一個連接，最好構建SPA應用程序。

不幸的是Angular 2 + Asp.Net Core似乎並不清晰穩定。 此外，我想使用Asp.Core庫，如身份

可能更好地使用ViewComponents並根據WS消息重新加載它們，而無需重新加載View？

任何關於更好的應用程序架構的想法？

Answer 1

朋友，你似乎是在路上，你的頭。讓我提供一些非常基本的幫助，試圖讓你朝着正確的方向前進。

如果您打算使用ASP.NET或ASP.NET CORE進行實時通信，那麼您可能會使用ASP.NET SignalR庫。 SignalR（https://www.asp.net/signalr）支持Web Sockets，但是對於不支持它們的舊瀏覽器可以使用其他技術。它功能非常豐富，與傳統ASP.NET或ASP.NET Core很好地集成在一起。 （微軟提供了兩種版本。）

ASP.NET Core現在是穩定的，但它仍然不是功能完整 - 特別是關於實體框架。但是，對於大多數綠地應用，也就是說，大多數新開發項目ASP.NET Core是一個完全合理的開發選擇。 ASP.NET Core提供了許多很大的好處 - 例如在Linux服務器上部署.NET代碼的能力。應用程序構建比傳統.NET（例如.NET 4.6）快得多。

是的，ASP.NET Identity是身份管理的最佳選擇（儘管我通常使用IdentityServer4）。您肯定需要擴展ASP.NET Identity才能使用它。 （例如，大多數人使用自定義用戶屬性來擴展AppUser。對於單頁應用程序，您可能還需要使用JSON Web Tokens（JWT）（https://jwt.io/））。還有很多其他的ASP.NET Identity擴展，你可以（也可能會）。他們都需要對ASP.NET Identity的內部架構有一些基本的瞭解。 （我推薦Taiseer Joudeh教程。（http://bitoftech.net/category/asp-net-identity/）他們是ASP.NET 4.x，但可以很容易地遷移到ASP.NET Core，這些教程的輸出也可以形成自己的身份系統一個真正偉大的基礎。

要開發SPA （Single Page Application），你會想用一個前端框架。到目前爲止，這兩個最流行的框架是谷歌的Angular2（http://angular.io）和Facebook的React（https://facebook.github.io/react/）。基於什麼，我從收集

您後，您可能沒有太多的這些技術的經驗。ASP.NET Core,SignalR，（nec essary）ASP.NET Identity的延伸，Angular2/React，都有顯着的學習曲線。重要的是，我的意思是顯着 - 你可以在幾個月內測量。

您需要熟悉Gulp才能用作ASP.NET Core下的Task runner。我建議使用Visual Studio 2015或Visual Studio 2017來開發ASP.NET Core。你也可以很好地與Visual Studio Code。

除此之外，還有一大堆其他工具需要熟悉以有效開發這些平臺 - 尤其是在前端。

例如，要做到有效Angular2發展（這是我的SPA前建議結束），你會是真的需要知道或者能夠使用所有的以下內容：Git，ES6，TypeScript，RxJS ，JSON，Node，NPM，angular-cli，Jasmine，Karma，Protractor，CSS，Sass/SCSS，Bootstrap或Angular Material，Webpack，Angular Universal等，還有，你會想利用其實不少其他工具/庫，但是這會給你一個足夠好的起點。

在客戶端前端，您肯定會不是想要使用Visual Studio。開發前端JavaScript是一個真正的痛苦。 （Visual Studio 2015/2017的Angular2設置是一個熊。）您可能會使用Visual Studio Code,Sublime Text,Atom或Webstorm。

大多數組織都僱用整個團隊來開展SPA應用。部分團隊成員可能包括：平面設計師，CSS Themer，前端Javascript開發人員，後端服務器開發人員，DBA /數據架構師，需求分析師，構建/測試專家，測試人員，網絡管理員和項目經理。當然，在許多項目中，一個人可以擔任多個角色 - 或者人們可以共享角色。關鍵在於SPA項目非常複雜，大多數項目至少有2-3名團隊成員 - 而且通常更多。即便如此，非常有經驗的人仍然很難將這些應用程序投入生產。

我還想問你的一個問題是，「你真的需要Single Page Application嗎？」 SPA s很棒 - 真的很棒！但是，他們需要更多的知識來開發，並且比其他應用程序複雜得多。如果有很好的用例來開發SPA，那麼給你更多的權力。如果沒有，那麼你可能會考慮退後一步，做一些不那麼雄心勃勃的事情，直到你更好地處理可能的事情。

我不是說所有這些阻止你。我只是想描繪一下你需要能夠真正建立和部署一個生產SPA的現實情況。我希望你知道你在做什麼，並且有一定的成功路徑。

祝你好運，我的朋友！

---

更新：增加了更多的細節我現在從一個朋友寄封信工具集。

我有一個很想成爲Web開發人員的好朋友。我最近制定了一張路線圖來幫助他學習。我只是在這裏複製並粘貼該路線圖（以及我的信），以提供關於我使用（以及上面提到的）的工具的一些額外細節以及關於使用它們所需的相關努力的一些提示。他剛剛開始，所以我對這些工具的描述是相對非技術性的。這些只是我使用的，所以如果我遺漏了你的收藏，請不要激怒我。

---

...我想繼續前進，爲您提供我們在哪裏給你的是我居然在我的使用現在的工具的預覽行進的路線圖「開發堆棧。」 （「開發堆棧」是人們用於編寫，構建和部署項目的工具列表。）最終，您可能會使用大部分這些工具（可能有一些後端開發工具除外）或者其他人來替換他們。這個「堆棧」代表了許多頂級開發人員傾向於使用的工具 - 儘管每個開發人員都有他自己的最愛。如果你打算在這個Web開發事業中一馬當先，那麼我認爲你會想成爲最好的 - 因爲那是最有價值的項目被找到的地方 - 而且最賺錢的是好。

當您閱讀此列表時，您可能會被大量工具所淹沒。我每天都這樣做，而且我仍然有點不知所措。首先，讓我說，我不一定每天都使用每一種工具，但我有時會使用這些工具中的每一種。他們都是你的武器庫中不可缺少的。其次，讓我也說我不是每個工具的專家。你不需要也是。將會有一些你絕對掌握的工具，一些你需要非常強大的工作知識的工具，以及一些你需要的基礎工具。

隨着我們前進，我將幫助您以非常有組織的方式學習這些工具。有成千上萬的工具 - 其中許多是無用或劣質的。知道你實際需要哪些工具將有助於關注你，並防止在學習和成長過程中浪費大量時間。除此之外，我會幫助您按照正確的順序獲得正確的知識，使學習過程儘可能高效和舒適。

這對你來說是完全不錯的，然後開始熟悉你自己的一些工具。如果你訪問一個網站頁面，現在看起來都很亂，請不要擔心。在短時間內，這一切都將開始有意義。

我會注意到的一件事是每天都會推出新的工具。技術在不斷髮展。我完全認爲，到達適度水平（從現在開始的幾個月）時，這些工具中的一些可能已經開始褪色，甚至完全被其他人取代。無論如何，瞭解當前的工具化身將使您可以輕鬆掌握替換工具。

我已經按照某種邏輯順序對工具進行了分類，併爲每種工具提供了描述;一個網站的鏈接;所需的掌握程度（Basic [working knowledge]|Strong [working knowledge]|Expert）;和大致的學習曲線（假設您正在全職學習這些東西）達到所需的熟練程度。請注意，許多工具（例如代碼編輯器）可用於某些最低級別，學習曲線較少。

代碼編輯器

你將需要發展的第一件事情是一個很好的代碼編輯器。所有這些都是免費的（或者有免費或無限的評估版）。我一般用Visual Studio Code我的前端（瀏覽器/ JavaScript）的開發和Visual Studio 2017年/ Visual Studio代碼爲我的後端開發（服務器端的開發。）

除了核心應用程序，所有這些都豐富的社區插件庫。您需要熟悉可用的插件並選擇適合您的需求和興趣的插件。

• Visual Studio Code - http://code.visualstudio.com/ - 專家，1天
• Sublime Text 3 - https://www.sublimetext.com/3 - 專家，1天
• Atom - https://atom.io/ - 強，4小時
• Visual Studio 2017 - https://www.visualstudio.com/vs/community/ - 專家，1星期

Core Web Technologies

HTML 5 - Web的核心標記語言。網頁的結構在HTML中定義。這對我們將學習的其他東西至關重要。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 - 專家，1星期

Cascading Style Sheets (CSS) 3 - 雖然HTML定義網頁的結構，CSS限定主題或風格的元素的頁面的（例如顏色，排版，元件的間隔，等等）。 CSS提供了頁面的「外觀和感覺」。出於很多好的理由，結構和文體元素完全分開。 https://developer.mozilla.org/en-US/docs/Web/CSS，https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3 - 專家，2周

JavaScript/EcmaScript/ES5 - JavaScript是前端的主要開發語言 - 也就是說，瀏覽器。它處理網頁上的大部分「交互性」，但也提供了在後臺向服務器發送數據和從服務器接收數據的功能。 JavaScript是現代Web應用程序的基本組成部分。 - https://developer.mozilla.org/en-US/docs/Web/JavaScript，專家，1月

核心Web技術以及

雖然核心技術是任何Web開發項目必不可少的，他們根本沒有足夠的嚴謹的Web項目。已經在這些技術之上開發了許多框架和相關工具，以擴展其功能或簡化其實施。

Bootstrap 3/4 - Bootstrap是一個CSS框架，簡化主題網站，也使他們更標準。 CSS主題可能非常棘手和困難。但是，Bootstrap將大大加快您的發展。 Bootstrap的當前版本是3.版本4是alpha版本。我們將學習4版本，主要擴展（並進一步簡化3）。我們將學習Bootstrap 3也是因爲它有助於學習Bootstrap 4，大多數公司仍在使用它 - 因此您可能需要知道它。 http://getbootstrap.com/ - 專家，1周

Sass/SCSS/Syntactically Awesome Style Sheets - CSS可能會很棘手，麻煩，而且非常耗時。構建一個網站可能需要幾天甚至一週或更長的時間。這是充滿痛苦和淚水的時刻。 CSS中的大部分挫折來自不同瀏覽器實現（或未實現）標準的方式。 Sass被稱爲「CSS pre-processor」，有助於加速CSS的開發，並有助於填補供應商未能以標準方式實施的功能缺陷。 Sass（或其最新的SCSS實施）將最終成爲您值得信賴且深受喜愛的朋友。http://sass-lang.com/

Google Fonts - 排版可以使一個平庸的網站真正「流行」。 Google提供了許多免費的Web字體，可以在任何網站輕鬆使用。 https://fonts.google.com/ - 強，2小時

Font Awesome - Font Awesome提供了許多有用的和標準的圖標，可以包含在網站上。您幾乎可以在所有項目中使用Bootstrap，Google Fonts和Font Awesome。他們都很好地一起工作。 - http://fontawesome.io/ - 強烈，2小時

ES6/EcmaScript 6/ES 2015/EcmaScript 2015 - 普通老JavaScript（ES5）有一些嚴重的侷限性。該語言的新版本於2015年發佈，增加了一些非常需要的功能。不幸的是，並非所有瀏覽器都支持這個最新版本。幸運的是，有翻譯人員（稱爲轉譯員（例如Babel））可以讓我們編寫ES6代碼，然後將其翻譯回瀏覽器能夠理解的較早的JavaScript。我們一定會掌握JavaScript，ES6，和它的後繼者（TypeScript，如下所述。） - http://es6-features.org/ - 專家，2周

TypeScript - 儘管人們可以考慮ES6被周圍平原JavaScript的包裝，可提供額外的功能，TypeScript可以看作是圍繞ES6的封裝，其提供了不屬於ES6標準的更新的JavaScript功能。換句話說，TypeScript>ES6>JavaScript（ES5）。就像ES6，TypeScript可以翻譯（transpiled）回到ES6或ES5。 Angular 2使用TypeScript進行開發。掌握TypeScript不僅對其他Web開發是必要的，而且對於學習和掌握Angular 2也是必需的。注意：最終，TypeScript中的所有功能將使其進入瀏覽器（如ES6），並且不再需要傳輸步驟。 - 專家，2周

Babel - Babel是您將用於轉換或transpile ES6到普通的舊ES5 JavaScript的工具。該工具使用起來非常簡單。大多數情況下，這將在後臺爲您管理（通過您的構建系統 - Webpack或Gulp）。儘管如此，仍然需要具備該工具的基本工作知識。 - https://babeljs.io/ - 基本 - 4小時

(Google) Chrome Debugger或Safari Web Tools - 谷歌和Safari瀏覽器都是基於一個叫做Webkit瀏覽器引擎，都具備調試網頁至關重要（還有幾乎相同的）工具（https://webkit.org/）。你將需要絕對掌握Chrome Debugging tools，這是最終將繼續使用的事情。在開始熟悉這些工具之前，您會花一些時間，然後在您使用這些工具時進一步深入瞭解這些工具。 - https://developer.chrome.com/devtools - 第1天

Web框架

Angular 2 - 領先的由谷歌開發提供JavaScript框架 「現代Web應用程序。」 Angular 2是Web的未來。它快速而強大。Angular 2開發者也是極其需求並且很好（$$$）支付。這是我們將要學習的第一個框架，它的學習曲線相當陡峭。直到我們掌握了JavaScript,ES6和TypeScript，我們纔開始研究它。 - http://angular.io。 - 專家，1-2個月。

React - Facebook提供的開發「現代Web應用程序」的領先框架。坦率地說，我不是React的忠實粉絲，但很多開發人員都喜歡它。我認爲你絕對應該學習它，因爲1）有很多React工作，2）如果你已經瞭解Angular 2，學習React非常容易。它只是讓你更加適銷。 - http://www.typescriptlang.org/ - 專家，1個月。

除了核心「Angular 2」框架之外，還有至少三個其他補充「電動工具」，幫助您真正能夠充分發揮Angular 2的潛力。

Angular-Cli - Angular Command Line Interface (CLI)允許您快速生成樣板文件Angular 2並執行各種有用的任務。我發現這個工具是不可或缺的，它大大提高了我的生產力。 - https://cli.angular.io/ - 專家，1天

Angular Universal - Angular Universal是一種用於在服務器上而不是客戶端瀏覽器中生成/渲染元素Angular 2的工具。這可以大大縮短加載時間，使頁面更加適合搜索引擎。 Angular Universal是Search Engine Optimization（SEO）與Angular 2的關鍵組件。 - 強，1周

Reactive Extensions for JavaScript/RxJS - RxJS是一個爲構建現代Web應用程序提供核心功能的庫。它的基礎組件是一個名爲「observable」的實體。目前，Observables有點難以解釋，而不是說這個。一種Observable種類的「訂閱」一段數據，然後允許系統在數據改變時「做某事」。雖然這可能看起來微不足道，但事實並非如此。它打開了許多其他功能的大門。這是一個在Angular 2中使用的高級概念 - 我們將深入探討與學習該框架同時進行的一個概念。 - https://github.com/Reactive-Extensions/RxJS - 強，3天

核心工具

NodeJS - NodeJS是基於谷歌瀏覽器中發現的JavaScript引擎Javascript 「環境」。它允許您在Web瀏覽器之外運行JavaScript應用程序。我們將使用的大多數工具都以某種方式涉及NodeJS。最初，你只需要對NodeJS發展非常基本的熟悉，但是隨着時間的推移，你會很好地加深這種認識。 - https://nodejs.org/en/ - 基本，4小時

Node Package Manager/NPM - 該Node Package Manager（基於NodeJS）是我們用來下載我們的大多數其它軟件和庫的工具。我們在本文檔中列出的幾乎所有其他軟件包都使用NPM進行安裝。這是一個簡單但不可或缺的工具。https://www.npmjs.com/ - 基礎，4小時

任務運動員

正如ES6和TypeScript說明指出，經常有多個步驟，讓您的原始源代碼文件轉換成一種格式，他們可以部署到生產 - - 甚至在您的瀏覽器中運行/本地查看。要將ES6文件轉換成舊式ES5 JavaScript，您將使用Babel。要將您的TypeScript文件轉儲爲ES6或ES5，您將使用TypeScript compiler（tsc）。每次修改文件時，您都會希望執行這些翻譯。除了簡單編譯以外，通常還有許多其他任務要重複執行，例如將文件從源代碼目錄移動到PC上的「build」目錄（您將運行文件的目錄）。 Sass也會將您的SCSS文件轉換爲標準CSS文件。只要說，有很多重複的任務，你不會想手動。一個「任務跑步者」會爲你做。

我們將使用的兩個任務跑步者是Gulp和Grunt。 Gulp和Grunt允許您在一些「命令」中定義一系列任務，然後在有文件更改時自動爲您運行該命令（可選）。 Gulp是您將使用的主要任務跑步者。 Grunt是一種在路邊跌倒，但仍然在廣泛使用，你需要熟悉它。這些系統還有許多「插件」，您也將熟悉和使用這些系統。

Gulp - http://gulpjs.com/ - 專家，1天

Grunt - http://gruntjs.com/ - 強，4小時

構建系統

雖然Gulp和Grunt可以幫助您構建和部署Web站點/ Web應用程序還有兩個特別適合這項任務的系統。你最終需要對他們兩人非常熟悉。 Angular 2使用Webpack。

SystemJS - https://github.com/systemjs/systemjs - 專家，1天

Webpack - https://webpack.github.io/ - 專家，2天

Docker - 泊塢是用於包裝站點到容器和部署的部位作爲一個單元的技術。這是相對較新的，但整個市場正在轉向使用它。你會很好地知道它。 - https://www.docker.com/ - 工作，1天

源代碼版本控制和控制

Git - 在開發網站，您將需要能夠跟蹤你的變化和如果出現「可怕的回滾到以前的版本錯誤的「 - 它通常會這樣做。到目前爲止，Git是最流行的版本控制系統。此外，許多網站（如GitHub）允許您使用它從他們的網站下載軟件（稱爲知識庫）。您將需要非常熟悉Git。 - https://git-scm.com/ - 基本，4小時

的JavaScript測試工具

測試是任何開發的重要組成部分。它也恰好是最耗時的。您最終會熟悉許多不同的測試工具 - 所有這些測試工具的功能都略有不同。

Jasmine - JavaScript單元測試框架 - https://jasmine.github.io/ - 強，第1天

Karma - JavaScript測試運行 - https://karma-runner.github.io/1.0/index.html - 強，第1天

Protractor - 端到端（E2E）測試框架Angular - http://www.protractortest.org/ - 強，1天

Istanbul - 代碼覆蓋分析器JavaScript - https://github.com/gotwarlost/istanbul - 強，1天

.NET開發

一旦你掌握客戶端開發，你可以決定你想了解服務器端的開發，以及 - 或者你可能感覺舒服繼續專注於客戶。兩者都很好。爲了完整起見，以下是我通常用於服務器端開發的工具。

ASP.NET Core - 微軟在Windows，Linux和OS/X上運行的新的服務器端Web框架。該框架非常強大，性能卓越。 ASP.NET被許多企業用於開發核心業務線應用程序。例如，許多銀行使用ASP.NET或ASP.NET Core來開發互聯網銀行網站。 - https://www.asp.net/core

ASP.NET Identity - 這是用於處理用戶和帳戶管理的Microsoft庫。這實際上是任何Web應用程序中的大部分功能，並且具有許多非常複雜的部分。 ASP.NET Identity完成大部分繁重的工作，但也非常具有可擴展性。 - https://www.asp.net/identity

ASP.NET SignalR - SignalR允許客戶端（通常）和瀏覽器之間的實時通信 - 通常使用技術上稱爲Websockets。一些示例應用程序可能是實時聊天，大型多人在線遊戲或實時股票行情。 - https://www.asp.net/signalr

Entity Framework 7/Entity Framework Core - 編寫後端應用程序所需的大量工作與存儲和檢索數據庫中的數據有關。 Entity Framework提取了許多功能，並提供了一種更簡單的方式來存儲和檢索數據。 https://www.asp.net/entity-framework，https://github.com/aspnet/EntityFramework

Microsoft SQL Server - Microsoft的數據庫實現。 SQL Server適用於其他Microsoft工具。這很好，自1995年以來我一直在使用它的版本。但是，我有時使用MariaDB（https://mariadb.org/），並且已經考慮對某些未來項目使用PostgreSQL（https://www.postgresql.org/）或MongoDb（）。有一個可用於開發的免費版本SQL Server。所提到的所有其他數據庫平臺都已經是開源的。 - https://www.microsoft.com/en-us/sql-server/sql-server-2016

Redis - Redis是一款超高速的內存數據庫。大多數高端網站（包括Facebook）都使用它來進行數據緩存。使用Redis結合SQL Server或MariaDb可以大大提高網站的整體性能。

NUnit - NUnit是.NET的單元測試框架 - 我在後端使用。 https://www.nunit.org/

開發資源

有一些網站我定期訪問，以幫助我發展。最重要的網站是Stack Overflow，在幾乎所有的開發主題上都有超過1200萬的問題和答案。這是一個非常寶貴的資源，我每天都在使用它。你一定會想在那裏創建一個免費帳戶。我還經常訪問GitHub下載各種軟件，並使用Google查詢成千上萬個其他網站以獲取特定信息。

Stack Overflow - https://stackoverflow.com/

GitHub - https://github.com/