Sencha Touch 2 Developer Preview

Today we’re thrilled to share with you the first developer preview of Sencha Touch 2. Sencha Touch 1.0 launched just one year ago and has become the leading framework to build mobile HTML5 apps. Today, we’re delivering a preview of our biggest update to the framework yet. We’ve focused on three key areas: Performance, Ease of Use, and Native Packaging. We’d like to share with you the details of each of these.
h3. Performance First

Our number one goal for Sencha Touch 2 is performance. Web apps can’t be beaten for convenience, but you want them to be fast too. There’s the measurable stuff: fast to boot up, fast to layout, fast to switch orientation, and fast to render. But there’s also the intangible aspects–scrolling needs to feel smooth and animations should be fluid and flicker-free.

h4. A Brand New Layout Engine

One of the key targets for performance improvement was the layout engine. The Sencha Touch 1.0 layout engine was extremely powerful and great for laying out apps just the way you want them, but the price for all that power was often reduced performance. This was especially evident when rotating the device, where layout updates could take up to a second to complete.

Our mission in Touch 2 was to dramatically improve layout performance while maintaining the flexibility that developers are accustomed to. To achieve this, we rethought how to size and position things on screen. The result is massively improved layout performance across the board. Screens pop onto the page much faster when navigating through the app, giving a much more fluid experience, but the most dramatic improvement is when changing a device’s orientation. The new layout engine is so fast we had to use a high-speed camera to measure it. Here’s the Kitchen Sink buttons example running on 1.x and 2.x, slowed down to one quarter speed:

That’s a Motorola Atrix rotating with 1.1 and 2.0. Shooting at 120 frames per second, Sencha Touch 1.1.0 takes 118 frames (0.98 seconds) to update the application layout. With Sencha Touch 2.0, it takes just 42 frames (0.35 seconds) for the exact same example. You’ll see see similar speedups throughout all the demo apps with Sencha Touch 2.0.

h4. Android Performance

The second big improvement we’ve made in Sencha Touch 2.0 is Android performance, particularly when it comes to scrolling and animation. Many of you noted the fact that Android devices were noticeably slower when scrolling through large lists, and that animations could be choppy and exhibit weird visual artifacts.

Touch 2 gives Android its own optimized mechanism for achieving both smooth scrolling and fast, fluid animations. We’ll go further into the technology behind these advances at SenchaCon later this month, but for now here’s the Motorola Atrix again, showing just how much faster 2.0 feels on Android devices.

Startup Time

The third major area of performance improvement is in Sencha Touch startup time. We’ve optimized everything we can put our hands on with startup. And so far we’re seeing between 10% to 25% improvement in startup time on a range of devices, when testing our Kitchen Sink example. This app is sizable–it demonstrates almost every component in the framework and on many devices loads almost a second faster in 2.x:

h3. Easy to Use

The second objective of Sencha Touch 2 is to make it easier to create applications. There are many things we’ve done to improve this, from simplifying configuration options, to providing more example code and completely overhauling the documentation.

h4. Class System and Apps

Sencha Touch 2 uses the powerful new class system from Ext JS 4. This gives us all of the benefits of dynamic loading, intelligent builds that only include the classes you use, mixins, configurations and all the other features of the new engine. We have a full guide to the new class system on the documentation site.

We’ve also brought across the improved application architecture from Ext JS 4, that includes ComponentQuery and production build support. All these features haven’t been at the expense of download size. We’ve been able to keep the total download payload roughly the same size, and that’s before build optimization.

h4. Streamlined Component Configuration

In the past, if you ever needed to set/get a config like “label” you would need to create your setters and getters yourself. Now, with Sencha Touch 2 you get this out of the box. The new class system gives you the ability to set up @[email protected]–simple properties that are automatically given getter and setter functions, defaults and more.

Sencha Touch 2 makes use of the config system throughout the framework so whenever you see a config on a class you already know that you can reconfigure it at any time (even after it is rendered). Even better, because the config’s setter name always follows the same pattern you already know what function to call.

For example, we can give a Text Field a label when we instantiate it and then know we can easily change it later:

var text = Ext.create('Ext.form.Text', {
        label: 'My Field'
});
// anything we can configure also has a setter function
// its name always follows the setConfigName pattern
text.setLabel('Another Field');

From the Sencha Touch documentation, every listed config option has a getter and setter function. They all follow the exact same pattern of getConfigName and setConfigName. This makes it really easy to configure and reuse components throughout your app.

h4. Great Documentation

We’re totally obsessed with improving our documentation for Sencha Touch 2. The new docs feature all of our examples and videos baked right in, but the real improvements are in the class reference.

All of the most widely used classes in Sencha Touch 2 feature excellent documentation right in the API reference. Interspersed with the class docs are dozens of live examples that run right in your browser and let you see (and even modify) the example code on the fly. We’ve also brought all of the SASS variables for each Component into the API docs, making it much easier to see what you can customize.

Finally, we’re shipping 11 brand new guides out of the box. Check out our work in progress with guides that explain core concepts like Layouts, Components and Classes, and others that cover how to use components like tab panels, forms and carousels. For Sencha Touch veterans there’s a What’s New in 2 guide, and the new Getting Started guide takes you through building your first app from scratch.

h3. Native Packaging

One of the most common questions developers ask when building Sencha Touch apps is “how do I get my app in front of customers?” In many scenarios, building and deploying apps to the web is exactly what developers want and customers expect. In some cases, getting apps in to app stores is an added bonus.

Today, along with Sencha Touch 2 preview, we’re shipping a developer preview of our SDK Tools 2.0. This first preview is available on Mac OSX and packages your app for submission to the Apple App Store. The new SDK Tools include a new @sencha [email protected] command that enables you to take your Sencha Touch app and package it up for submission to Apple.

To make a developer’s life easier, on iOS the packager doesn’t require the native SDK so you can package without having to download the iOS SDK. Just download the SDK Tools and you’re ready to build. For developers who do have the the native SDKs, you can use the SDK Tools to directly push your app to the iOS emulator so you can see how your app will run on device.

There will be many more capabilities in our packaging tool by final release. If you’re interested in getting started, embedded in the documentation is a new guide that has all the details on how to use the new packaging capabilities. We think you’ll be as excited as we are with how easy it is now to build and package your web app for native distribution.

h3. Developer Preview

This is just a developer preview so we’re not quite feature complete yet. At the moment the main items missing from the release are multiple carousel animations, sortable tabs, draggables and history/deep linking support. These will all be coming back into the framework before general release.

As a preview release, *APIs are not yet frozen.* This should be fair warning. Because the API is not yet frozen, we’re also not yet guaranteeing backwards compatibility with Sencha Touch 1.x.

Everyone attending SenchaCon later this month will also be able to attend “Jamie Avins’ talk”:http://secure.lenos.com/lenos/sencha/SenchaCon2011/sessions.htm on migrating apps from Sencha Touch 1 to Sencha Touch 2.

h3. Conclusion

From faster startup time to Android advances, from fluid scrolling to amazing documentation, from native packaging to the new class system, Sencha Touch 2 will be a major step forward for developers looking to build mobile HTML5 applications. We’re very excited about all the improvements to Sencha Touch, and we’re excited to see what developers will accomplish. Join us in the forums and keep an eye on the blog as we post more articles on Touch 2.

And of course, if you want to meet the folks behind Touch, join us at SenchaCon in Austin, Texas!