Quantcast
Channel: Engineering @ CustomMade » mobile web
Viewing all articles
Browse latest Browse all 2

Piggybacking on backbone.js for performant mobile web

0
0

CustomMade is a pretty data- and interaction-rich site. Not only do we serve up pages with lots of dynamic content; we also have many interfaces that manage highly interactive experiences (e.g., negotiation between buyers and makers, two-side ideation and collaboration, simultaneous upload of portfolios of dozens of portfolio images). To handle this more cleanly, @Brendan advocated at the end of last year that we begin moving to backbone.js.

Since then we have been extremely happy with backbone. It has helped us out—faster and in more places—than we originally hoped (e.g., untangling management of large sets of asynchronous callbacks when uploading large numbers of images at a time). I’ll defer a deeper discussion of this to future posts by Brendan as this post is about how we piggybacked on backbone to improve our mobile web architecture.

Enter mobile web

A few weeks after we started our work in backbone, we began to optimize key areas and interactions on CustomMade for mobile. We (very) briefly debated mobile web vs. native apps. However, we saw very quickly that mobile web was the best match for our customer use case:

A customer sees something interesting that he or she desires (say a cool table in a restaurant), then whips out a smartphone, goes to custommade.com, takes a picture and posts request to get the same table (but larger to seat the entire family back home), and starts receiving offers from makers to get it.

Pausing to first download an App (even a PhoneGap’d HTML5 app) does not fit this use case. However for mobile web to succeed, it has to be FAST (no one is going to wait around for a transaction to complete with their phone hanging out).

Native mobile app interactions are fast (even when they need data from remote servers) because the MVC architecture controlling the interaction is embedded in the device itself. This is different from traditional browser interaction that needs to pass arguments to a remote server to determine what to display next. Solving this is where backbone helped again. Backbone loads an MVC-like architecture client-side in the browser. I use the word “MVC-like” because there is some debate as to whether backbone provides a true MVC architecture or simply emulates elements of it. Purisms aside, the result is unchanged: backbone moves (traditionally) server-side structure from servers far away to the browser in your hand:

mobile-arch-comparison

Backbone loads key structures (models, routers, and views) into the browser on page load, enabling fast navigation and more dynamic interaction

The result: performant mobile web

As a result the experience of our mobile web experience is virtually just as fast (and interactive) as that provided by a native app (without the headache of getting a provisioning license, building in a closed ecosystem, submitting for approval and requiring download and installation). Views are dispatched within the browser, allowing users to progress forward and back without pinging a remote server (this even works in staging when we shut off the staging servers;) Run loop polling (which backbone does efficiently, even over mobile connections) automatically notifies customers of changes in project status and receipt of new messages:

mobile

Examples of progression from inception of project idea to receipt of a proposal by a maker. A future post by @Manning will highlight his wizardry with HTML5 and Sass to emulate iOS’s UIKit framework. In addition, we’ll share our experiences on use of mobile-specific templates vs. responsive web

Caveat

This approach does not allow for completely offline operation. It does handle interruptions in connectivity but ultimate needs to connect to our backend servers to get and post data. If we needed offline operation (for extended periods of time), without losing any data, we would instead build a native mobile app with an embedded SQLite database. However, that is not our use case

The post Piggybacking on backbone.js for performant mobile web appeared first on Engineering @ CustomMade.


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images