Sencha Inc. | HTML5 Apps

Blog

Sencha Touch 2 Beta—Raising The Bar

February 01, 2012 | Ed Spencer

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.

Download Sencha Touch 2 Beta   View Release Notes

UPDATE: Sencha Touch 2 RC is now available. Go download that instead!

What’s New?

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.

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.

Sencha Touch 2 Docs
Touch 2 Docs feature 20 new guides, code samples, and editable examples.
Visit the Touch 2 Docs

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.

Jog with Friends, a new Facebook example app in Sencha Touch 2

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.

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.

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:

var panel = Ext.create('Ext.Panel', {
    html: 'Sencha Touch 2 rocks'
});
alert(panel.getHtml()); // alerts the current value of the html config
panel.setHtml('It sure does'); // changes your panel html to a new value

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.

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:

Ext.define('MyApp.controller.Products', {
    extend: 'Ext.app.Controller',
    config: {
        routes: {
            'products/:id': 'showProduct'  // It’s that easy
        }
    },    
    showProduct: function(id) {
        console.log('showing product ' + id);
    }
});

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

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:

Ext.application({
    name: 'FB',
    profiles: ['Phone', 'Tablet'],
    controllers: []
});

Now we set up a Tablet Profile that’s activated when we detect that we’re running on a Tablet device:

Ext.define('FB.profile.Tablet', {
    config: {
        controllers: ['Feed'],
        views: ['DetailedFeed', 'Timeline']
    },
    isActive: function() {
        return Ext.os.is.Tablet;
    }
});

And one for Phones:

Ext.define('FB.profile.Phone', {
    config: {
        controllers: ['Feed'],
        views: ['SimpleFeed', 'Timeline']
    },
    isActive: function() {
        return Ext.os.is.Phone;
    }
});

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.

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.

Touch 2 beta Component Dataview
The KivaTouch demo app uses a Component DataView to show funding progress.

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.

Sencha Touch 2 Navigation View. View video on Vimeo

Dive In

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.

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!

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.

There are 48 responses. Add yours.

Jay Garcia

2 years ago

Congrats guys!! This is the best Sencha Touch yet!

Abhishek Mishra

2 years ago

This was really fast. We love you even more now !!!

Ralph Haygood

2 years ago

Excellent! I’ll put it to work shortly.

Cameron

2 years ago

With all our ST 1.x projects out of the way, I’m excited to get new ones started on 2. I really like the major improvements you’ve made.

Steven Roussey

2 years ago

I’m excited for mobile again!

Jay Robinson Sencha Employee

2 years ago

Congratulations to the Touch team for their incredible work! Sencha Touch 2 looks amazing!

Steven Roussey

2 years ago

PS: The link “guide on history support” goes to a 404 page.

Rich Waters

2 years ago

Great work guys!  Things are really shaping up, and these guides look awesome.

Robert Dougan Sencha Employee

2 years ago

@Steven

Thanks. It seems to be a caching issue and we are looking into it.

Jay Robinson Sencha Employee

2 years ago

Sten Roger Sandvik

2 years ago

Wow. The “MVC with History Support” seems nice. Will you port the history code over to ExtJS 4.1 too? Or is it in there already?

Ed Spencer Sencha Employee

2 years ago

@Sten it’s kind of present in 4.1, but in a different form. I don’t want to speculate too much about future direction of the products but ST2’s approach feels pretty good…

Luis Merino

2 years ago

Congratulations on this release. Things are getting very cool, I love the new history, the routing and overall approach, makes things very clean and faster when developing. Again, excellent work!

Mostafa D

2 years ago

hi, so exiting!! but in user-interface->list , I can’t access to the last option of list, is this problem just for me ? (I’ve checked it by Google chrome)

Jaroslaw Zabiello

2 years ago

When Sencha Designer will support all those new features? E.g. new controlle’s routes are not supported.

James Pearce

2 years ago

Looks nice! And of course a nice focus on easing the social aspect with compelling mobile apps…

Ed Spencer Sencha Employee

2 years ago

@Luis thanks, I think those new MVC patterns are going to be very well received

@Jaroslaw we’re working closely with the Designer team to bring those features in soon

@James thanks, hopefully we can expand on that smile

AndyD

2 years ago

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.

seasharp2

2 years ago

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.

RAMACHANDRAN

2 years ago

thanks and great sencha guys….... waiting for the RTM , please do it sooner sencha team….......

Alex

2 years ago

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.

Please keep up the excellent work!

Danilo

2 years ago

This is great! Finally I can use it also on Android platform! Yeah! smile

Jamie

2 years ago

Congrats on the release and I’ve starred the android issue.
Can’t wait to give the Sencha 2 a go.

Jason

2 years ago

Fantastic beta.  You guys rock!

Cecil B.

2 years ago

Sencha Touch is hands-down the best framework for mobile development. Keep up the great work!

Ed Spencer Sencha Employee

2 years ago

@AndyD thanks for the comment. So far we’ve been optimizing for the device OS versions that are actually out there in the wild. At the moment (thankfully) Honeycomb and ICS only account for 4.4% of all Android devices (see http://developer.android.com/resources/dashboard/platform-versions.html).

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.

Ed Spencer Sencha Employee

2 years ago

@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 smile

@Cecil, Jamie, Ramachandran and Danilo thanks for your enthusiasm, go make something awesome with it!

Rob Boerman

2 years ago

Awesome guys, excellent work again! The device profile is again one of those things that show you guys really know the problems we (developers) face and solve them pro-actively for us.

Looking forward to taking it for a spin

Johan

2 years ago

Is it just me or is the download link broken?
http://cdn.sencha.io/touch/sencha-touch-2-b1.zip

Marco Kisten

2 years ago

I can only agree with AndyD
The one major advantage: cross device ‘compatibility’  will be a joke.

Regardless how fantastic Sencha Touch is, if it sucks on Android I can also develop nativ iOS Apps.

Ed Spencer Sencha Employee

2 years ago

@Johan just tested it - working for me. Can you try again?

Ed Spencer Sencha Employee

2 years ago

@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

Johan

2 years ago

Ed Spencer: There we go! Got it!

Mark Francis

2 years ago

Absolutely blown away by this, it’s beta but already way superior to 1.x stable and jquerymobile is light years behind. Can’t believe you give this away for free, thank you!

Arjen

2 years ago

“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.”

I have marked the star. I hope many people follow. Please tweet about it in suport of higher priority.

Don Ruby

2 years ago

@Ed : Is there a target date for Touch Charts to be compatible with ST2 ?

Ed Spencer Sencha Employee

2 years ago

@Arjen thanks for your support, we actually got some rapid progress on the issue from the Android team on this one - we’ll update you shortly on that

@Don that’s a little outside my purview, don’t think it will be simultaneous with 2.0 GA but should be not long after it

Roger

2 years ago

Hi looking forward to 2.0 RTM - the docs and guides don’t scroll on the iPad so can’t see all if them.
Thx

bens

2 years ago

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

Ed Spencer Sencha Employee

2 years ago

@Roger we’ll do that at some point, at the moment though no-one we know actually develops *on* a mobile device so it’s been a lower priority

@bens best place to ask is in the Touch 2 forums (http://www.sencha.com/forum/forumdisplay.php?91-Sencha-Touch-2.x-Discussion)

AndyD

2 years ago

@Ed The rapid picking up by the Android dev team of the reported issues sounds promising. I had already starred 24833 and have also starred 25147 @ http://code.google.com/p/android/issues/detail?id=25147

Steve

2 years ago

Sencha is comming along well on the iOS and Android front.  The question is Windows 8 Metro Apps which can be developed directy within the WinRT environment.  What is Sencha’s views on this?

Simon Flack

2 years ago

Looking great Sencha… Well done!

Todd Zmijewski

2 years ago

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?

Ed Spencer Sencha Employee

2 years ago

@AndyD yup, plus Chrome is on a great trajectory (more on that soon)

@Steve Metro looks very interesting, we’re keeping a close eye on it

@Todd yea the stuff between PR3 and PR4 was the biggest change, API has been very stable since then (that’s the nature of a preview release of course…)

Andrew Thorp

2 years ago

When can we expect Sencha Touch 2 to be out of beta?

Thanks!

Ed Spencer Sencha Employee

2 years ago

@Andrew the last several releases have had great stability. We’re tracking a handful of issues we’d like to correct before we claim GA but we’re pretty close

Anthony Hoang

2 years ago

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?

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

Commenting is not available in this channel entry.