Single Page App

What about a Single Page App or SPA? What's a SPA? A Single Page App is more of a pattern where you can create an application that lives within a single page and doesn't use the typical pattern of navigating to different pages as you proceed through different screens, causing the whole browser to refresh the page. Why would you want to build a web application as a single page app compared to just a series of pages? One reason is to eliminate the page refreshes that we see in most web-based applications. Instead of watching a whole page refresh, I just want some specific sections of the page to change, just those necessary parts. Microsoft even tried to achieve this with SharePoint 2013's user experience by building some new technology they called the minimal download strategy or MDS, but I find this incredibly hard to work with and it causes all sorts of problems with custom things that you want to build. Worst of all, it really is only a SharePoint 2013 paradigm and that's kind of frustrating because it's only going to be able to be used in our SharePoint sites. This reduced round-tripping to the server is also going to work great in a low band-width mode. Once the app loads and, generally, we're going to grab everything for the app to run, except for the data when it loads, you will grab only the pieces from the server on an as needed basis. This is very much like the web experience you get with Gmail or Outlook Web Access that we're used to. In fact, the app could be written to even work great when you lose connectivity and you need to work offline for short periods of time or even long periods of time. Another aspect of a single page app is that it's highly interactive. Usually they have some subtle animations that we see in most modern applications these days. They provide notifications and lots of feedback when there are events that occur such as validation when entering data or notification of success and error events. Single Page Apps have some common characteristics as well. Just because we run everything within a single page does not mean that we do not have any type of navigation. A SPA needs to give us a way to go from one screen to the next. This is handled using routes and it looks similar to the same type of routing that you see in MVC style applications. After loading the page in the browser, some extra routing information is added on the end of the URL to tell the SPA what screen should be loaded. In addition, users will want to have the ability to jump back to a specific part of the application referred to as Deep Linking.We are going to want our application to be smart enough to handle that as well. We are also working within a browser so users will naturally want to use the back and forward buttons within the browser. Even if they don't want to use them, we need to make sure that we keep track of where the user has been and give them this ability. Fortunately, the browser history can be leveraged, we just need to hook into it. Another important point that we want within our framework is the ability to have templates for our different views, and the ability to bind objects to them with smart data binding capabilities. Each Presentation Framework has their own dependencies or implementation of data binding so this is something that you will see that is going to differ between each of the different Presentations Frameworks. Thankfully, some great people and companies have seen these common traits and have worked to build different frameworks to help us with these challenges. There are a lot of great options here, but the two big Presentation Frameworks that I've seen are AngularJS, which is built and backed by Google and has a very strong community behind it, and Durandal, which takes a slightly different approach and is also quite popular. There are a few characteristics that you should look for in a Presentation Framework. Obviously we want to ensure that it addresses and includes the SPA characteristics, but you also want to see things such as routing and navigation, views and data binding, and dependency injection to support a very testable framework.