ASP.NET MVC (Razor) vs Angular 5

Question

We are currently considering moving from ASP.NET MVC to Angular 5, mostly because it seems like the best and latest framework. However none of us seems to be able to come up with hard reasons on why Angular is better than MVC (Razor).

SPA vs MPA seems like different approaches with neither really being better - just better at different things.

Are there any resources/comparisons with hard benefits between the two?

Update: Almost 2 years after moving to Angular 4 (currently 7) I can say that it was a great decision. Angular makes it super easy to write quite complex front-end applications and the tooling around Angular itself, TypeScript, Karma + Jasmine (unit test frameworks) is fantastic. SPA is a huge step ahead of MPA in my opinion - we can finally have fluid web experience. I never really liked Razor and the whole mess around ajax/jquery, but I can comfortably say that I am really enjoying my time now! .NET CORE 3 + Angular 7 gives us everything we need!

To anyone thinking of taking the plunge, I would strongly recommend Angular (might as well start with 8 or 9, which is current at the time of writing this).

Happy to add more details if people want them :)

Solution 1

6 months on from moving from ASP.NET MVC to Angular 5 (now 6) and we are extremely happy with the decision. .NET core backend and Angular frontend is a fantastic combination. It is so much cleaner and easier to create re-usable, strongly-typed, testable and easy to modify UI components!

For anyone considering if it's worth taking the plunge - I would say a resounding 'yes'!

Solution 2

I don't have enough points to make a comment but thought the following might help you in making a decision.

Just to note that if you use Angular CLI (The default Angular project in Visual Studio) you will lose the ability to use razor within the HTML. Something you was able to do before Angular CLI.

I do like using Angular but miss having Razor to omit certain parts of the HTML, for example, if the user didn't have the necessary roles or permissions:

@if(User.IsInRole("Admin"))
{

}

You can hide the HTML using Angular of course, but having it completely removed from the HTML itself is preferable in my opinion.

Solution 3

What I did found out about Angular vs MVC (Razor), I can work with both :-)

• Authorization: One thing to make sure is that you don't have complex authorization schemes. On the backend its easy to do your authorization on pages with Razor (even more with Core). Its more difficult to handle authorization with Angular because you will have to do it (and keep in sync) on both sides: client and server. Example: One thing you want is hide everything a user is not allowed to do. If you have a simple webapp and use a Masterpage: show only the menu items a user is allowed to see. Thats a very easy task to do in Razor. It takes more time/effort to implement this in Angular.

• Templates: Razor is extremely easy to use with templates. If you develop a website that must be used a number of times but with different layouts that can be done very easily with Razor.

• Maintenance: With MVC you have one application. The frontend and backend are one. For maintenance you will have a Angular frontend and X Backend, so two. That seems more costly from installation, maintenance, etc. point. If you have a simple application I would say KISS: Keep It Simple Suckers.

• One: In MVC the frontend and backend belong together. That can be good or bad. If you have one application with no dependencies on other things I think MVC is a good choice.

• Future proof: Angular is NO W3C and NOT baked in the browser. Because of Future proof solutions there is a strong interest in Vanilla Javascript together with Web Components. With MVC you can use this technology. Read about Microsoft FAST Design. It works great with MVC.

• SPA/MPA: Thats not a point anymore. An MPA can also be flicker-free with libraries like PJAX etc.

• Speed: With MVC no wait time because Shit has to be loaded. Enough bad Angular websites already exists because loading takes ages.

• ...: After working with Angular 9 I don't get the point of Angular. I don't know why you should go from MVC to Angular. Visual Studio has great support for MVC and is much better as VS Code. From productivity point I can produce much faster code with MVC as with Angular. If you have multiple front ends that must connect to the same backend may be then I can see the point. But even then MVC can be moduled and even can dynamically load them.

Solution 4

I vote for an ASP.Net MVC Web Application in the cloud [Core or whichever] , and use of razor pages as needed. That is it. Case closed.

Even if the whole world runs after Angular , Aurelia, React, Node, Strawberry, Pistachio, butterscotch JS, I will not.

After all, JavaScript is spagetti and Angular is the Flying Spagetti Monster

based on personal experience and intuitive take.

Now please don't get started about mouse hover over page areas,

Solution 5

One thing that I learnt during the comparison of MVC and Angular, among various factors, is that hosting MVC application requires a compute power container like Azure Web App, docker etc, while an Angular App can be deployed in any storage like Blob, CDN etc. When Angular is built, it gives a collection of javascript files, which are perfect candidate for storage container. They do not need compute power at all, which are the most costly resource in cloud world. CDN or Blob exposes Rest API endpoint to any of its underlying resource. So, the Angular will also be exposed as an API, which is all we want.

However, angular alone will not generate dynamic web pages. We need Web-Api at back-end to give the data. This can be achieved by a server-less solution (Function Apps, Logic Apps etc) or by containerization (Docker).

One downside that I personally found that the first time load of the Page in Angular is bit slow. After that it is really smooth.

All in all, I will vote for Angular/React and .Net Core in my future Web projects.

View more solutions

Comments

[Ramesh Rajendran]

Possible duplicate of ASP.NET MVC Razor view vs AngularJS

[Marco]

Razor is just a view engine, which you can replace, if you so desire. Angular is a javascript framework. You can use Angular on top of Razor. You do not have to decide between the two. Eventually it all comes down to a) what is required by your specification and b) allowed by your budget.

[Artur Kędzior]

Just adding my two cents: with SPA you usually use thin API so your server does less work because it doesn't have to render html and therefore uses less bandwidth.

[Arikael]

we used both and made the transition to Angular + Web API (from pure .NET MVC). One thing you have to keep in mind. Coming from a C# (MVC) background Angular has steep learning curve. Add RxJS to that mix and it gets even steeper. And depending on your JS knowledge: C# and JS are just different and you have to learn this differences

[Ross]

Good point. We are not using the .Net Angular project template, which we found confusing and unnecessarily complex. We split the two projects completely and have them in separate folders, which makes it easier to track changes/etc. I do agree that this sort of feature is nice in Razor and that there's a bit more work in angular to do that. At the end of the day - user role checking/protection ends up in the API, which should be the ultimate judge on what a user can and cannot do

[Andrew]

Certainly Ross for sure, checking security/permissions on the server side is an absolute must. I don't have enough points to make a comment on your final answer below, but thought you might be interested in the following tool we like to use called Typewriter. We like to use it to auto generate our Typescript dtos we use in Angular. The dtos are based off of our c# models. Very handy and saves a lot of time. marketplace.visualstudio.com/items?itemName=frhagn.Typewrite‌​r

[Stinky Towel]

it's been a year now, still happy with the decision? We're contemplating the same move you made a year ago.

[Ross]

Yep - super happy with the move. Even more so now than 6 months ago. Angular 6+ is fantastic. Dotnet core + Angular 2+ is a fantastic combination!

[Codebling]

This is more of a rant than an answer.

[Yasser Jarouf]

I understand your frustration. I do personally prefer controlling the output of my HTML using Razor. It's all about the actual application and architecture.

[Herman Van Der Blom]

May be its rant but I like the Flying Spagetti Monster phrase :-). By the way Javascript is not Spagetti anymore. It has Classes. Put everything in those classes and you will be fine :-)

[Ross]

Really good points! Thanks for sharing!