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!)
- infinite scroll when browsing questions (background data fetch when you hit “Load more”)
- loading animation while we’re fetching data in the background. OK, this one is not particularly impressive 🙂 but still, a proof that native-app grade effects can be achieved with HTML5.
Feedback on AngularJS (pros & cons)
Here is a quick list of what we learned during our experience with designing and implementing this app.
Pros
- Once you’ve understood its logic, writing a complex app is pretty fast and straightforward.
- Possibility of defining custom HTML directives (aka Web Components). This has been “the” killer feature for us.
- A quite impressive number of built-in directives and services.
- Routing client requests to inline templates.
- Manage URL navigation and browser history for hash based URLs (i.e. http://host/pat
h#action). - Good documentation.
- Automatic synchronizing between views and data models: really easy and straightforward to use.
Cons
- Creating custom directives is pretty complicated due to the complex rendering life cycle (compile, link).
- Automatic synchronizing between views and data models: can sometimes be a bit intrusive.
What’s Next?
What’s next? Leverage trigger.io to package all this as a “native” app, add push notifications and leverage HTML local storage to build some offline capabilities.
We’ve also started to use AngularJS more and more in our desktop web UI, in the Administration pages. We really enjoy the development model and will use it more and more in our application.
Check It Out!
Want to try it: just go to resources.quandora.com from a mobile device. Or, even better, try Quandora Question & Answer for real!
Comments are closed.