SharePoint Hosted Apps in SP2013 as Single Page Apps

In April I presented a session at the premiere SharePoint conference, SharePoint Evolutions, in London. At this conference I presented two sessions, one on workflow development and one on building SharePoint Hosted apps using a specific technique. In this post I want to talk a little about the virtues of the SharePoint Hosted app technique.

What I did was built a SharePoint Hosted App for SharePoint 2013 using the technique called Single Page Apps (SPA). The acronym absolutely sucks, but the concept is nothing really new. I suspect every single person reading this has used either GMAIL or Outlook Web Access (OWA). The concept is simple: you build a web application as a single web page… no navigating from page to page. It’s nothing new, but it seems to have a bit of a resurgence (or maybe just a surge?) lately as more and more libraries are coming out to support it.

I am not a big fan of rehashing what others have already said so if you are interested in learning more about these, I’d recommend two resources:

• John Papa’s Blog: John is one of the public personas behind the recent popularity of this SPA technique of building web applications. He’s the one who I learned it from. On his blog you’ll find a ton of resources.
• John Papa’s Pluralsight Courses: Technically he has two of them, but I’d recommend the jumpstart one as you can quickly get off the ground and productive within a few hours.

If you’re interested in seeing the app, check out this video in my YouTube channel of the app in action.

Why I like Building SharePoint Hosted Apps as Single Page Apps

After doing this once for a conference session and then in a few different apps for customers, I’ve all but decided this is the way I want to build applications for SharePoint. In fact, I use this technique for both SharePoint-Hosted Apps (SHA) and Cloud-Hosted Apps (CHA) unless the majority of the app lives server side or needs to have a strong mobile presence.

Traditionally I have not been a fan of JavaScript, but the tools and libraries are coming around to make me warm up to them. I’ll touch on a few of them at the end. Of the post. Some of the other things I really liked about this approach is how I feel it makes me so much more productive in writing apps as far as the development process is concerned.

SharePoint Apps & the SPA Development Process

Quite simply, the development process, from my point of view, is much faster than what would be considered the traditional development. In a traditional SHA development, you have to create ASPX or HTML files for the presentation and JavaScript files for the logic. When you debug a SHA in Visual Studio 2012, when you update a HTML, CSS or JavaScript file, even while still debugging, the developer tools upload a new version. This means you can stay in the debugging mode for a long time.

SPAs can take advantage of this… but what I like is that you have more smaller JavaScript modules compared to big files. The benefit here is that it’s easy to quickly get the framework of your application built out and then launch the debugger and stay in a live development / debugging mode. In fact, I frequently stay in debugging sessions for hours, one time 5+ hours, while being productive. And that’s one single session!

It also helps that there are so many libraries out there that address challenges you run into. One that shocks people is the fact that someone even built a library in JavaScript that implements LINQ! Naturally it’s called linq.js.

I also like that you stay in a single app so for a customer point of view, you only load the libraries and data you need for the current “screen” you’re on, but when you navigate to another screen, it only loads it if it hasn’t already loaded it in the past. I use a library called Durandal that helps in maintaining this client-side caching in that I don’t even think twice about it… it just works.

Challenges with SPA’s in SharePoint Apps & in General

There are a few challenges in building SPAs today that have nothing to do with SharePoint. The biggest thing here is the fact that JavaScript development, debugging and IntelliSense still just plain sucks. It’s no where near what we get with the managed languages in Visual Studio. For me, I’ve been able to address this and make it much better with Resharper which looks at all the JavaScript files in the project and loads them accordingly. I’m partial to ReSharper’s competitor CodeRush, but it doesn’t provide this JavaScript IntelliSense unfortunately… at least not today.

Another huge challenge is data access & management. There’s a library that is helping quite a bit with this called Breeze.js which can implement LINQ queries for you, handle data caching of the queries and a few other things. Unfortunately this also requires a server-side component presence so using it in SHA’s is a non-starter since we can’t deploy stuff to the server. With that being said though, I hear there is some stuff they are doing that would make it possible, so keep an eye on that.

SPA Libraries that Make Your Life Better

You could build a SPA all on your own and just follow the principles, but that’s a lot of hand coding. There’s a lot of libraries out there that will make your life better, such as:

• Require.js: This is dynamically loads, as needed, the libraries that you reference in your app. If the library has already been loaded in the current session, it is handed back to you… not reloaded. In addition, it also keeps track of nested dependencies, so you don’t have to worry that one library gets loaded before another. You just declare the dependencies in each and this library figures out what’s needed and loads them in order.
• Durandal: This one provides a lot of the plumbing things you want to have within a SPA. For instance, as a single page, you want to take over the FORWARD & BACK buttons in the browser. If you use Durandal’s navigation it keeps track of the pages you’re navigating to so if the user uses the browser buttons, it walks through the navigation stack for you.
• Breeze.js: Already mentioned what this one does… but it’s usefulness in SharePoint is questionable due to the server-side dependency.
• Linq.js: It is what it sounds like… a LINQ implementation in JavaScript
• Bootstrap: If you haven’t seen this one it’s a fantastic UI component suite. Basically it uses JavaScript and CSS it implement a lot of slick UI components.
• Flat UI Pro: This one takes the work they did with Bootstrap and implements the UI components in a flat way, which is more in line to the Metro look of SharePoint
• FontAwesome: One thing we all developers need is icons and things like that in our applications. And guess who’s the least qualified to create these? Developers! FontAwesome is a collection of icons implemented as fonts, CSS and JavaScript you can use. In fact if you look at the video above, there isn’t a single image in that app (including the animations)… they are all fonts!

So next time you look to build a SharePoint Hosted App, check out building it as a Single Page App. If you aren’t sure where to start, check out John’s Pluralsight jumpstart course I linked above… just watching the first hour will make you very productive!

Download article resources