Mobile web apps have come a long way from their clunky, cut-down ancestors of the pre-smartphone era. Responsive design and mobile-specific interactions such as touch and swipe events have begun to bridge the gap between mobile web-apps and native smartphone applications. So unsurprisingly, when working with a mobile web app we are often tasked with aiming not only for feature-parity with a corresponding native app, but for UI-parity as well.
While plenty of arguments can be made against this approach to begin with, on a recent mobile web-app project we were curious to see how far we could go when tasked with pursuing the native ideal.
Parity across the layout of the pages is simple enough, but the native UI experience is about so much more than just layout. All of the seemingly-insignificant things in the periphery - page transitions, modal dialogs, the now ubiquitous left-hand slide-in navigation bar - are crucial. However, there was one element that we didn’t expect to cause any problems, particularly given how widely used it is - the humble accordion.
In a prior post, I explained how Backbone.js can be used to implement cascading select boxes. However, this was pretty much just a read-only affair, and these were relatively simple HTML elements. How does Backbone fare creating, updating and deleting data via a much more complex UI component?
I recently had the chance to build a shared calendar tool with Backbone and FullCalendar, a jQuery plugin for a full-sized calendar with drag-and-drop capabilities. I was quickly able to get them playing nicely with each other, and in this entry I'll cover step-by-step what it took to get there.