OPTEN, das einzige Umbraco-zertifizierte Unternehmen der Schweiz

Improve user experience with Single Page Applications

Whenever I read about Single Page Applications (SPA) or Single Page Interfaces (SPI) they are defined as a huge html file. But I would say that’s not true. You can still separate them into multiple files and include them either with a framework or more easily but “uglier” with jQuery. You will then show these parts or pages without any roundtrip to the server (but there are hybrid apps where the server returns html).
A Single Page App is not only a huge html file which hides and shows pages, it can also update data on the page without refreshing the page (pressing F5). That means most of the work happens on the client side.

There are no side effects, right?

There are. Single Page Apps are different and you have to think differently. There is more initial work, it takes time until you have the right plugins and frameworks together and know them well. You do not have real URLs (like yourpage.com/about-us) because you have either one huge html file or load the pages dynamically with AJAX. You need a routing mechanism (normally with hashes) and have to think about SEO. You also have to think about testing – good testing, because you’ll have tons of JavaScript.

So why I should develop a Single Page App?

The fact that the most work is on the client, there are less server calls, so the user does not have to wait for the response. Therefore it feels very smooth and like a native app. The server could be only a REST API (Raspberry PI), which can be requested from almost everything. The data consumption is less (good for Mobiles without WIFI) because it only loads the needed data in a simple format (like JSON or XML).
And it clearly gives a better user experience – you really want to discover the page.

So I spend more time in combining JavaScript plugins together?

There are helpful JavaScript Frameworks out there. Have a look into AngularJS, knockoutJS or backbone.js. These frameworks have more or less everything what you need: binding, validation, routing and testing with pure JavaScript. So far I have worked with AngularJS and knockoutJS together with ASP.NET MVC and they fit together pretty well. You can also have a look into “Infinite AJAX scroll”.


To get into the approach of Single Page Apps is not that easy, but when you’re in, you’ll have fun and love it. Single Page Apps are really interesting for mobile devices which don’t have the same network speed as a computer connected with a LAN cable. It opens a new experience for users. Even well-known sites such as Facebook and Soundcloud use the approach of Single Page Apps.
Now it’s over to you. Try to build a Single Page App.


0 Kommentar(e):