Sencha Touch Spotlight: Xero

Update: Learn more about the current version of Sencha Touch which is now a part of Ext JS

Xero is the global emerging leader of online accounting software and services for small and medium businesses. Xero provides business owners with real-time visibility of their financial position in a way that’s simple, smart, and secure. It has been engineered from the ground up to truly make accounting easy (and maybe even a little bit fun!).

Xero is built on the web, for the web — making heavy use of open web technologies and frameworks, including Ext JS, to make a compelling and seamless desktop experience. However, while Xero has always strived to deliver the very best desktop web experience, the mobile experience has been lacking, and we decided it was time to deliver a mobile experience as compelling as our desktop app.

“With Sencha Touch, we were able to deliver on the vision of a single app running on multiple platforms.”

Building a mobile application is very different from building a desktop application. We’re proud of our user experience and design, and mobile forces you to focus on only the most important interactions. The end result should be an experience that’s heavily optimized towards key tasks and consumption. What can often be seen as constraining, we actually found liberating — taking existing concepts from our desktop product and optimizing the flows for mobility.

One key decision we needed to make, though, was whether to build a native “app” specific for each device, or a mobile-optimized web-based version. Obviously, one benefit of a native app is access to APIs specific to the phone’s hardware (such as the camera) but the biggest factor in going native is access to the burgeoning ecosystems surrounding each platform (like Apple’s App Store or Google’s Android Market). From a marketing and positioning perspective, being in those app stores and having access to those ecosystems is huge.

Obviously, the downside to native is having to maintain lots of versions of the app — writing code for iOS is very different from writing code for Android — and having access to the resources to maintain those codebases is difficult.

Why We Chose Sencha Touch

Sencha Touch is built from the ground up to leverage HTML5, CSS3, and Javascript to develop rich web applications that look and feel native right out-of-the-box. By providing both a powerful core framework and an extremely slick user interface toolkit, Sencha Touch does a lot of the heavy lifting required to make what is actually a very difficult task (building native-like mobile web applications) very easy. So instead of having to focus on issues such as positioning, touch interactions, and scrolling, we were able to focus on building the best business software we could. Given that we have a deeply experienced team working in web technologies and Ext JS, Sencha Touch was an obvious choice, enabling us to speed up our development timeframes significantly.

And because at the end of the day it’s all just the web, we were able to deliver on the vision of a single app running on multiple platforms.

Another big factor was the theming support. We were delighted to see Sencha choose SASS and Compass for theming from the very early betas. SCSS is amazing to work with and allowed us to quickly build up some basic theming patterns, and then deep-dive into creating a rich and beautiful interface very quickly. Native looking elements such as toolbars, buttons, tab-bars, and carousels can be easily themed creating a unique user interface specific to our brand.

We made use of almost every feature Sencha Touch offers. Due to the nature of doing accounting on the go, we made heavy use of form controls. Sencha Touch provides a nice abstraction over semantic HTML5 form elements (such as email) that enabled us to build rich forms. The component model and object-oriented patterns make it very easy to extend the base controls. We were able to extend and enhance the existing control set to build sophisticated form controls like autocompleters, calendars and pinpads. And having the power of CSS3 meant we could create controls that appeared completely native, lowering the barrier to entry for users.

Easy to use lists and dataviews that bind directly to models (stored either locally in cache or remotely using Ajax or JSONp calls) make it very easy to throw data on the screen. Features like grouping add to the native look. Plus, having scrolling, physics, and amazing use of hardware-accelerated CSS3 where possible, all built-in to the core library, added to the native feel.

Then, there’s the fun stuff like being able to embed a Google Map out-of-the-box.

It seemed from very early on that Sencha Touch was developed to take the pain out of mobile web development — and if that was the goal, it’s a massive success.

Going Native

Another reason to choose Sencha Touch is actually not even directly related to Sencha Touch at all! PhoneGap is an open-source project that allows any web app to be packaged and deployed as a native app across multiple platforms (including iOS and Android). It does this by instantiating a chrome-less web view and running your web application within that view, and then adds a very simple JavaScript API that provides access to the low-level device APIs.

PhoneGap and Sencha Touch work beautifully together. For Xero, being able to write code in the technologies we were most comfortable with and also having the flexibility of delivering that application as a native app with access to native APIs, was absolutely amazing. The mobile web is inherently redistributable but PhoneGap adds another level.

Business Value of Using Sencha Touch

Choosing Sencha Touch was all about productivity gains in developing our mobile experience. We needed to be able to build something quickly, that also matched our brand values of user experience and design.

It’s hard to quantify the gains, but one of the biggest compliments we can give to Sencha Touch was that most of the time spent on the application was building features, not worrying about the underlying architecture. By providing us with a complete, well-designed, and extensible framework, we were able to start immediately building features from day one. Plus, using open web technologies, we were also able to utilize our existing skills rather than bringing in new resources. We could also keep the team very light — we had one person develop the whole application from scratch, freeing up other resources. The result of that one codebase is an application deployed over the web (for iOS, Android, and Blackberry 6), via the Apple App Store and soon the Google Android Market.

It’s important to note that one particular feature of Sencha Touch that gave us significant efficiency gains was its use of a client-side MVC pattern. This promoted good reuse of widgets, views, and models and allowed us to create a very clean codebase from the start. It also enabled us to refactor as we went along without ending up with spaghetti code. In addition, being able to extend models and add custom validation allowed us to create better separation across our views. For an accounting application that has a lot of business rules, this was a massive win for us.

We’re by no means done — there is a big roadmap ahead of us. But the basics are already well built out — and Sencha Touch provided us with the building blocks to make that happen.

Our Advice to New Developers

As with Ext JS, the learning curve for Sencha Touch can be steep, so while it is very easy to get up-and-running it can be frustrating building more complex applications. Start with the documentation — we think it’s fantastic. And when the documentation doesn’t help try the Sencha Forums — if you have a problem we often found someone else had it as well. And whether you have a problem or not, we found that studying and understanding the source code of the library itself is a great way to learn the framework and figure out how everything hangs together (it’s also a great way to learn some JavaScript tips and tricks — the Sencha development team are rock stars).

Make sure you develop for performance. If you don’t understand the basics of client-side web performance (minify, concatenate, compress) then learn them — mobile devices are slower and mobile networks are flaky with high latency so anything you can do to improve performance over the wire is crucial. It’s also a good idea to “destroy often”: Sencha Touch has destruction and DOM clean-up capabilities built-in so use them (if a view is no longer required or hidden look at destroying it — render speed is very fast so the trade-off is small). This keeps the DOM mean and lean, improving animation performance (especially on devices that aren’t hardware accelerated) and keeps the memory footprint light.

With PhoneGap, also make sure to minify and concatenate your JS files — JIT compilers are slower with larger files. And watch out for the case-sensitive file system in iOS — if your code is working on the simulator but not on the device then make sure you’re referencing it correctly (caught us out a couple of times actually!).

Which leads us nicely to the most important advice we can ever give you on mobile development: test on a phone! We often found that code that ran beautifully on the simulator or emulator didn’t work at all on the device. You must test on real devices.

Final Thoughts

Sencha Touch has been a joy to work with. It’s enabled us to maximize our development efforts and deliver a superior mobile experience. It’s a complete framework and a massive head start for anyone wanting to build a rich mobile web application. We believe Sencha Touch is the first mobile web framework that is a serious alternative to native apps. We highly recommend it.

If you want to see the current version of Sencha Touch, it is now a part of Ext JS. Check it out here.