SPA Asp.Net Core Architecture - asp.net

Question

I want to build web app with real time communications with other web app via WebSocket.
For making WS one connection it's better to build SPA app.
Unfortunattely Angular 2 + Asp.Net Core seems not to be clear and stable.
Furthermore I want to use Asp.Core libraries such as Identity
May be its better to use ViewComponents and reloads them according to WS messages without reloading View?
Any Idea about better app architecture?

Answer 1

Friend, you appear to be in way, way, way over your head. Let me just provide some very basic assistance to try and move you in the right direction.
If you are going to be using ASP.NET or ASP.NET CORE for real-time communications, you would likely use the ASP.NET SignalR library. SignalR (https://www.asp.net/signalr) supports Web Sockets but falls back to other techniques for older browsers which do not support them. It is very feature rich and integrates well with legacy ASP.NET or ASP.NET Core. (Microsoft provides versions for both.)
ASP.NET Core is stable now, but it is still not feature complete--particularly in regards to Entity Framework. However, for most green-field applications, that is to say, most new development, ASP.NET Core is a perfectly reasonable development choice. ASP.NET Core offers many great benefits--like the ability to deploy your .NET code on a Linux server. Application builds are much faster than legacy .NET (e.g. .NET 4.6).
Yes, ASP.NET Identity is a great choice for Identity Management (although I typically use IdentityServer4.) You will most certainly need to extend ASP.NET Identity to use it. (For example, most people extend AppUser with custom user properties. For a Single Page Application, you will probably also want to use JSON Web Tokens (JWT) (https://jwt.io/)). There are many other extensions to ASP.NET Identity you can (and probably will) make. They all require some basic familiarity with ASP.NET Identity's internal architecture. (I recommend the tutorials from Taiseer Joudeh. (http://bitoftech.net/category/asp-net-identity/) They are for ASP.NET 4.x but can be easily migrated to ASP.NET Core. The output of these tutorials can also form a really great foundation for your own identity system.
To develop a SPA (Single Page Application), you are going to want to use a front-end framework. By far, the two most popular frameworks are Google's Angular2 (http://angular.io) and Facebook's React (https://facebook.github.io/react/).
Based on what I am gathering from your post, you may not have much experience in these technologies. ASP.NET Core, SignalR, the (necessary) extension of ASP.NET Identity, Angular2/React, all have significant learning curves. By significant, I really mean SIGNIFICANT--which you can measure in months.
You will need to be familiar with Gulp to use as a Task runner under ASP.NET Core. I recommend using Visual Studio 2015 or Visual Studio 2017 for ASP.NET Core development. You can also get by quite nicely with Visual Studio Code.
Beyond that, there are a whole host of other tools you need to be familiar with to effectively develop for these platforms--particularly on the front-end.
For example, to do effective Angular2 development (which is my recommendation for SPA front ends), you are going are really going to need to know or be able to use all of the following: Git, ES6, TypeScript, RxJS, JSON, Node, NPM, angular-cli, Jasmine, Karma, Protractor, CSS, Sass/SCSS, Bootstrap or Angular Material, Webpack, Angular Universal, etc. There are actually quite a few other tools/libraries you will want to utilize, but this will give you a good enough starting point.
On the client front end, you will most assuredly not want want to use Visual Studio. It is a real pain to set up for front-end JavaScript development. (The Angular2 setup for Visual Studio 2015/2017 is a bear.) You will probably use Visual Studio Code, Sublime Text, Atom, or Webstorm.
Most organizations employ an entire team of people to work on SPA apps. Some of the team members may include the following: Graphic Designer, CSS Themer, Front-End Javascript Developer, Back-End Server Developer, DBA/Data Architect, Requirements Analyst, Build/Testing Specialist, Tester, Network Administrator, and Project Manager. Of course, in many projects, one person may fill multiple roles--or people may share roles. The key point is that SPA projects are complex enough that most projects have at least 2-3 team members--and often more. Even then, very experienced folks can still struggle to get those apps into production.
One question that I would also ask you is, "Do you really need a Single Page Application?" SPAs are great--really great! However, they require significantly more knowledge to develop and have much more complexity than other applications. If there is a good use case for developing an SPA, then more power to you. If not, then you might consider stepping back and doing something a little less ambitious until you get a better handle on what is possible.
I am not saying all of this to discourage you. I am simply trying to paint a realistic picture of what you need to be able to actually build and deploy a production SPA. I want you to know what you are getting yourself into and have somewhat of a guided path to success.
Good luck out there, my friend!
Update: Added more detail on my current tool-set from a letter to a friend.
I have a good friend who is wanting to become a Web developer. I recently laid out a road map to assist him in his studies. I am simply copying and pasting that road map (and my letter to him) here to provide some additional details on the tools that I use (and mentioned above) along with some hint on the relative effort required to use them. He is just starting out so my descriptions of the tools are relatively non-technical. These are merely the ones I use, so please don't flame me if I left out your favorites.
...I wanted to go ahead and offer you a roadmap of where we are going by giving you a preview of the tools that I actually am using right now in my "development stack." (A "development stack" is the list of tools a person uses to code, build, and deploy projects.) Eventually, you will probably be using most of these tools (with the possible exception of some of the back-end development tools) or others that come after and replace them. This "stack" represents the tools that many of he top developers tend to use--although every developer has his own favorites. If you are going to jump head-first into this Web development career, then I am assuming you are going to want to be the best--because that is where the most rewarding projects are to be found--and the most lucrative ones as well.
As you read this list, you will probably be a bit overwhelmed by the sheer number of tools. I do this everyday, and I am still a bit overwhelmed by it. First, let me say that I do not necessarily use every tool everyday, but I do use every one of these tools sometimes. They are all indispensable to have in your arsenal. Second, let me also say that I am not an expert in every tool. You won't need to be either. There will be some tools that you absolutely master, some tools for which you need a very strong working knowledge, and some tools you just need the basics to get you by.
As we go forward, I am going to help you move in a very organized way of learning these tools. There are thousands of tools out there--many of which are useless or inferior. Knowing which tools you actually need will help focus you and prevent a lot of wasted time as you learn and grow. Beyond that, I will help you to get acquire the right knowledge in the right order to make the learning process as efficient and comfortable as possible.
It is perfectly fine for you to go ahead and begin to get familiar with some of these tools on your own. If you visit a site page and it all looks like gibberish now, don't worry about it. In a short while, it will all begin to make sense.
One thing I would note is that new tools are being introduced everyday. The technology is constantly evolving. I fully expect that, by the time you reach a moderate level of proficiency (some months from now), some of these tools may have begun to fade or even have been replaced entirely by others. Regardless, having learned the current incarnation of a tool will allow you to easily master the replacement tool.
I have categorized the tools in a somewhat logical order and provided a description for each tool; a link to a website; the required mastery level (Basic [working knowledge]|Strong [working knowledge]|Expert); and the approximate learning curve (assuming you were studying these things full time) to reach the required level of proficiency. Please note that many of the tools (e.g. code editors) can be used to some minimum level with a much lesser learning curve.
Code Editors
The first thing you are going to need for development is a good code editor. All of these are free (or have free or unlimited evaluation editions). I generally use Visual Studio Code for my front-end (Browser / JavaScript) development and Visual Studio 2017/Visual Studio Code for my back-end development (server side development.)
In addition to the core application, all of these have extensive libraries of community plugins. You will want to familiarize yourself with the available plugins and choose the ones which suit your needs and interests.
Visual Studio Code - http://code.visualstudio.com/ - Expert, 1 Day
Sublime Text 3 - https://www.sublimetext.com/3 - Expert, 1 Day
Atom - https://atom.io/ - Strong, 4 Hours
Visual Studio 2017 - https://www.visualstudio.com/vs/community/ - Expert, 1 Week
Core Web Technologies
HTML 5 - The core markup language of the Web. The structure of of Web page is defined in HTML. This is fundamental to everything else we will learn. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 - Expert, 1 Week
Cascading Style Sheets (CSS) 3 - While HTML defines the structure of Web pages, CSS defines the thematic or stylistic elements (e.g. color, typographic, spacing of elements, etc.) of a page. CSS provides the "look and feel" of a page. For many good reasons, the structual and stylistic elements are kept entirely separate. https://developer.mozilla.org/en-US/docs/Web/CSS, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3 - Expert, 2 Weeks
JavaScript / EcmaScript / ES5 - JavaScript is the primary development language for the front-end--that is, to say, the browser. It handles much of the "interactivity" on a Web page but also provides functionality for sending data to and receiving data from the server in the background. JavaScript is the essential ingredient in modern Web applications. - https://developer.mozilla.org/en-US/docs/Web/JavaScript, Expert, 1 Month
Core Web Technologies Plus
While the core technologies are essential for any Web development project, they are simply not enough for serious Web projects. A number of frameworks and related tools have been developed on top of these technologies to either extend their capabilities or simplify their implementation.
Bootstrap 3/4 - Bootstrap is a CSS framework that simplfies theming sites and also makes them much more standard. CSS theming can be very tricky and difficult. However, Bootstrap will greatly speed your development. The current version of Bootstrap is 3. Version 4 is in alpha. We will learn both as version 4 primarily extends (and further simplifies 3.) We will learn Bootstrap 3 also because it is helpful in learning Bootstrap 4 and most companies are still using it--so you will probably need to know it. http://getbootstrap.com/ - Expert, 1 Week
Sass / SCSS / Syntactically Awesome Style Sheets - CSS can be tricky, cumbersome, and very time consuming. Theming a website can take days or even a week or more. This is time that can be filled with much pain and many tears. Most of the frustrations in CSS come from the way different browsers implement (or fail to implement) the standards. Sass is known as a "CSS pre-processor" and helps to speed CSS development and also helps to fill in the gaps for functionality vendors failed to implement in a standard way. Sass (or its latest SCSS implementation) will eventually become your trusted and well-loved friend. http://sass-lang.com/
Google Fonts - Typography can make a mediocre Website really "pop." Google provides many free Web fonts that can be used easily in any site. https://fonts.google.com/ - Strong, 2 Hours
Font Awesome - Font Awesome provides many useful and standard icons which can be included on websites. You will make use of Bootstrap, Google Fonts, and Font Awesome in almost all your projects. They all work well together. - http://fontawesome.io/ - Strong, 2 Hours
ES6 / EcmaScript 6 / ES 2015 / EcmaScript 2015 - Plain old JavaScript (ES5) has some serious limitations. A newer version of the language was released in 2015 which adds some much needed functionality. Unfortunately, not all browsers support this latest version. Fortunately, there are translators (called transpilers (e.g. Babel)) which can allow us to write ES6 code and then translate it back into the older JavaScript that browsers understand. We will definitely be mastering JavaScript, ES6, and its successor (TypeScript, described below.) - http://es6-features.org/ - Expert, 2 Weeks
TypeScript - While one could consider ES6 to be a wrapper around plain JavaScript that provides additional functionalities, TypeScript can be viewed as a wrapper around ES6 which provides newer JavaScript functionality which was not part of the ES6 standard. In other words, TypeScript > ES6 > JavaScript (ES5). Just like with ES6, TypeScript can be translated (transpiled) back into either ES6 or ES5. Angular 2 uses TypeScript for its development. A mastery of TypeScript will not only be necessary for other Web development, but it is also necessary for learning and mastering Angular 2. NOTE: Eventually, all of functionality in TypeScript will make it's way into the browser (as will ES6) and the transpilation step will no longer be required. - Expert, 2 Weeks
Babel - Babel is the tool you will use to tranform or transpile ES6 to plain old ES5 JavaScript. The tool is very simple to use. Most of the time, this will be managed for you in the background (by your build system - Webpack or Gulp). Still, it is necessary to have a basic working knowledge of the tool. - https://babeljs.io/ - Basic - 4 Hours
(Google) Chrome Debugger OR Safari Web Tools - Both Google and Safari are based on a browser engine called Webkit (https://webkit.org/.) Both include essential (and almost identical) tools for debugging Web pages. You will need to absolutely master the Chrome Debugging tools, and this is something that will eventually happen with continued use. You'll spend some time initially getting familiar with these tools and will then proceed to a deeper more intimate knowledge of them as you use them. - https://developer.chrome.com/devtools - 1 Day
Web Frameworks
Angular 2 - Leading JavaScript framework provided by Google for developing "modern Web applications." Angular 2 is very much the future of the Web. It is fast and powerful. Angular 2 developers are also in extreme demand and are very well ($$$) paid. This is the first framework we will learn, and it has a fairly steep learning curve. We won't even begin to study it until we have a near mastery of JavaScript, ES6,and TypeScript. - http://angular.io. - Expert, 1-2 Months.
React - Leading framework provided by Facebook for developing "modern Web applications." Frankly, I am not a huge fan of React, but many developers love it. I think you definitely should learn it because 1) there are many React jobs, and 2) learning React is very easy if you already know Angular 2. It just makes you much more marketable. - http://www.typescriptlang.org/ - Expert, 1 Month.
In addition to just the core "Angular 2" framework, there are at least three other supplemental "power tools" you will need that help you to really be able to take Angular 2 to its full potential.
Angular-Cli - The Angular Command Line Interface (CLI) allows you to quickly generate boilerplate Angular 2 code files and perform a variety of useful tasks. I have found this tool to be indispensible, and it greatly enhances my productivity. - https://cli.angular.io/ - Expert, 1 Day
Angular Universal - Angular Universal is a tool for generating/rendering elements of Angular 2 on the server rather than in the client's browser. This can dramatically improve load times and making the page more search-engine friendly. Angular Universal is a key component of Search Engine Optimization (SEO) with Angular 2. - Strong, 1 Week
Reactive Extensions for JavaScript / RxJS - RxJS is a library that provides core functionality for building modern Web applications. It's foundation component is an entity called an "observable." For the moment, Observables would be bit challenging to explain other than to say this. An Observable kind of "subscribes" to a piece of data and then allows the system to "do something" when that data changes. While this may seem trivial, it is not. It opens the door to much other functionality. This is an advanced concept used in Angular 2--and one we will explore deeply concurrent with learning that framework. - https://github.com/Reactive-Extensions/RxJS - Strong, 3 Days
Core Tools
NodeJS - NodeJS is a Javascript "environment" based on the JavaScript engine found in Google Chrome. It allows you to run JavaScript applications outside of a Web browser. Most of the tools we will use involve NodeJS in one way or another. Initially, you will just need to develop a very basic familiarity with NodeJS, but you would be well served to deepen this knowledge over time. - https://nodejs.org/en/ - Basic, 4 Hours
Node Package Manager / NPM - The Node Package Manager (based on NodeJS) is the tool we use to download most of our other software and libraries. Almost every other package we have listed in this document is installed using NPM. It is a simple but indispensable tool. https://www.npmjs.com/ - Basic, 4 Hours
Task Runners
As noted in the ES6 and TypeScript descriptions, there are often multiple steps to get your original source code files into a format where they can be deployed into production--or even run/viewed locally in your browser. To get your ES6 files into old-style ES5 JavaScript, you will use Babel. To transpile your TypeScript files into ES6 or ES5, you will use the TypeScript compiler (tsc). You will want to perform these translations every time you modify a file. Beyond simply compiling, there are often many other tasks you will repetitively perform such as moving files from your source code directory to your "build" directory (the directory where you will run the files) on your PC. Sass also will be converting your SCSS files to standard CSS files. Suffice it to say, there are many repetitive tasks that you will not want to do manually. A "task runner" will do them for you.
Two task runners we will use are Gulp and Grunt. Gulp and Grunt allow you to define a series of tasks into some "command" and then have that command (optionally) run automatically for you whenever there are file changes. Gulp is the primary task runner you will use. Grunt is kind of falling by the wayside but is still in widespread enough use that you will need to be familiar with it. There are also many "plugins" for these systems you will also become familiar with and use.
Gulp - http://gulpjs.com/ - Expert, 1 Day
Grunt - http://gruntjs.com/ - Strong, 4 Hours
Build Systems
While Gulp and Grunt can help you build and deploy your Web sites / Web applications, there are two other systems which are particularly suited to this task. You will eventually need to become very familiar with both of them. Angular 2 uses Webpack.
SystemJS - https://github.com/systemjs/systemjs - Expert, 1 Day
Webpack - https://webpack.github.io/ - Expert, 2 Days
Docker - Docker is technology used for packing sites into containers and deploying the site as a unit. It is relatively new, but the entire market is moving to use it. You will be well served to know it. - https://www.docker.com/ - Working, 1 Day
Source Code Versioning and Control
Git - When developing websites, you will need to be able to track your changes and roll back to a previous version if something goes "horribly wrong"--which it often will. Git is, by far, the most popular version control system. Also, many websites (like GitHub) allow you to use it to pull down software from their sites (called repositories.) You will want to be very familiar with Git. - https://git-scm.com/ - Basic, 4 Hours
JavaScript Testing Tools
Testing is a critical part of any development. It also happens to be one of the most time consuming. You will eventually get familiar with a number of different test tools--all of which perform slightly different functions.
Jasmine - JavaScript Unit Test Framework - https://jasmine.github.io/ - Strong, 1 Day
Karma - JavaScript Test Runner - https://karma-runner.github.io/1.0/index.html - Strong, 1 Day
Protractor - End to end (e2e) test Framework for Angular - http://www.protractortest.org/ - Strong, 1 Day
Istanbul - Code coverage analyzer for JavaScript - https://github.com/gotwarlost/istanbul - Strong, 1 Day
.NET Development
Once you master client-side development, you may decide you want to learn server-side development as well--or you may feel perfectly comfortable continuing to focus on the client. Either is fine. Just for the sake of completeness, here are the tools I genereally use for server-side development.
ASP.NET Core - Microsoft's new server-side web framework which runs on Windows, Linux, and OS/X. The framework is very robust and highly performant. ASP.NET is used by many businesses for developing core line-of-business applications. For example, many banks use ASP.NET or ASP.NET Core to develop Internet banking websites. - https://www.asp.net/core
ASP.NET Identity - This is the Microsoft library for handling user and account management. This is actually a large part of the functionality in any Web application and has a number of very complicated pieces. ASP.NET Identity does most of the heavy lifting but is also very extensible. - https://www.asp.net/identity
ASP.NET SignalR - SignalR allows for real-time communications between a client (typically) and a browser--generally using a technologically called Websockets. Some example applications might be real-time chat, massively multiplayer online games, or a real-time stock ticker. - https://www.asp.net/signalr
Entity Framework 7 / Entity Framework Core - Much of the effort required to code back-end applications relates to storing and retrieving data from a database. Entity Framework abstracts much of that functionality and provides a much simpler way to store and retrieve data. https://www.asp.net/entity-framework, https://github.com/aspnet/EntityFramework
Microsoft SQL Server - Microsoft's database implementation. SQL Server works well with other Microsoft tools. It is great, and I have been using versions of it since 1995. However, I sometimes use MariaDB (https://mariadb.org/) and have been considering using PostgreSQL (https://www.postgresql.org/) or MongoDb (https://www.mongodb.com/) for some future projects. There is a free version of SQL Server available for development. All of the other database platforms mentioned are already open source. - https://www.microsoft.com/en-us/sql-server/sql-server-2016
Redis - Redis is a super-fast in-memory database. It is used by most of the high-end websites (including Facebook) for data-caching. Use of Redis in conjunction with SQL Server or MariaDb can greatly improve the overall performance of a website.
NUnit - NUnit is a unit test framework for .NET--which I used on the back-end. https://www.nunit.org/
Development Resources
There are a number of websites I access on a regular basis to assist me with development. The most important site is Stack Overflow which has over 12 million questions and answers on almost any development topic. It is an invaluable resource, and I use it every day. You will definitely want to create a free account there. I also frequently access GitHub to download various software and use Google to query thousands of other sites for specific information.
Stack Overflow - https://stackoverflow.com/
GitHub - https://github.com/