Skip to content

.NET Single Page Applications (SPA): Helpful Info Sources

July 27, 2013

During the past 4 weeks I’ve been increasingly exploring Single Page Applications (SPAs) in .NET.  Up until last week all of my exploration was reading blogs and other online sources about what an SPA is, and the various architectures and software packages used to build them.  Last week I downloaded the .NET MVC4 SPA Angular/Breeze Visual Studio project template.  It contains an example of an SPA, and I went through a minutely detailed code walk through for a couple days, looking at every part of the example’s code.  I was guided by the excellent tutorial line on the Microsoft download page for this template (listed below).

Before I share the best online SPA info sources I’ve found, it is worthwhile to view the rapid rise of SPAs over the past 18 months.  It will give you a sense of the role SPAs will play in the next few years.

In the last 5 years or so the popularity of Silverlight and Flash has demonstrated the strong, wide demand for Rich Internet Applications (RIAs).  Silverlight was also popular with developers and software production companies to build RIAs with since it easily supports a strong separation of concerns with the MVVM pattern, Dependency Injection/Ioc, Repositories, and more.  A strong separation of concerns means software is less expensive to develop and thoroughly test, and less expensive to extend in the future.  Mind you, on average the post-initial-release maintenance and extension work consists of about 60% of the Total Cost of Ownership to a software producer.  Not small potatoes!  For the source of this 60% number, please see my article about cost of ownership at  https://dotnetsilverlightprism.wordpress.com/2012/02/19/the-relationship-between-software-structure-and-the-softwares-value-to-a-business/

In fall of 2011, as part of its initiative for Windows 8 and WinRT, Microsoft announced that it would no longer release subsequent upgrades of Silverlight beyond the just-released version 5.  And, Microsoft would continue to support Silverlight for 10 years.  The result of this announcement was 1) Many software development organizations re-examined their RIA strategies and moved away from Silverlight to the HTML5/JavaScript technologies Microsoft was now touting for RIAs, and 2) Many developers who had lead the move into Silverlight for RIA development moved away to other technologies as well – many to the HTML5/JavaScript technologies.

The below charts (reproduced with permission from Indeed.com) show the fall of Silverlight and rise of HTML5, expressed as the number of jobs on Indeed containing either “Silverlight” or “HTML5 and .NET” in the job description text, as a percentage of all jobs on Indeed at the time.  The trends are very clear.

Software developers are very inventive.  Given the continued strong demand for Rich Internet Applications, and the difficulties of working with raw HTML5/Javascript/jQuery to develop RIAs, people started developing more and more JavaScript libraries that made the development of RIAs in this medium easier, with better separation of concerns, and better testability. An early example of one of these libraries is KnockOut, which brings the popular and useful MVVM pattern to JavaScript clients.  Now, 18 months since the fall of Silverlight began, a plethora of such JavaScript libraries has been developed.  Below are the Indeed charts for several of them.

The rate of increase looks very similar to that of Silverlight during its steepest ascent.

Now enter the “Single Page Application”. An SPA is built using these kinds of JavaScript libraries (Please see the below Wikipedia link for a clear definition of what an SPA is).  Today, some SPAs are beginning to look more and more like a Silverlight-type smart client app in terms of their internal software structure and separation of concerns.  This is especially true for SPAs utilizing the Breeze library (for client side data caching and data management) and the Angular library (for a strong separation of concerns, including completely relieving the client JavaScript code from having to manipulate the DOM.  Rather simple Angular abstractions are manipulated by JavaScript to cause changes to the View).

By way of summary, within the period of 18 months there has been a flurry of innovation in the HTML5/JavaScript arena.  It has produced some very promising technologies in terms of being able to support rich, engaging user experiences in web browsers, while also supporting high productivity software development techniques.  This makes the future of web apps in general, and SPAs in particular, look quite promising.

I found the following info sources to be very helpful in learning about what SPAs are, and the characteristics of the various JavaScript libraries they are built with.

What is an SPA?

1.  http://en.wikipedia.org/wiki/Single_page_application

What is the architecture of an SPA and the JavaScript libraries they are built with?  Note that SPAs are sometimes referred to as being in the MV* (MV Star) category.

1.  http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/

2.  http://todomvc.com/

3.  The venerable http://knockoutjs.com/

What are some of the JavaScript libraries with exceptional separation of concerns?

1.  http://angularjs.org/

and http://docs.angularjs.org/guide/overview

and http://docs.angularjs.org/guide/concepts

2.  http://www.breezejs.com/

and http://www.breezejs.com/documentation/introduction

Where can I get .NET MVC4 Visual Studio project templates for SPAs?

1.  http://www.asp.net/single-page-application/overview/introduction/other-libraries

2.  The template for Angular/Breeze has a deep tutorial for the example app that comes with the template.  The template is here: http://www.asp.net/single-page-application/overview/templates/breezeangular-template

Here is the link to the deep tutorial.  http://www.breezejs.com/ng-spa-template?utm_source=ms-spa

How does Microsoft’s TypeScript fit in with SPAs and these kind of JavaScript libraries?

1.  Please see the last part of Jeremy Likness’ blog article titled 30 Years of “Hello, World” for how they fit together.  Start with the Silverlight section of the July 8, 2013 article, and continue through the TypeScript section to the end.  

2.  More details: http://www.piotrwalat.net/using-typescript-with-angularjs-and-web-api/

I hope you find these sources as helpful, and interesting, as I did.

Finally, some food for thought:

1.  Given the innovation in the last 18 months or so, what will this space look like in a year?  In 3 years?

2. Who are the emerging leaders?  What kind of value to developers and end users do the various JavaScript libraries provide?

3. Most all of the libraries are open source.  How will that impact niche leadership?

4. Except for TypeScript and some JavaScript Library specific SPA MVC4 project templates, Microsoft is notably absent from this space.  Why?

It will be fascinating to see how things play out in this rapidly innovating niche.

George Stevens

Creative Commons License

dotnetsilverlightprism blog by George Stevens is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Based on a work at dotnetsilverlightprism.wordpress.com.

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: