Two years ago, we set out on a journey to make the web mobile. Today, we’re raising the bar with the release of Sencha Touch 2 Beta.

Thank you to our community for your feedback during our sneak peaks with our Preview Releases. Your contributions in the forums, reporting bugs, adding feature requests, and your inspirational teamwork in the Q&A threads have kept us focused on what’s really important to you–delivering quality. We’ve taken all your feedback and we’re proud to deliver a release that we hope will exceed your expectations.

With every major release, we strive to bake in the latest innovate approaches to help you create impressive applications. And learning how to use these techniques is now easier than ever.

h4. API Documentation, Guides, and Examples

We’re investing a great deal of time in creating comprehensive documentation for Sencha Touch 2. Every major class now has a full introduction complete with code samples and how it fits into the wider context of your app. As well as class docs, we’re adding over 20 brand new guides covering everything from getting started through to building and deploying your applications.

On top of this, our documentation center now allows you to experiment with inline code editing.

We’re continuing to lead the way when it comes to innovation in our learning materials. We’re also proud to continue sharing all of the hard work we put into our documentation tools under the open source JSDuck project, a part of Sencha Labs.

h4. New Facebook Integration Example

We’re adding an example showcasing Sencha Touch’s seamless integration with the Facebook Graph API. Jog With Friends combines the Facebook JavaScript SDK on the client side with a 200 line node.js script backed with MongoDB on the server side. For a live demo, check out http://ju.mp/senchajwf on a WebKit browser.

h3. Foundational Improvements

Each major new version of Sencha Touch brings with it an opportunity to advance the state of what can be done with the mobile web. Here are just a few of the improvements we’ve made in Sencha Touch 2.

h4. A New Class System

Sencha Touch 2 benefits from the supercharged class system that powers Ext JS 4. The upgraded system enables powerful new capabilities like dynamic loading, custom builds and new features like mixins. This makes developing your app easier from the first line of code all the way through to creating a minimal custom build that contains only the classes your app actually uses.

As a developer though, the biggest improvement you’ll probably notice is the use of the new config system. Sencha Touch components have always been very configurable, but for version 2 we’ve made a big improvement to the consistency of the API.

Every single configuration can now be set and updated in a very predictable way through the use of generated getter and setter functions. These functions always follow the same format and can be called at any time so once you know the config name you automatically know what function to call to update it:

These functions always follow the same format, which makes learning the framework really easy. As well as the getter and setter functions we provide hook functions which makes it easy to create your own configs–check out the new class system guide to find out more.

h4. MVC with History Support

One of the most frequently asked questions about web frameworks is how to structure your apps to make them easy and fun to create and maintain. With Sencha Touch 2, we’re bringing significant improvements in our MVC architecture, providing new functionality and a cleaner, leaner API.

History support is baked right into Controllers in this new release, making it easy to add back button and deep linking support into your application. We have a full guide on history support and you can see it in action on your device by checking out the upgraded Kitchen Sink example.

Setting up routes is easier than ever–just define the urls your app needs to react to inside your controller along with a function to call when that url is detected. For example here’s how we can easily create an ecommerce application that shows product details when the user navigates to urls like http://myapp.com/#products/123:

Check out the full guide on History Support to find out how to add this to your app.

h4. Multi Device Profiles

One of the challenges of a multi-device world is building an application that runs seamlessly across operating systems and screen sizes. With Sencha Touch 2 we provide a simple mechanism that enables you to write your app once then customize it for each device it runs on.

This is achieved by configuring Device Profiles, which usually split your app into Phone and Tablet modes. Define all of the models, views, controllers and store that you want to reuse in your Ext.application and anything profile-specific inside the configuration for each Profile.

For example, let’s say we’re creating a Facebook app and want to show a simple feed view on Phones and a detailed one on Tablets. We can start by telling our Application that it has two profiles:

When the app boots up, it will automatically figure out which Profile to activate and use its specialized models, views and controllers. Check out the Device Profiles guide to find out how to use them in your app.

h3. New Components–Component Data View and Navigation View

In addition to using the new XTemplates in your dataviews, we’re adding one of the most asked for features–using components in your data views. You can now add buttons, or any components, to items.

Giving your users the proper visual cues helps your applications flow more naturally. With Sencha Touch 2, wiring up view transitions are now simpler than ever when using a Navigation view. If you choose to use a navigation view, navigational controls such as back buttons will be handled for you. As an added bonus, we’re adding sexy animations when switching between cards.

Now that we’re in beta, we encourage you to dive right in. We have a stable API, and we have more guides to help get you going quickly. If you’re looking to port your Sencha Touch 1.0 app we have a backwards-compatibility build that helps you through the migration process. We also have an upgrade guide to help you out.

Note: those of you who have been using the Sencha Touch 2 Preview releases, be aware that we have cleaned up the builds we generate and as a result you may need to change which build of Sencha Touch you use. Most people should now be using sencha-touch-debug.js while developing, but for a complete list of the builds we generate see the builds guide.

h3. Features We’re Still Working On: Android ICS Performance

Sencha Touch 2 has significantly faster performance on Android 2.x browsers – with fast list scrolling being a particular point of pride. We’ve always treated the browser in Android 3.x as fundamentally broken, and do not plan to officially support it in Touch 2. We are currently working on improving performance in Android 4.0 – the Ice Cream Sandwich release. So far, we have found no acceptable mechanism to achieve fast and flicker-free animations. We have filed a bug with a simplified test case showing poor performance on a variety of mechanisms with the Android bug list. If you’d like to help prioritize this bug, please go to the bug page for Android bug number 24833, and “star” the bug by clicking on the star icon just before the headline. Solving this bug will help, not just Sencha Touch 2, but the entire web community developing content for the Android 4 browser. Feel free to add your own test cases as well!

h3. Summary

We hope you enjoy playing around with the examples, and diving in to building your next great app. It’s been a lot of hard work getting to this point, and we thank you for all the feedback. Please keep sharing your ideas.

I bet it’s all nice and smooth on an iPhone. I tried it on 3 different Android devices, and the best I can say is: it works. It works on Gingerbread but is still far from fast, it does *not* work on Honeycomb and on ICS I don’t know but I don’t exactly get a warm fuzzy feeling when reading the above blog entry.

I have been keeping a close look on Sencha Touch and this is now it’s 5th release in the 2.0 line. Every release has the same ending of it’s release notes: ‘Android 3/4 and Blackberry optimizations are not yet in place’.
This worries me more with each release. Let’s hope that those optimizations actually exist and will really be implemented. Because if not, it is just not interesting to develop apps using technologies like Sencha Touch. The one major advantage: cross device ‘compatibility’ will be a joke.

Oh, if you consider me ‘just a troll’ then please get yourself an Android device (which the majority of smartphone users own by the way, let us not forget that) and see for yourself, go ahead run that navigation view demo on it.

When you say for Android ICS “So far, we have found no acceptable mechanism to achieve fast and flicker-free animations”, does this mean we Sencha user-developers who wish to include animation type features in our apps should steer clear of ICS? Or are you saying the basic touch animation events that are core to many mobiles apps do not function well on ICS.

I’ve been using ST2 PR3 and have been thoroughly impressed with the progress since 1.1. This is a much, much more mature framework. Together with ExtJS 4.1 and the vastly improved docs you guys have been putting out (which blow pretty much everything else out of the water), I really like the direction Sencha has been going.

The versions that we do support extremely well (2.2+) accounts for 86% of all Android phones, which is roughly 20x more actual devices that 3.x and 4.x combined. We are (right now) working on better support for 4.x but have to allocate our resources wisely, remembering that 3.x and 4.x have some extreme and possibly unsolvable issues with animations, down in the browser itself.

@seasharp2 we just mean that the browser itself in those versions has serious problems with most animations and that you might want to steer clear of using them on Android devices until a solution is found

@Alex docs are such a big deal for us, it’s really gratifying seeing all the praise they’re getting. Thanks :)

@Marco and @AndyD looks like there’s some good news on that front – Android 4.0.3 contains a patch that improves some of the performance issues that have been giving everyone problems with 4.x. Check out the comments on the bug report we posted above (http://code.google.com/p/android/issues/detail?id=24833). We’ll test internally and report back on our findings

Can anyone tell me if there is any touch/event calendar code available using sencha touch 2.I tried the sencha touch 1 calendar.it is working.but when i tried to change the code to sencha touch 2 its showing errors.Pls do help.its urgent

If only it gracefully degraded w/o JavaScript … we can’t everything right. – great work so far. Hyped for the production release. Though beta is looking pretty good once I was able to get over the few humps going from pr3 – beta. That said even at the prototype stage people are already bugging me about Windows and Opera mobile browsers. Are there any future plans to provide compatibility with these browsers after general release?

I was working on Sencha Touch 2pr3 and had a working app. I replaced my sencha-touch-all.js file with the one from Sencha Touch 2 Beta3 and immediately had some errors and now my app is broken. Is there a migration guide out there for developers who want to migrate from S.T.2pr3 to S.T.2b3?

Sencha, Inc. may share your information with its parent company, Idera, Inc., its affiliates globally and its partners. For further details on how your data is used and stored, please review our Sencha Privacy Policy.