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/