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 surgence?) 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. You can also download the source of the app in the video that I demonstrated at the SharePoint Evolutions conference.
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.
SharePoint Apps & the SPA Development Process
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
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.
- 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
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!