Inside Quandora technology stack (II): Mobile UI powered by AngularJS

Quandora is all about helping people get and share knowledge. Offering a way to do it on the go is a must for a good user experience. Including early in our product’s roadmap the building of a pleasant mobile user experience was a no-brainer for us. We’ve released our mobile user interface a couple of months ago, here is a short story about how we built it.

Quick History

Logically, we’ve started by having the now common dilemma for application developers: go native or go HTML5? We’ve pondered a bit, but as Quandora is mainly about consuming and contributing content, the browser makes perfect sense as it’s designed for that. And you benefit from all the sharing capabilities of the browser for free (share question by email / Twitter / Facebook / text, add to reading list to read later, etc).

So HTML5 it was… but no way to sacrifice user experience. We wanted to make it really good, as close as possible to a well designed native app. To achieve this, we decided to build a client-side only HTML5+JS app, using our extensive REST API get data (as JSON) and perform actions.

We were soon out for shopping to find the right framework to trust. We’ve checked out a pretty good sized list of approaches, including jQuery Mobile, Sencha, Knockout, ember.js and AngularJS. After some exploration, we decided to go with AngularJS. Concise code, neat data binding and reusable HTML components – this is the kind of features that ultimately won us over.

Quandora Mobile

And after having actually implemented the mobile UI this way, we’re pretty happy with this choice. Angular allowed us to focus on the user experience, building nice UI widgets and just consuming our REST API, avoiding a pretty big bunch of boilerplate code.

Key features built-in the app:

browse questions & answers, activity stream, user profiles

search

ask question, post answer, post comment

vote up/down, accept answer

change knowledge base

share link from the browser (URLs are stable & working)

open a link from a mobile device automatically direct the user to the mobile UI, at the right place

On the UI side, we’ve built a couple of pretty neat features:

we’ve spent some time on is the collapsible left-side menu, with a slick animated transition, not related to Angular (except it doesn’t get in the way), we’re pretty proud of it! For this, we went with direct Canvas to properly control the animation and the displayed menu. It took us a couple of day and we’re really impressed by what we’ve been able to do thanks to Canvas: it’s slick and totally fluid.

neat floating icon to launch main action (ask question) or open a contextual menu (thanks Sparrow for the inspiration!)