Angular and .NET

UPDATE: That article on SitePoint was finally published, go there to see the two in action!

AngularJS and .NET seem to work great when used together. At first this type of technology arrangement may seem like overkill to .NET developers or perhaps .NET is not "cool" enough to Angular Developers. However, I would like to convince you that in fact pairing up AngularJS to .NET is a very good idea.

Back at my old employer, SunGard, we often spoke about "marrying up" a business analyst and a software engineer. The two compliment each other so well and rarely get in each other's way. The understanding of finance, brought in by a business analyst, would ensure the code that was developed by the engineer hit the mark. This idea isn't new, but it's rare to find one business analyst per engineer on a project. Most companies and people belive this to be counterintuitive and wasteful. This model, in fact, was so successful that our group at SunGard had an extremely great track record of delivering in an industry that is rife with failed projects. I was very fortunate to have been a part of that team. I think in alot of ways joining up Angular and .NET seems counterintuitive, I know it did to me in the beginning.

More recently, however, I have been utterly amazed how two, seemingly very different things, can compliment each other so well. I started building some side projects in Angular in an attempt to eat my own dog food; "All software engineers should learn JavaScript". One of these projects I am working on will be open sourced and available soon as a tutorial on SitePoint.

Live Demo of This in Action!

Here is a sneak-peek at the app I am building as a tutorial for SitePoint.com which should be published soon with all the source code. (Yes this data is really coming from the server through the SignalR and being consumed by Angular, still an early build though.)

Real time

Server in .NET

In the same way that a business analyst would compliment an engineer I think AngularJS compliments .NET and C#. There are several reasons for this, some of which are extremely obvious, but I will mention anyway, and some are not so obvious that you only find when working with the two.

Why should Angular marry .NET?

With the advent of the Micro Service and the idea that code is debt, it is obvious that the huge monolithic code bases of yesterday have to go. C# and .NET have come a long way forward to help support this Micro Service architecture through Web Api 2.0+ and SignalR.

In the Windows server world, you will be hard pressed to find a better technology than .NET for development. This is because the framework is highly evolved and has constantly adapted to the latest trends and is proven enterprise grade. I am very fond of Java and the JVM languages because of their low cost to get started, but they are far behind and adding features now that .NET has had for years.

With Web Api and the SignalR libraries .NET 4.5 has really pushed the envelope for both easy to build and easy to maintain server side RESTful APIs and non-blocking asynchronous real time services.

While Google Go and NodeJS may very much be pioneers of the small code base that you don't have to feel bad about throwing away later on. Many people dont realize that C# and .Net have made great strides towards this Micro Service model especially with .NET 4.5. Both Go and Node are great, but they lack the library maturity, tooling, and deep OS integration that .NET commands on the Windows side.

In short, if you are going to build cross platform modern client side applications using AngularJS and host your Micro Services on a Windows server in house or on a Azure cloud instance, then it is going to be hard to find a better technology than .NET to pair up with AngularJS.

All well and good but why should .NET marry Angular?

It is true that .NET really shines brightly in the Windows server space. It is also just as true that you can have client side .NET applications fairly easily through WPF or Winforms. However, those technologies are reliant on the framework being installed and present on the client, which most mobile and web first devices just don't have support for. Angular on the other hand relies on HTML 5 and JavaScript being present, which basically means it runs on anything with a browser.

You might be saying, we have ASP.NET MVC 5! Well we do but that is primarily a server side first technology. ASP.NET is great for web applications it is lacking for client side applications. Since the server does all the lifting there is no single page application support. ASP.NET has no way of being wrapped into a good looking mobile app and because of that it is inadequate for the type of applications that today's world demands.

AngularJS, on the other hand, is completly reliant on client machines. This means that it can be easily wrapped using PhoneGap, Cordova, and Node WebKit. Then subsequently deployed to many mobile operating systems, like Android and iOS. AngularJS is giving us what .NET and Java promised years ago but never delivered; true cross platform support.

AngularJS can easily be developed in Visual Studio and can provide all kinds of bindings to .NET Micro Services. AngularJS provides flexibility of use with ASP.NET, one can chose to do the routing in Angular or in ASP.NET controllers. So you can use as much or as little as you want of either.

The feature list for Angular is amazingly large. Two way data binding which works like magic, directives, etc. For a more concise perspective on why AngularJS is great head over to SitePoint.com and read "Why I Love AngularJS and You Should Too".

The other not so obvious benefits of this relationship.

Angular forces great application development practices right out of the box. Everything is injected in, which means there is low coupling of dependencies. Additionally angular has great separation between views, models, and controllers.

It can be said that WPF or even ASP.NET can use dependency injection or allow you to structure you're code in a MVVM, MVC fashion. However, this is not strictly enforced and new comers often ignore it. Angular compliments .NET here by allowing the server side code to remain small, manageable, and testable. The server side code is leveraged solely for its strengths, which is to do the heavy lifting. The client code is enforcing best practices and also allows for very easy testing through some great unit test frameworks.

With .NET 4.5, through the newly open sourced Web Api 2.0+ and Signalr 2.0+ frameworks, it is extremely easy to build powerful scalable restful Apis. Gone are the days of the configuration heavy WCF. Now to build a RESTful API, you import a library from Nuget and your on your way. This is powerful because you can have a service up and running quickly and it seems to me, in my experience so far, that AngularJs loves RESTful APIs. Binding to Web Api end points in Angular is extremely easy and pain free.

In short We should marry the two because:

  • AngularJS is definitly the best client side technology I have used so far.

  • .NET is, arguably, the best server side technology out there.

  • These two technologie work very well together and never step on each other's toes (Much like the business analyst and software engineer).

Some great resources to get you started.

Using Angular, as a .NET engineer, will allow you to learn the right way to use JavaScript. Which has gained lots and lots of steam in industry since 2009. Likewise leveraging these two technologies together will ensure you are building modern applications, using modern paradigms and tooling. This technology stack allows you to build applications and User Interfaces for many different platforms and Micro Services that are easy to maintain.

I am not saying this type of arrangement is the best architecture for all applications that we build. I am a strong proponent of using the best tools for the job. With that being said, I think this architecture works wonders for the vast majority of the applications we build.

As always if you like the post feel free to subscribe to the mailing list below or follow me on twitter.

Spread the word