Sencha Inc. | HTML5 Apps

Blog

Sencha Touch Spotlight: Xero

June 30, 2011 | Craig Walker

Xero logo - The world's easiest accounting system 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 (check out the Xero Ext JS Spotlight to learn more). 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.

Check out Xero in the Sencha Touch App Gallery

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.

Sencha Touch Xero- iPhone dashboard

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.

Sencha Touch Xero- iPhone invoice

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.

There are 10 responses. Add yours.

A T McClain

4 years ago

Hi - looks like a great app, and very interesting that you’ve found success with Sencha and Phonegap.

Has your mobile app been released yet?  There’s the pic on your homepage, but I don’t see it in the iOS app store, and couldn’t find mention of it on your site except the image.

Also, what was your experience like designing an interface that works for both iPhone and Android phones.  Yes, Sencha Touch provides the underlying framework, but did you deal with issues around the different UI conventions - such as Android phones having fixed menu buttons on screen or in the hardware?  Any issues around the variety of screen resolutions and sizes in the Android space?  Some Android screenshots would be helpful, given that cross-device compatibility is a big part of your post.

Finally, do you have / did you consider BlackBerry support?

Thanks and again looks great - ATM

Craig Walker

4 years ago

It’s sitting In Review right now - I will absolutely announce in the comments when our app is released (been in review for 10 days which is really frustrating). The web version is live right now though: go to https://touch.xero.com to sign up for a free account and start using it (there is a demo once you’ve signed up so you can have a play). The web version currently works on iOS, Android 2.2+ and Blackberry 6+ devices.

The app looks exactly the same on Android as it does on iOS (other than a difference in fonts). This is why it doesn’t look exactly like a native iOS app (which we could have done) - we wanted it to have a distinct look and feel that mapped consistently across devices. We’ve had great feedback from Android users and we have some very vocal Blackberry Torch users that love it.

Craig

Colin

4 years ago

the UI looks great, but performance is quite bad

David White

3 years ago

Any plans for Windows Phone 7 support?

joran

3 years ago

How much is it? I like the UI too.

Craig Walker

3 years ago

@Colin You find performance bad? We worked pretty hard on making sure that isn’t the case. Any specifics would be great. I think performance is one of those areas that will improve both via the great work that Sencha does in every release and also organically through the development of devices (iOS 5 will be a big boost even on the same devices that run iOS 4).

@David You’ll have to ask Sencha wink Essentially we’re bound to the same device/browser support that Sencha Touch has. At the moment it’s definitely a no because Windows Phone 7 has the worst browser on the market - but Mango changes that so we’ll see.

@joran It’s free to use Xero Touch - it’s a complimentary product to our desktop web app. You can access https://touch.xero.com with a free Xero user account, and the app (when it gets approved by Apple) will be free in the App Store. If you want to use Xero for your business then it’s great value for money: http://www.xero.com/pricing/

Jamie Nicholson

3 years ago

Great read, I look forward to giving the product a whirl.

Damon Oehlman

3 years ago

Nice work guys - just gave it a try now and I’d say it’s most well executed Sencha Touch App I’ve seen.  Makes me very happy to be a Xero customer smile

Cheers,
Damon.

vaky12

3 years ago

the furture is very light

Alexxis

3 years ago

Craig, amazing stuff. One of the things I’ve noticed even you guys didn’t figure out: The while screen during initial load of the app (at least on iOS that is).

Did you figure out why?

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.