SPA posts

I’ve been spending a lot of time at work recently working on another phone app. Like our other apps, we’re using Phone Gap to build an app with web technologies. Like one previous app, we’re using Backbone, adding Marionette to help this time. Backbone apps are generally SPA‘s that rerender entire pieces of the HTML document when the underlying data changes. This can often be basically the entire content of the document when you change routes.

Because there is no page change, browers don’t typically change the scroll position when you visit a new “page”. So when you click a link at the bottom of one page, you may end up at the bottom of the new page you are loading. It’s common to have apps set the scroll position to the top via JavaScript on page change, like window.scrollTo(0, 0);.

What happens when hitting the back button varies from browser to browser. Some, like Chrome, try to remember the scroll position for each fragment identifier (how Backbone handles routes by default), while others, such as Safari, do not. When they do not, it can be a usability problem working with lists of items. You might visit the detail page of one item by pressing a link in the list, then go back to the previous page wanting to look at the next one, only to find your place is lost.