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!
h3. 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.
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.
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.
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:
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.
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:
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.
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:
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.
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.
h3. 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.
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.
@Steven
Thanks. It seems to be a caching issue and we are looking into it.
I’m excited for mobile again!
Congratulations to the Touch team for their incredible work! Sencha Touch 2 looks amazing!
PS: The link “guide on history support” goes to a 404 page.
Great work guys! Things are really shaping up, and these guides look awesome.
This was really fast. We love you even more now !!!
Excellent! I’ll put it to work shortly.
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.
Congrats guys!! This is the best Sencha Touch yet!
Fixed: http://docs.sencha.com/touch/2-0/#!/guide/history_support
Thanks, Steven.
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?
@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…
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!
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)
When Sencha Designer will support all those new features? E.g. new controlle’s routes are not supported.
Looks nice! And of course a nice focus on easing the social aspect with compelling mobile apps…
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.
@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 :)
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.
thanks and great sencha guys……. waiting for the RTM , please do it sooner sencha team……….
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!
This is great! Finally I can use it also on Android platform! Yeah! :)
Congrats on the release and I’ve starred the android issue.
Can’t wait to give the Sencha 2 a go.
Fantastic beta. You guys rock!
Sencha Touch is hands-down the best framework for mobile development. Keep up the great work!
@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.
@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 :)
@Cecil, Jamie, Ramachandran and Danilo thanks for your enthusiasm, go make something awesome with it!
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
Is it just me or is the download link broken?
https://cdn.sencha.com/touch/sencha-touch-2-b1.zip
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.
@Johan just tested it – working for me. Can you try again?
@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
Ed Spencer: There we go! Got it!
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!
“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.
@Ed : Is there a target date for Touch Charts to be compatible with ST2 ?
@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
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
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
@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 (https://staging.sencha.com/forum/forumdisplay.php?91-Sencha-Touch-2.x-Discussion)
@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
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?
Looking great Sencha… Well done!
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?
@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…)
When can we expect Sencha Touch 2 to be out of beta?
Thanks!
@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
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?