Going the SPA way

AngularJS Hackathon

The SPAs are very popular lately! And I’m not talking about what everybody thinks of when they hear SPA, but about Single Page Applications. I guess every week I keep reading at least 1-2 posts in my RSS reader about the subject.

There are tons of articles already on the subject, plenty of books to read and so many frameworks aimed at making the development of SPAs easier that it’s really difficult to pick the right one for you in case you are new to the subject (just like me…).

About 2 months ago I read/watched via RSS one article written by Dan Wahlin called Video Tutorial: AngularJS Fundamentals in 60-ish Minutes. This is without any doubt the best 70 minutes I’ve spent on YouTube in a long long time. The video is very well organized, very easy to follow and introduces you to the AngularJS framework created by Google. It doesn’t go into details as it’s impossible to do it in only 70 minutes, but it shows the power of AngularJS and makes you want to find out more!

I was really impressed by what you can do with very little code and effort, so I wanted to dig a bit deeper… There are plenty of resources online for learning and understanding AngularJS and below I’ll enumerate just a few that I’ve found to be really good:

  •  AngularJS API reference – very good point to start directive, modules etc… also easy to discuss problems and get help as every topic has a Disqus thread associated.
  • Egghead.io – very good collection of short videos on AngularJS topics (the AngularJS official site points actually to this collection of videos)
  • Scoop.it! – has a very good collection of AngularJS resources that it’s worth taking a look at

As probably the best way to learn something new is to do something practical, I decided to write a small SPA in order to show the events listed on Cyprus Events in a more mobile friendly way (their “mobile” interface is old and rather unfriendly to use).

For the purpose I’ve use the following technology stack:

  • AngularJS
  • Bootstrap – cause I can’t design anything and Twitter Bootstrap is really amazing
  • jQuery
  • UnderscoreJS - a really nice JS utility library that makes life easier… it contains some nice “extension methods” for collections that helped me write “LINQ like queries” on an array – thanks to .NET Rocks and Derik Whittaker for mentioning this library in show 873.

The result is available online here… the app is not impressive from functionality point of view, but in order to make it work I’ve got my hands dirty with few AngularJS concepts: modules, routing, controllers and views, created a service to retrieve the events for a specific feed (as I couldn’t load the RSS feeds directly with jQuery’s AJAX methods I’ve used a small PHP code snippet found here), used promises and even created a factory which I’ve used to share data between 2 controllers.

One aspect that I would like to improve would be caching of events as currently the feed is loaded every time the user selects a category. One idea would be to use the HTML5 local storage if available using also the date when the feed was last loaded and reload it on user request (some button for refresh) or if the data is older than 1 hour (could be even more)… but, still I’m trying to understand what caching options is AngularJS offering (suggestions are welcomed in comments :) )…

The result is working properly on desktop browsers (Chrome, Firefox, IE, Opera) and mobile phones: checked on Android phones and also iPhone and iPad emulators (available as plugins for Web Matrix), but it’s not working on my Windows Phone device (WP 7.8) – trying to find a way to understand why the feeds are not loaded…

The project in it’s current stage is available for download on my SkyDrive

As soon as I’ll get some free time I’ll try to implement something similar, but using the approach John Papa is promoting: Durandal, Breeze (which looks really interesting), KnockoutJSHot Towel… and probably use jQuery Mobile for the interface…

Any comments or suggestions are welcomed!

Enhanced by Zemanta